Want to make a website? See 3 planning milestones before you cut PSD to HTML


Want to make a website? See 3 planning milestones before you cut PSD to HTML
2018-06-13
Do you want to make a new website? No problem. But before you design anything, pay enough attention to the strategy for your website. A well-planned website will speed up the process of cutting PSD to HTML or HTML services if you send a brief to an outside company.

 

Why is the plan important?

Can not you wait to start cutting PSD to HTML? Put your enthusiasm on hold. A good website should be well planned. Remember that its future failure, such as poor traffic, may result from either poor planning or poor implementation of the plan. The processes of cutting PSD to HTML, and then coding should be treated as the last stages of work. A web design and programming are nothing more but the effects of a well-thought-out strategy for the website.

In addition, a well-planned website saves you the time you spend on coding. If you decide to use the external company's HTML services, a good plan, and therefore a good brief, will reduce the number of patches and speed up the entire process.

Create Personas first

Before you cut PSD to HTML or outsource HTML services, think about who your target group is. Who are the users? Why do they go to the site? How do they move on the side? What do they expect from the website? What is the problem they have? To get to know the target group better, you can create 2-4 Personas. They will be representatives of the target group. Try to describe each of your Persona as accurately as you can. Include in the description, e.g.

  • first name and last name,

  • age and place of residence,

  • appearance and character,

  • characteristics of family and friends,

  • what gadgets, brands and services he or she uses,

  • what are her or his opinions about the world,

  • what she or he believes in,

  • what are her or his daily habits,

  • what was her or his childhood,

  • what could she or he say in different situations, etc.

The more details you write, the more likely you are to understand your target group. Remember, that all Personas are created for one target group. How to do it? For example, imagine that your product is women’s perfume and brand values are freedom and femininity. You can create 4 different Personas based on the same two values of your brand. Your Personas are, in turn:

  • very free and very feminine,

  • very free, but not feminine,

  • not free, but very feminine,

  • not free and not feminine.

Design for Personas

Once you know exactly who your website will be for, everything you plan on it, adapt to your Personas.

  • Create a mood board, for example on Pinterest – let it be an array of photos, videos, fonts, colors and emotions that you associate with your target group.

  • Plan the information architecture, taking into account how your Persona moves on it – maybe it turned out that one of your Personas is a 60-year-old woman who is poor at dealing with the internet?

  • Make sure that the planned colors, fonts and communication are consistent with the image of your brand. Website meets the expectations of your target group, but also should be consistent with the corporate identity of the company.

Create a mock-up

Before you make your website layout and then cut the PSD to HTML, it is good to prepare a so-called mock-up. If you order a website to a company offering HTML services, you can ask its developers or UX designers for preparing a mock-up for you. Why are mock-ups so important? Well, they are the outlines of your page that allow you to plan and check the structure and functions of the website. The mock-up allows you to analyze and test the finished project in terms of its usability.


Redakcja Archnews 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 Archnews nie ponosi odpowiedzialności za ich treść.

Nadesłał:

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

Wasze komentarze (0):


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