A simple method to design the user interface of your website

Too often, we begin to build a website from top to bottom: paint a few empty boxes (a workspace and a sidebar for the menu, for example) and then fill them dedicated to content. The problem with this system is that we end up with a lot of things on the page that are “filling, and you really do not serve to fulfill our goals and design business .

Fortunately, there are other paths. In the blog of 37 signals we propose a simple and effective method to design the user interface of a website. They have always done very well. Here is summarized:

1. Make a list of all the things that screen should do. These questions can help you find out: What is it that the user should be able to achieve? How much information do you need to show? What functionalities are necessary for clients to complete a process? Once you have discovered the requirements, label them with numbers.

2. Define which of these numbered elements are related to each other , either spatially (one side by side) or conceptual (they are about the same subject). Assign a letter to each group of related items.

3. Make a sketch (or several) for each of the letters (grouping the numbers).

4. Group all those designs into a single design, to make all the pieces form a unit.

The next step would be to produce a wireframe or model .

If you still see it a bit abstract, here is a small example:

Make a list with the requirements you need:

1. Company information.
2. User information.
3. Link to search.
4. Creation date.
5. Changing the password is a very common operation.

Establish the relationships between each requirement. Some will be closely linked, and others will be independent. It’s about seeing what impact each requirement generates on others:

A: 1, 2, 4

B: 3

C: 2, 5

Establish priorities:

The most important: A

Necessary: ​​C It

would be nice to have it: B

Draw each “piece or piece” of the interface: From the moment we have grouped the requirements that are related, we can design each part individually without worrying about possible conflicts.

Join all the pieces. It’s about putting them all together. Some tips:

– Think about the limitations that have arisen when making individual designs.

– Keep in mind the priority you have established.

– Find a balance.

– And start drawing. First a sketch. Then you will get something similar to a wireframe.

Turn it into reality: It may work well on paper, but on the screen it generates a problem. So it’s time to make a design much closer to the final result.