20 steps to create a perfect site layout

@ Design Pie Wing in this article, Claudio Guglieri will give you a detailed interpretation of the entire process of Web page layout design.

Before we start talking about the topic of page layouts, I first thought about some of the common mistakes I've seen in my years of design life, especially when web design novices and interns often make mistakes.

In the 20 steps of the perfect Web layout design listed later in this article, I try to cover what I think every web designer should know before they start a new project, and what they should be aware of in the web design process.

These principles include not only design aspects, such as landing page design, but also how to make the work flow analysis more perfect. Learn them and you'll be the first step on the road to becoming a professional web designer.

　　1. First draw your thoughts to the manuscript.

Original sketches: Cities of the World

This is obvious, but I often find that designers often skip this step and just open Photoshop to start work before considering any problems that might be encountered. Design is about solving problems--How to communicate information effectively. These problems can not be solved by adding or shading, only good page layout and hierarchical structure design can create excellent web interface. Before you open Photoshop, think about your Web page content, page layout, and hierarchy.

2. Start by drawing the top-level frame

Drawing basic link relationships helps you solve UX problems and build page layouts

When I was asked to design a "feel" for the web, the first thing I did was design a top-level framework for the Web page, which would solve all the design problems. The framework described here refers to the UI (user interface) around the content of the Web page, which guides the user through the web, including navigation and interactive elements like the sidebar and the bottom navigation bar.

If you use this method in design, you will have a clear understanding of the needs of your layout when designing pages outside the home page.

　　3. Add a grid to your PSD file

978 grids for 10 pixel baselines

This is as simple as it sounds. Before you design anything in Photoshop, you'd better draw a grid for reference. There is no obvious reason not to use the grid, but there are obvious reasons to use the grid! I can assure you, there is a grid, you can certainly do better!

The grid helps you to divide the interface so that the grid can guide your design to meet the needs of different sizes of screens and maintain design consistency in areas such as white space.

　　4. Select font

A common principle is to not use more than two fonts in the site layout.

Exploring the use of different fonts and colors is an essential step in the project design process. I recommend that you do not use more than two fonts in the Web page, but you can also increase or decrease according to the actual situation. In general, choose an easy-to-read font (for large sections of text) and an interesting font (for headings and interactivity). Don't be afraid to use large fonts. In general, be sure to keep interesting and continuous when using fonts.

　5. Choose a color theme

Use a limited amount of color and hue to avoid visual fatigue.

In the process of choosing a font for your Web page, you should start by considering what colors to use in the UI, background, and text. For the general user interface, I recommend using a limited variety of colors and a limited hue change.

In the UI design process, be sure to refer to the function of the component while maintaining the continuity of the color palette. Refer to Facebook, Twitter, Quora and Vimeo: Unfortunately, these sites have to be fq to the layout of the design. In addition to the UI, there should be no color restrictions on illustrations or details-as long as they are not associated with the functionality of the UI component.

　6. Divide the layout into blocks

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

Every part of your site needs to have something to say, the value of reading, and the layout should help highlight the highlights of the article. In fact, there shouldn't be too much action on the same page, and everything should help the viewer understand what I can do here.

From a simple point of view, think of a simple layout you can imagine, and then add the necessary components, in the end you will be surprised to find that the simplicity of the layout is so simple!

7. Reflect on existing

Do we really need a search box? In most cases, the answer is: No!

As designers, we shape the way people surf the Internet, we decide the steps needed to do a simple operation, and we decide whether our site is efficient. Design styles and paradigms exist because they do work. But sometimes they exist only because no one takes the time to think about the meaning of their existence. This is important: to reconsider the existing interaction, and see how we can improve them.

　8. Challenge Yourself

I encourage every designer to be able to challenge themselves on each of their projects. Projects do not always need to be innovative, so innovation is entirely on the initiative of our designers. What are some examples of challenges? such as using a new grid system, creating a new component, or more subtle transcendence: avoiding blending modes or using a particular color.

　　9. Perfect details

semi-finished Games: Buckle details

It's a cliché question, but in fact the final product is always a lot of detail flaws. Depending on the concept behind the project, "Details" can be changed into many forms. It can be a small interaction element, an unexpected animation, or a bit of a gradient on a button or a stroke around a box, but in general, these details have to be practical and seem natural.

　10. Strict requirements for each component

Pay attention to each component, larger than the sum of the parts

I have to admit that this part is not what I came up with, I saw it on fantasy Interactive. I'm really amazed at how right and clear this sentence is. Each component should be designed to be a masterpiece even if it is carried out alone. Some designers leave these little questions "pending" and then end up not thinking about them.

　　11. Sharpen Your design

To avoid pixel ambiguity, try creating an appropriate contrast between the stroke and background or background color

In addition to aesthetic considerations, there are general problems to be avoided in order to create a clean piece of work. When you modify your work, you need to focus on issues such as gradient distortion, rough edges, font rendering options (some fonts vary in size, use different rendering modes to look good), and lines mixed with the background.

These questions are just some of the basic examples, but in reality such examples abound. Always take your design as a whole to see if everything can be coordinated and then analyze each component carefully.

　　12. Maintain the orderly and tidy psd files

This (and the use of grids) is one of the few recommendations you should remember when using Photoshop for design. In addition to the size of the project and the number of participants, you need to keep your files clean and tidy, which will make it easier to draw the stage results, speed up the design process, and facilitate communication and sharing with other designers.

　13. A red heart, two hands ready

Keep in mind: how your layout works on different devices and screens

As a designer, our task is to solve problems under all kinds of restrictions. In web design, these limitations include conceptual and technical issues, as well as content-related issues.

The site we have built not only needs to be perfectly present on the ideal equipment, but it doesn't look too bad in the ideal situation. However, in order to present our work, I always strongly recommend designing pages for the best scenarios. Thus, we design Web pages for the ideal use scenario for the maximum number of users.

　　14. Observe until you are tired of your design

If you're passionate about design, I'm sure that's what you're doing. When I finish a work that I am proud of, I will take it as a part of my life. I would screen it, use it as a screensaver, even print it down and put it on the wall.

As a result, I will eventually become disgusted with it, I began to see its flaws and eventually put it in the doghouse. Hating your current work is a sign of maturity, which means you have learned something from your mistakes.

　　15. Avoid spending too much time on a concept before you share it with your customers

When you think of a new interaction concept or a "look like" design idea, you need to make sure that your customers think the same way. If your client also likes your idea, it's okay to do it, but if the customer doesn't like your new idea, then you have to spend a lot of time trying to change your design back. Receive as much customer feedback as possible before putting the new concept into practice.

　16. Be the programmer's best friend

Yahoo's Rafael Mumme gives several good tips for helping to shoot chickens wet and program apes to get along: http://creativebloq.com/design/20-things-drive-web-developers-crazy-7116930

Programmers are also creative people, and they have almost a passion for their work compared to designers. But they are often not in the beginning of the project to join in, often the concept of the decision after their creativity will be useful. This program is wrong. Some of the best ideas come from the development team, so work together with them before the project begins. Share your ideas and passions with them, which will lead to more good ideas and better final products.

　17. Show: Treat Me like a three-year-old kid.

It's just as important to show your design and design itself. If your presentation is a mess, your design will be thrown into the dustbin. Always remember that those who first saw your design did not have enough knowledge of it as you did.

　18. Love your design, but don't be obsessed with

Know how to maintain your ideas, but also learn to understand that sometimes you can be a customer is not agree with your ideas. As a designer you need to have a firm faith in what you do, but you should also be able to quickly overturn an idea and make new ideas with open mind. Don't forget, there are more than one solution.

　　19. Track your design until the development process

If you work in a studio, you may have found that life is really one after another, the last one just entered the development link, the new task came again. Contrary to conventional wisdom, your job is not to pay the PSD file to the next link. If you really want your design to be perfect, remember to communicate with your programmers and friends at times to help them ensure that every detail of your design is implemented.

　20. Share your design progress in the design community

As a member of the designer circle, we not only like to see the results of others, but also happy to see how the project is carried out. While contributing to the community's knowledge base, you will also receive valuable advice or feedback.