Reposted from: Micro reading https://www.weidianyuedu.com
1. Web page size
When making web pages, we choose a resolution of 72 pixels /inch, and use a canvas size of 1920px*1080px.
But it does not mean that we can draw on the entire canvas.
There are two main layouts of web pages, left-right layout and centered layout. The inconsistency of the layout makes the space that can be designed different.
1. Left and right layout
Strong flexibility, small UI restrictions, the left navigation bar is the navigation bar, there is no specific limit on the width, and can be adjusted according to the actual situation;
The right side is the scope of the content section, which is the display area of the website content.
2. Center layout
The yellow part in the middle is an effective display area, which is used for displaying website content; in other words, both sides are blank, which has no practical use and only exists for adaptation;
3. The mainstream computer screen sizes are as follows:
Generally, the display area of website content is 996px; most domestic websites still use 1000 pixels as the boundary, because more than 1000 pixels are suitable for browsing on large screens, and small screens will appear crowded. Therefore, the width of the website within 1000 pixels can ensure that most users can browse the web comfortably.
2. Web fonts
The general principles of font design are: legibility and legibility.
The Chinese character design of the web page is the default font of the system: Song Ti, Microsoft Hei Ti, Apple System Hei Ti
For English, it is recommended to use sans serif fonts such as Times New Roamn, Arial, Comis Sans MS
The commonly used font sizes are as follows:
12px is the smallest font used for web pages, suitable for non-prominent date, copyright and other annotative content.
14px is fine for non-prominent, normal body content.
16px, 18px, 20px, 26px or 30px for prominent title content. Pay attention to the principle of even numbers, odd pixels will have burrs!
3. Font spacing
In fact, you don’t need to worry too much about the spacing between two adjacent texts. Except for special needs, you can use the default value spacing.
Line spacing: 1.5-2 times the font size is recommended as a reference;
Paragraph spacing: 2-2.5 times the font size is recommended as a reference.
For example, when a 14px font is selected, line spacing: 21-28px; paragraph spacing: 28px-35px.
4. Font color
Except for the main color, the six are all scene colors, which need to be used in different scenes (for example, the dangerous color indicates a dangerous scene). The six are text typesetting colors, and the text typesetting is performed through different colors of the text to express the hierarchical structure.
The color of the main text, it is recommended to use the VI color of the company brand, which can improve the association between the company website and the company VI, and increase the recognizability and memory.
For the font color of the text, to be on the safe side, choose a dark gray for legibility, and it is recommended to choose a color between #333333 and #666666.
5. Above the fold content
When doing web design , you should also pay special attention to the first screen content of the web page. In terms of composition and content presentation, the design of the first screen module is very important.
Remove the height of the taskbar, browser menu bar and status bar, and the rest is the height of the first screen.
The average height of the first screen of Window XP is 580px
The average height of the first screen in Windows 7 is 710px
Considering that Window XP has gradually withdrawn from the market, we use 710px as the basis for actual operation.
As shown in the figure below, the blue area is the range of the first screen that we need to focus on when designing.
Also, there is a question about image size.
For images that need to be displayed in full screen, the width is strictly designed to be 1920px.
But it is worth noting that the effective range of the image content cannot exceed the effective range of the web page content, that is, it should be controlled within 1200px.
Avoid the situation where the content is not fully displayed when encountering a small screen device, resulting in the omission of information.
6. Responsive layout design
Responsive design refers to different devices, screens, resolutions, and operation methods (mouse, keyboard, touch) to ensure that information is consistent in different environments and interactive and operable.
Since the width of the page has changed, the display of information has also changed, which is responsive design. Until finally, the picture information displayed on the screen of the mobile phone becomes a column.
Responsive design of the page requires layout design of different widths for the same content. There are two ways: desktop first (design from the desktop side down); mobile first (design from the mobile side up)
No matter which mode of design is based on, to be compatible with all devices, it is inevitable to make some changes to the module layout when the layout responds (the size range when the page width changes is the concept of the critical point. So we need to know when doing responsive design When the width range of each size is, we can formulate a relatively clear critical point. After setting the critical point, we will know how to display our page information when the width range of the screen is at which point. )
We use JS to obtain the screen width of the device to change the layout of the web page. This process can be called layout responsive screen.
The common ones are as follows:
1. The layout remains unchanged, that is, the overall module layout on the page does not change, mainly including:
2. The layout changes, that is, the overall module layout in the page changes, mainly including:
In many cases, a single way of layout response cannot meet the ideal effect, and multiple combinations need to be combined, but in principle, keep it simple and lightweight as much as possible, and maintain unity within the same critical point (the critical point where the layout changes are called critical points) logic. Otherwise, the page implementation is too complicated, which will also affect the overall experience and page performance.
8. Web page grid
Some articles on the Internet about rasterization systems are very theoretical. They are algorithms and modules, and they are mixed with responsive layouts, making it difficult for new web designers to start. So here is a case to illustrate when Adoption and how to set up a rasterization system the fastest. In all articles about UI, I will repeatedly emphasize the communication with front-end developers, because they are the executors of your design plan, which is very important.
1. Separate grid design from grid layout
Emphasizing the separate description of grid-design and grid layout (css grid) is my personal understanding that this belongs to two different jobs. The former is aimed at web designers, while the latter is aimed at front-end developers. Grid design is a grid system-based design that does not need to consider the response of the page, mainly to improve the standardization of web pages. For some medium-sized websites, or generally creative websites, grid design is still highly recommended, especially for some large-scale and long-term projects that require continuous iteration in the later stage. Grid design makes the webpage present a professional and reliable feeling , and contribute to later maintenance. The grid layout specifically refers to the css framework used by the front-end siege lion to achieve a responsive layout of the page.
Responsive design is only a compromise in web design, and the choice depends on the actual situation of the project. For designers, if there is no necessary requirement, they can choose a generalized grid system and use their creativity freely on this basis.
2. Never a panacea rasterization system
Regarding whether to use grid design, use the following cases to illustrate:
(Enterprise website and the like - mainly to introduce several single products)
(functional website)
(informal form of design)
For these three representative cases, a rasterized design is not necessary. The reason is simple. The advantages of the grid are also its disadvantages. Standardization means unity and restriction. In the above cases, there is no need to use grids to limit the inspiration of designers. After all, this society still needs a sense of design.
But in most cases, rasterized design is recommended. Especially for websites with mixed graphics and text and many sections, the grid design will make the pages with messy content appear refreshing.
Regarding the grid layout, there are many schemes. Let’s look at the following cases, which we all call grid design.
(generalized rasterization system - cells without spacing)
(generalized rasterization system - cells with spacing)
(generalized rasterization system - cells with spacing)
For web design that does not need to consider page responsiveness (in other words, framework-independent), the principle can be reduced to one sentence: "free decision by the designer".
3. Parameters of rasterization design
The 960 grid grid system, which is the most popular search result on the Internet, has been officially launched since 2009, but so far, many designers are still using it. In addition to considering the resolution of the display device, it also relies on the flexibility of the 960 grid. Therefore, for the new web ui, using 960 grid is still the best solution, it will not be brilliant but it will not make mistakes. If widescreen design is considered (some users with low resolution need to be discarded), the width of the rasterization system can be set to 980 or above. But designers who have no experience in rasterization design need to pay attention. The 960 mentioned here is the part with margins. In other words, in the psd document, your content part is 950px. The rasterized layout can use some very useful Online tools, such as the well-known Grid.Guide, are three layout specifications for a 12-column grid with a content width of 950. You can also use 24 columns, which is more flexible.
Grid-Guide auto-generated grid system (950-12 columns wide)
It can be seen from the figure that the column width and spacing gutter of these three schemes are different, and the rest of the work is much easier for UI designers. You can download the png format of the layout specification as your web design The basic section, based on which the columns are divided. Or just re-establish the reference line based on this parameter (I recommend this method, especially the new reference line layout of photoshop cc2017, the gutter corresponds to the gutter, and the column width corresponds to the column width). I simply made a page design diagram based on the layout specification. This is the advantage of grid system design. When dividing columns, there are reasons and evidence to follow.
[Schematic diagram of section division based on 960grid system]
Of course, since you are a designer, you can add more emotional elements. For example, if you want more white space, you can use a grid layout with a larger spacing value, as long as the entire website maintains a uniform layout. The picture below is the grid system generated when the content width is 1200. You can try many schemes, but the setting of Max Width is not so arbitrary, it depends on the positioning of the website.
1180 wide grid system (24 columns) automatically generated by Grid-Guide
As for the height and vertical spacing, there is no unified criterion for the grid system. Designers can use some values such as the golden section that are full of design sense, or the vertical spacing is the same as the spacing of the grid system or the whole Times, in short, also need a specification to guide the design of the whole station.
According to the actual situation of the project, the parameters of the grid system should be set in multiples of 10 or 8 (recommended by Google Material Design).
4. Parameters of rasterized layout
As mentioned earlier, if the requirement of the website is a responsive design, at this time, the designers must first ask the front-end how they plan to achieve a responsive layout, instead of handing over the design draft to them and YY they can 100% reproduce your design draft for you.
Regarding the responsive grid system, first declare that when the front-end is happy and understands the principles of CSS and the way the framework is built, it can build other styles of grids, such as 7, 9, 11, 13, etc., and even various shaped nets grid, but in most cases, more front-end siege lions prefer high (tou) efficiency (lan), and their commonly used css frameworks except Bootstrap (width 480/768/992/1200, 12 columns), There are also a bunch of lightweight css frameworks that cannot be named (after all, the grid system is only a part of Bootstrap. If you just need a responsive css, there are many options, such as 960.gis). In addition, there are Maybe your cute front-end siege lion uses flexbox to achieve responsive elastic layout, so before all the unknowns are determined, please put down your airs and ask the developers, because although I don’t want to admit it, in this case it is the front-end to guide design. Fortunately, this situation is very rare in reality, (but it does not rule out that you are taking over a secondary development project, etc.), after determining which framework they use, designers can start their own work up.
Here is an example, it is 960gis.
[960-grid-system grid layout]
After reading it, you may understand why the grid layout needs to be determined by the front end. The CSS framework of 960gis provides three solutions, 24 columns, 16 columns, and 12 columns. Designers should design on this basis. Once a grid layout is required, it means that the space for designers to play freely is reduced again, and only one of these three options can be selected. Where do these programs come from? It's very simple, you just need to ask the front end for the psd template of the framework he uses, and the reference lines in it are all built. And the front end will be very happy to help you with this. The reason is very simple. You can reduce his workload to a certain extent by designing according to the framework specifications he uses, and everyone is happy. For example, the following picture is a screenshot of the latest Bootstrap4 psd file.
【Bootstrap4】
Designers can also be self-sufficient, and generally these css framework libraries will provide download channels. Especially Bootstrap, as a mature framework, many template files can be applied. The grid layout is based on the css framework library used, so it would be better for front-end development to provide designers.
Nine, naming convention
1. Website design and basic framework structure
1.1 Container
"container" is the part that wraps all the elements in the page together. This part can also be named: "wrapper", "wrap", "page".
1.2 Header
"header" is the head area of the website page, generally speaking, it contains the website's logo and some other elements. This part can also be named: "page-header" (or pageHeader).
1.3 Navbars
"navbar" is equivalent to the horizontal navigation bar and is the most typical web page element. This part can also be named: "nav", "navigation", "nav-wrapper".
1.4 Menu
The “Menu” area contains general links and menus, this part can also be named: “subNav “, “links“, “sidebar-main”.
1.5 Main
"Main" is the main area of the site, which in the case of a blog would contain the logs. This section can also be named: "content", "main-content" (or "mainContent").
1.6 Sidebar
The “Sidebar” section can contain the secondary content of the website, such as a list of recently updated content, an introduction about the website or advertising elements, etc… This section can also be named: “subNav “, “side-panel“, “secondary-content“.
1.7 Footer
“Footer” contains some additional information about the website, this part can also be named: “copyright“.
2. Points to note:
2.1 Try to consider the role or "intent" of naming the element itself to achieve semantics.
Do not use superficial names.
Such as: red/left/big etc.
2.2 Combination naming rules:
[Element Type]-[Element Role/Content]
Such as: search button: btn-search
Login form: form-login
News list: list-news
2.3 Naming Elements Involving Interactive Behavior
Elements involving interactive behavior usually have different styles such as normal, hover, click and browsed, and the naming can refer to the following rules:
Mouseover:: hover Click: click Browsed: visited
Such as: search button: btn-search, btn-search-hover, btn-search-visited
3. Summary of commonly used names:
Header: header
Login bar: loginbar
Logo: logo
Sidebar: sidebar
Advertising banner: banner
Navigation:nav
Sub Navigation: subNav
menu: menu
Submenu: subMenu
Drop-down menu: dropMenu
toolbar: toolbar
Form: form
Column: column
Arrow: arrow
Search: search
Search button: btn-search
Scroll bar: scroll
Content: content
Tab page: tab
Article list: list
Prompt message: msg
Tips: tips
Column title: title
link:links
footer: footer
Service: service
Hot spot: hot
News: news
Download:download
Register: regsiter
status:status
button: btn
Vote: vote
Partner: partner
Copyright: copyright
Sitemap: sitemap
The above naming convention is for reference only