Jump to content

How to create a geat mockup?

Recommended Posts

16 hours ago, Yamly said:

Guys, does anyone has any experience in this field? Is it real to create a mockup without Photoshop?

There are a lot of different ways to create a realistic mockup even without Photoshop. Pay attention to this awesome article on Templatemonster - https://www.templatemonster.com/blog/free-mockup-generators-create-realistic-mockup-one-minute/

Share this post

Link to post
Share on other sites

Or don't.

Creating a single mockup isn't much help. You need to consider how the site will look on a desktop, tablet and phone in landscape and portrait. You need to design a navigation system that works on all devices. You need a homepage and product pages and a whole lot more.

It's often better to develop the content, navigation and calls to action first as they will often dictate the layout and structure of the site.

Share this post

Link to post
Share on other sites

OK. An interesting topic.

I assume the OP meant a mockup of a website, or in other words, a visual high-fidelity graphic preview of how the website would look like when fully developed (which was the usual practice a few years ago) and not a presentation mockup as @Quco's answer suggests.

As @fisicx pointed out, there are many many things to take into account. Ideally, you'd start with wireframing or prototyping and most likely, you'll need to create quite a few low-fi mockups / wireframes / screens (you name them) during this first stage to illustrate the user journey, focusing on functionality, gathering (or discovering rather) additional business requirements in the process, perhaps even testing various layouts without investing too much time.

Of course you can do most of this in Photoshop but there are plenty of tools, free or paid, which you can use to create high or low fidelity mockups. It all depends on your workflow - virtually any tool has its use if you feel comfortable with it.

If you Google the following terms, I'm sure you'll get a better idea of what you really need:

- UI/UX prototyping tools

- UX wireframing tools

- Photoshop alternatives

Hope that helps :)


Edited by teodora

Share this post

Link to post
Share on other sites

I used to be a draftsman back in the days when it was done with paper and pencil

I still do all my wireframing by hand, i find it much quicker and easier. I can annotate and link the sketches to show how the whole site can work on a single sheet of A2.

Share this post

Link to post
Share on other sites

Good designs are never done upfront and then thrown over the fence to the development team.  Also designs should think more in terms of individual components rather than pages however some very high level rough outlines of what components key pages contain is useful.

Good design is all about collaboration and a continual feedback loop between design, dev, stakeholders and end users.  You need to find what design best suits the needs of all of these and will always involve compromise.

All too often design teams will spend months creating a beautiful shiny design that gets dumped onto the dev team only for it to be sent back as the design does not translate well to sensible code and/or has major UX/Accessibility failings.

Going back to components and the feedback loop, individual components should be designed and built ideally with the designer and developer pairing to determine the feasibility of the component.  Components should be looked at like lego bricks - they should be able to slot together with other components to build out a page or view. 

These components should start out at a very low level - like a wireframe to very quickly determine the feasibility described above, with the cosmetics coming second.

The design team can then produce pages or views containing these components, again with a feedback loop between dev, users/stakeholders.

I really don't think the waterfall process of design->dev works well, the two should be done in unison as a collaborative effort.  Results from teams that do this well speak for themselves.  It's a massive pain to design and build something at great expense to find out at the end that it's not really what the user had in mind.

In short it's all about good communication.

Edited by rbrtsmith

Share this post

Link to post
Share on other sites


I used online Magic Mockup generator for creating the best mockup.

It will provide you a different type of devices mockup so you can choose multiple devices like iPhone, Macbook, Desktop, Smartphone etc layout.

If you wanna design and create own prototype or mockup than here is the list of best prototyping tools to create your own design.

Best Prototyping tool link - https://www.pixlogix.com/blog/finest-prototyping-tools-year-2018/

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts