20 Steps to create perfect website layout design

Claudio Guglieri, director of the New York advertising agency B-reel, has written a training guide on this website designed to help you understand the whole process of designing the site layout.

Before I begin to talk about the theme of designing a website, I would like to share some common mistakes I have seen in my design work for many years, especially the problems of interns and novices described in "Web Design Training".

This article lists the steps to create the perfect site layout, designed to cover all the comprehension in front of the new project and in the project design process, which is suitable for all web designers who are working in the digital advertising company.

The following principles not only contain a variety of design details, but also provide regular workflows to help you get your work done well. Follow these principles and you will soon be able to design a professional website layout.

01. Organize your thoughts on paper first

The world's City illustrations series Simple pens

This article is obviously important, but I often find that some designers skip this step and use Photoshop CS6 without thinking about the problems they need to solve. The purpose of the design is to solve the problem, and these unresolved problems can not be solved by the gradient or shadow effect, but need the perfect layout and clear structure. Think about content, layout, and functionality before you start shading.

02. Start with the top floor frame sketch

Sketching the basic framework will help you solve the UX problem and organize the layout structure

If I want to do a project look and feel, the first thing is to build a top-level framework to solve all the design problems. A frame is a UI around content that helps you perform actions and browse. This includes navigation and various components, such as sidebar and bottom bar.

If you are designing from this point, the layout will be clear when you design a part of the home page.

03. Add Grid to PSD

978 Grid sample drawn with a 10-pixel baseline

This is a very simple operation. Before you start designing anything in Photoshop, you need to create a suitable grid. The truth of this step is well known, if you do not, I can assert that the final design is always not perfect.

With the help of the grid, you can arrange different parts of the layout structure, and can guide you to the specific screen size requirements for design, and can help you create the appropriate template to meet the spacing and other design problems.

04. Choose Layout Style

According to conventional experience, a Web site layout of the best font used not more than two kinds of

Understanding the different fonts and colors is the work of the project development phase. I suggest that there should be no more than two fonts used in a Web site, but in fact, it depends on the colors you use. All in all, the selected font needs to be easy to read in large amounts of text and is a great contrast to headings and actions. Boldly use large fonts and maintain overall consistency and vividness when using fonts.

05. Choose Theme Colors

Use limited levels and tones to avoid visual fatigue

After you've chosen a series of fonts to use, you should start studying what color the UI, background, and text should be. With respect to colors, I recommend that you use color and tone simplicity in dealing with regular user interfaces.

It is important to maintain consistency in the design of the UI based on element functionality. Think about web layouts like Facebook, Twitter, Quora and Vimeo. In addition to the UI, there is no limit to the color aspect of the illustration or graphic detail section as long as it does not interfere with component functionality.

06. Divide the layout

The simpler the site structure, the easier it is for users to browse

All parts of the site need to play their part. For the user, each part has its own reason for existence, and can get the corresponding final result. The layout needs to help emphasize that its content highlights the most important information in that section. In fact, a page does not require too many call buttons, so each content should be driven to the end "what can I accomplish here".

Think about the simplest layout you can envision for a simple goal and start adding the required components. In the end you will be pleasantly surprised to find simplicity is not easy.

07. Rethinking what has been built

Do we really need a search button? In most cases, the answer is no.

As designers, we build the way users browse the Internet, how many steps they need to take to perform a simple operation and the complexity of the site is up to us to decide. We have been following some design patterns and practices because they are effective, but sometimes just because no one has enough time to measure or rethink. It is important to rethink the interaction patterns that have been built on the components and see if they can be improved.

08. Self-Challenge

I encourage each designer not to stick to the rut, but to challenge themselves on every project. Not every project requires innovation, so it's up to us to decide whether or not to add some interaction design-related content. For example, various self challenges may include using new grid systems, creating new components, or even minor challenges such as avoiding blending patterns or avoiding the use of specific colors.

09. Attention to Detail

Ongoing game items: Detail view

This is a cliché, but not always used in the finished product. Depending on the concept of the project, the "Attention point" will vary.

You can focus on small interactions, unexpected animations, or aesthetic feelings, such as small gradients on a button or subtle strokes around a background box. But overall, if you enjoy it, it's very important and natural.

10. Take each component seriously, and participate in the design competition

Focus on each component, one plus one greater than two

I must admit that this is not the theory I pioneered. I was shocked when I heard this on fantasy Interactive in the past, and it was so clear and pertinent. Each component needs to be designed individually to make it extraordinary. Sometimes, the designer will classify some parts as the least important, and it will not pay attention to them in the end.

11. Improve the clarity of design works

Avoid pixel blur and try to set the contrast or background color between the stroke effect and the background correctly

In addition to aesthetic considerations, some common problems need to be avoided to create a clean and correct work. The following points should be noted when attempting to improve design clarity: gradient bands, blurred edges, font rendering options (some fonts depend on the font size, preferably in a particular rendering mode), and stroke effects that blend with the background.

Some of the basic considerations are listed above, but there are a number of issues that need to be noted in practice. Be sure to look at the design from a holistic perspective and see if it's all perfect, and then analyze each component separately for questions.

12. Finishing PSD

This is critical if you are designing through Photoshop (combined with grid use). No matter how big the project is and how many designers are involved, you need to keep the files clean. This ensures that different parts can be easily exported, thus increasing the speed of the design process and being able to handle files shared with other designers.

13. Design the best case, but prepare for the worst

Keep in mind how your design works with different equipment and sizes

As designers, our job is to solve problems through different limitations. In the Web page design process, there are various constraints, including conceptual and technical issues and content-related issues.

We need to create a Web site that can run not only in an ideal state but also in the worst possible environment. For example, a user can view a Web site with a fairly small screen, and the content on the site appears fragmented.

However, given the purpose of our design work, I personally strongly recommend creating the best environment for it. So we're going to show the most desirable content and display it in the best browser size, the most common environment for users.

14. Addicted to design, love and hate

If you delve into the design, I'm sure you've done it. As long as you finish a design you will feel proud, design has become a part of life. It also captures screenshots, compares it to other devices, sets it to a desktop background, and even prints it up on the wall.

In the process, I reached a critical point, eventually disgusted, and I began to discover all kinds of flaws and errors and then make changes. Not liking your previous design is a mature performance, that is to say, you end up finding your own problems.

15. Avoid wasting too much time designing concepts before communicating with customers

When submitting an interactive concept or designing a look and feel, you need to ensure that you and the customer are synchronized as soon as possible. After the initial concept is approved, you can relax a little and start designing.

However, if the initial concept is not won after the customer's favor, you should collect all kinds of feedback, so that the second submission of the concept solution to meet customer requirements.

16. Make friends with your developers

Rafael Mumme, a New York advertising agency, HUGE the advice of designers on how to better collaborate with developers, visit www.netmagazine.com/opinions/20-things-drive-web-developers-crazy

Developers are creative and love their work as much as you do. But they are not always involved at the beginning of the project, and most of the time they are involved in the design after the conceptual design has been finalized, so their creative work has been obliterated. This process is wrong; some very good ideas are put forward by the development team. By sharing your ideas, you'll be pleasantly surprised to see them become more aesthetically pleasing and more easily designed.

17. Show: Please imagine the audience as four years old children

Displaying works is as important as designing a work. Using the wrong way of presentation may bury the good design or make it obsolete. Remember that the first time the audience sees your design, you don't know the key points that you have in mind.

18. Be sure of your ideas, but don't become slaves

There is a small tipping point when you know when to advertise your ideas, or when you know when a team or customer will disagree. As a designer, you need to believe in your design, but you should also be willing to accept other people's opinions, change your ideas quickly, and make subsequent adjustments. Don't forget that all roads lead to Rome.

19. Follow up design in the development process

If you work in an advertising agency, you must understand that although a project you just completed has been developed, you have to take part in the design of another new project, which is commonplace. It is generally accepted that PSD and style sheets are all right after submission, which is not true, but it is just beginning.

If you really care if your design and interaction concepts are fully implemented, you can communicate with your developer friends in real time and try to provide help to reach the best possible results.

20. Progressive Design Works

Share style sheets and components that are being designed

As a member of the design team, we not only want to see the final product, but also want to look at the work being designed. Sometimes, for a variety of reasons, the best part of the project can be ignored and kept in the archive folder. Once the project is completed and approved by the client/producer, you can proceed with the improvement and, if possible, create case studies, analyze the works in the design, and work that has not been used in the end. This helps broaden team knowledge and you can collect valuable feedback.

Claudio Guglieri is currently an art director in New York International electronic Advertising company B-reel. Of

Former art director at Fantasy Interactive is responsible for leading and making client interaction experiences such as Google, EA CNN, Nikelodeon, History Channel, Range roverand Microsoft. If you have any questions, you can @claudioguglieri.

For more web design tips, please refer to the following articles:

L Web Design training: Top online tools

L 30 Web Design secrets, Improve your skills

L 40 HTML 5 Perfect paradigm