What is a website mock-up and why it’s worth doing it before you cut PSD to HTML?


Oceń artykuł Zobacz ranking
Przepisz powyższy kod i oceń artykuł »
What is a website mock-up and why it’s worth doing it before you cut PSD to HTML?
2018-05-23
Mocking-up is the stage of the design process. Many web designers forget about it, underestimating its role in the process of building websites. See how to create mock-ups and why it's worth doing it before you cut PSD to HTML.

What is a website mock-up?

Zamów artykuły sponsorowane na serwisie Kafito.pl w kilka minut, poprzez platformę Link Buildingu np.:

Przeczytaj również:

Mock-ups are the outlines of pages or applications that allow you to plan and check the structure of the page and its functions. The mock-up allows you to analyze and test the finished project in terms of its usability. Such outlines should be handled by UX designer, but in reality, it is often done by a graphic designer or other people from the project team.

The model is usually delivered to the client in a digital form (for example PSD files), but a mock-up can also be a good quality hand-drawn sketch. There are two types of mock-ups:

  • lo-fi, or low fidelity – these are models with a low degree of detail and accuracy,

  • hi-lo, or high fidelity – these are precise models with a high degree of detail. They can be created, for example, in PSD files.

Why it’s worth doing mock-ups before cutting PSD to HTML?

Do not cut PSD to HTML if you did not do the mock-up. Why? Well, thanks to the mocking-up, you increase your chances of creating a useful, well-thought-out website. Mocking-up allows you to:

  • check user's paths on the page (if the navigation is well-designed),

  • try out ideas that would be expensive to implement (in the case of modeling you only bear the cost of paper and pencil or time spent on PSD files),

  • better communicate in the project team (instead of talking about your ideas, you can visualize them),

  • test different variants of presenting information on the website and checking which one is the best choice,

  • communicate with the client who can see the planned structure of the website and participate in the testing of new ideas.

What are the elements of the mock-up?

Remember that the mock-up is to refine the functionality of the site. It is a waste of time for sophisticated photographs, a refined palette of colors or searching for the appropriate typography. The mock-up uses:

  • placeholders instead of photographs or graphics (the whole page is built of squares and rectangles),

  • shades of gray instead of a full-color palette,

  • simple comments instead of extensive interactions (if you are making a static model).


Programs that will help you create a mock-up are, for example, Axure RP, Moqups.com, Pencil Project, WebZap (the last one is a plugin for Photoshop, which enriches the program with the ability to create mock-ups in your PSD files).

Your client responds to static mock-up with horror (eventually there are no colors on it), or for any other reason you need a very qualitative, detailed mock-up containing interactions? You can use programs to create perspective 3D web mock-ups. You can find the right tools on the web by typing in the search engine, for example, the phrase: PSD Perspective Mockups.


Nadesłał:

https://cut2code.com/
http://cut2code.com/

Wasze komentarze (0):


Przepisz kod:
Twój podpis:
System komentarzy dostarcza serwis eGadki.pl