Firma » Biznes

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

What is a website mock-up and why it’s worth doing it before you cut PSD to HTML?
Zobacz więcej zdjęć »
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 CentrumPR.pl w kilka minut, poprzez platformę Link Buildingu np.:

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.




Redakcja CentrumPR informuje, że artykuły, fotografie i komentarze publikowane są przez użytkowników "Serwisów skupionych w Grupie Kafito". Publikowane materiały i wypowiedzi są ich własnością i ich prywatnymi opiniami. Redakcja CentrumPR nie ponosi odpowiedzialności za ich treść.

Nadesłał:

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

Komentarze (0)


Twój podpis:
System komentarzy dostarcza serwis eGadki.pl
Opublikuj własny artykuł
Opublikuj artykuł z linkami

Kalendarium

Przejdź do kalendarium »

dodaj wydarzenie »

Ostatnio dodane artykuły

dodaj artykuł »