Web design is a systematic and huge project. I once briefly introduced the website development process in the article “Self-study web design, website development process that needs to be understood” , but this is very helpful for beginners who want to learn introductory web design. For scholars, it is far from enough.
This article comprehensively summarizes the basic knowledge of web design from the dimensions of web design workflow, website types, website components, technical principles, and design specifications. The dry goods are close to 20,000 words, and novices can get started after reading it.
1. What is web design?
Web design is also known as Web Design, website design, Website design, WUI, etc. Its essence is the graphical interface design of the website.
Although we now often use mobile APPs to obtain information, it is clear that the history of online access to websites based on personal computer platforms has been with us much longer than mobile phones: from Professor Qian Tianbai’s first email to Germany in 1987 to 2000 Sohu, Sina, and Netease were listed on NASDAQ in the United States in 1999, and now there are many websites; Chinese websites have developed rapidly for nearly 30 years.
I started going to Internet cafes to “surf the Internet” when I was in elementary school. At that time, the computer screen was very small, with a resolution of only 800×600 pixels (for comparison, the resolution of the iPhone 8 is 750x1334px), and the Internet speed was also very slow. Failed to load. The performance and experience of the website at that time were not good, but now the website design has changed greatly from the past: focusing on user experience, page dynamics, rich media and other designs, so that the website experience today is not worse than software and mobile apps. Coupled with the popularity of personal computers, websites are still one of the very important platforms in human-computer interaction.
Then, as UI designers , we must master the specifications of website design and understand the principles of website operation in order to better control this platform. Today, I will tell you about the things that the website must know.
2. Workflow
First of all, let’s take a look at the workflow of website design. In addition to the work of user research, writing product requirements documents, market documents, and doing research on competing products introduced earlier, the website project process closely related to designers can be divided into There are six stages: prototype drawing stage, visual draft stage, design specification stage, drawing cutting stage, front-end code stage, and project walkthrough stage.
Every stage requires the participation and understanding of designers. Don’t just pay attention to the visual draft stage. There are many pre- and post-work that also need our attention. Well, let’s understand them one by one.
1. Prototype drawing stage
In the prototyping stage, the designer needs to communicate with the product manager about the requirements. At this time, it should be noted that it is not the product manager who issues the requirements to the designer, but needs to communicate with each other on the aspects they are good at. Visually, the designer may have a better way to present it. At this time, it is necessary to reach an agreement with the product manager before designing.
2. Mockup stage
In the visual draft stage, we need to complete the interface design of the website according to the content and general layout determined by the prototype. When designing the website, we need some images and inspiration materials. For example, when working on the World Cup topic, in addition to collecting a lot of materials, we can also design a “mood board”.
To put it simply, the mood board is to collage some materials and materials related to the theme together, which can better guide the design theme and general feeling of our entire demand. In addition, the head of many websites usually needs the main visual to catch people’s attention. At this time, star photos, theme materials, LOGO, main visual PSD, etc. provided by the demander may be used. Mixing and collating a visually stunning headshot is our goal.
The information layout under the main visual emphasizes rationality. At this time, it is also necessary to communicate with the product manager about the size of the image retrieved from the background, the length of the title field, etc., and then complete the design of the page information part according to these requirements. In short, the design process requires us to constantly think and communicate in order to complete a relatively good visual draft.
3. Design specifications
After the visual draft is approved, many designers may not take the initiative to make design specifications. In fact, every iterative product requires designers to summarize the design specifications. Design specifications are common things on all pages, such as different font sizes, image sizes, and button styles. It is understood as a certificate of a fixed concept.
For example, if the same sharing function adopts two completely different styles, it will confuse users. Then the design specification is mainly to constrain the designers ourselves, and reduce the cost of thinking in the limited memory of users. At the same time, design specifications can also ensure that different designers of the same project can output the same style of design. Finally, the design specification is also a proof of the influence of the designer on the project, which can prove your thinking and your status in the project.
So I think designers should take the initiative to make design specifications and project summaries. How to design specifications? In fact, the design specification is to fix the elements of the main page into unified elements. Specifically, a product design specification should include: font specification, body color specification, chart specification, picture specification and other categories.
4. Cut image
Web designers usually don’t need to cut images for front-end engineers. Because front-end engineers usually need to master PS software skills. If we need to cut the picture under special circumstances, we can use the Web option in the picture cutting plug-in such as Cutterman and Zeplin to cut out the picture used by the website for the front end.
5. Front-end code
Front-end engineers will use code to reconstruct the pages we designed, turning drawings into static pages. Then connect with the back-end engineer to call the data interface, and a website will come alive. In order to facilitate the understanding of whether the website has met the data we require, the engineers will also bury points. Burying points is to insert some statistical codes into the page code, so that we can later determine which pages have high traffic and which ones do not meet expectations. After that, there will actually be test engineers involved to find out whether there are some loopholes in the compiled website.
△ Front-end engineer code compilation (tool: Notepad +)
6. Project walkthrough
After the webpage design is completed, the designer needs to conduct a project walkthrough to determine whether there is a problem with the restoration of the webpage. If you find that there is a big difference from the design draft, you need to ask the front-end engineer to make adjustments. This step is very important, because the finished product of the website is our final output. Don’t think that the design draft is very beautiful and the realized page does not need us to be responsible for it.
3. Types of websites
The classification of websites can be divided into To C-side and To B-side according to the objects. To C end is oriented to users and consumers , such as portal websites, corporate websites, product websites, e-commerce websites, game websites, special pages, video websites, mobile H5, etc., are all products oriented to users and consumers. Since it is oriented to users and consumers, the design must be attractive, and user-centered experience design should be considered.
As a category with high demand, To B end is often ignored by designers. What is a To B-side project? For example, the background of e-commerce website suppliers, Dashboard, enterprise-level OA, website statistics background, etc. These websites for merchants and professionals are To B website projects . The requirements of these projects are very different from those of To C-end websites: the most important thing about To B projects is efficiency rather than experience, because to put it bluntly, we are designing tools for users to work, and we must first ensure that operators can be efficient when designing complete the work they need to do. So let’s take a look at the different categories of websites.
1. Portal
Well-known domestic portals include Sina, Tencent, Netease, and Sohu; well-known foreign ones such as Naver, Llinternaute, etc. We can see that portals are large and all-encompassing. For example, Tencent.com has different channels for news, finance, video, sports, entertainment, fashion, automobiles, real estate, technology, games, etc.
The threshold for a portal website is very high, and a portal website must have strong strength to establish a portal website, and the number of designers required by a portal website is also astonishing. First of all, portal websites need product-oriented interface designers to iteratively maintain website cornerstones such as the homepage, secondary pages, and bottom-level pages of the iterative website. Then the designers of each channel are needed to deal with the daily needs: for example, Paris Fashion Week needs the designer in charge of the fashion channel to design the corresponding topics, and the World Cup team needs the designer in charge of the sports channel to design the corresponding topics, etc. Big things happen every day on the planet, and there is no shortage of design jobs in the portal.
In addition, the designers who connect with specific channels also need to have certain specialties: for example, designers who connect with sports channels should at least be familiar with sports such as football and basketball; designers of fashion channels should understand the design styles of various big brands; Designers who need to understand basic Buddhist knowledge and taboos, and cultural channels need to dabble in traditional culture. So basically the designers of the portal website can be divided into two types: product group and channel group.
△ Korean portal website Naver
2. Corporate website
Every enterprise needs a website to show its capabilities and introduce its products to the outside world. Now when contacting an unfamiliar company, many ordinary people will search its official website online to verify its authenticity. A website is already a standard configuration for small and medium-sized enterprises. When designing a corporate website, there are usually several modules such as website homepage, company introduction, product center, company team, online mall, and contact us. The corporate website will display many actual photos such as the company environment, team members, and corporate culture. Some information is designed.
Enterprise websites usually also pursue the so-called “high-end”, “grand” and “high-end” style, which is to meet the requirement of making consumers recognize the brand. So if we receive the design requirements of corporate websites, we might as well browse and refer to some more famous corporate websites as competing products for reference.
△ GM official website
3. Product website
From the introduction page of Apple’s iPhone to the introduction page of Mi 8, we will find a fresh product marketing model, which is the product website. The content of designing such websites is mainly the process, technology, design, characteristics, structure, and usage scenarios of the product. Such a product page hopes to give users a sense of immersion, so generally speaking, a full-screen layout is used, and then combined with some methods such as parallax scrolling to make us feel the extreme finesse of this product. Due to the rapid development of China’s Internet and product design, there will be more and more demand for product website design.
4. E-commerce website
Are e-commerce designers also web designers? Yes. If it is subdivided by platform, there is no doubt that most of the platforms where e-commerce designers are located belong to websites.
In fact, the store itself belongs to the page of the platform itself. However, in order to enhance the personality of each store, the platform has opened some page-customized decoration functions for the store, such as baby details, store layout, banner header design, etc. In this way, shops have certain rights to use pictures and some css style codes to decorate their shops within the scope specified by the platform, and e-commerce design came into being. Although dancing with shackles, there are many shops that can drive sales because of their good design. Then e-commerce designers, of course, become very important.
5. Gaming Sites
Games are a huge industry, and most of the revenue of many companies comes from the game industry. So in addition to the well-made game, the official website of the game must also be beautifully designed. Don’t forget that every player needs to visit your game’s official website to complete important operations such as downloading, recharging, and socializing.
Foreign game websites such as Blizzard Entertainment ( https://www.blizzard.com)’s official website is extremely beautifully designed, and the official website of each game is a boutique. For example, the official websites of games such as World of Warcraft and StarCraft 2 have animations with very strong visual impact on the heads. Then the elements of the website interface all have the style of the game, as if you log in to this website and you are in the game.
6. Thematic pages
Of course, whether it is an e-commerce or a portal website, designers will be required to design some special pages to increase exposure during festivals. For example, Children’s Day, Valentine’s Day, Mother’s Day, Christmas and other festivals often have promotions, special reports and other activities. The life cycle of the topic design is very short, and it is basically useless after the point where the traffic is basically passed after going online. So we couldn’t find the 618 or Double 11 special pages in previous years, because no one cares about the special pages after a certain period.
So how to catch people’s attention in such a short life cycle? Of course, you can’t use the frigid style of modernist design. Instead, you should stimulate users as much as possible on the head, and use stimulating and contrasting colors, complex three-dimensional shapes, and text with strong impact to attract users to read. After all, everyone may only watch it once, and this opportunity cannot be missed. So thematic design is the opposite of product design, and thematic design must be stimulating.
7. Video sites
The number of visits to video websites is astonishing, and the stickiness of users is higher. In addition to buying copyright, many video sites also have a lot of UGC content. To say a few more words, UGC (User Generated Content) refers to the original content generated by users. A long time ago in the web1.0 era, users mainly browsed websites in one direction. The UGC concept proposed by web2.0 means that users not only browse but also upload content. So why are video sites so popular? First of all, thanks to the development of broadband. In our country this year, clicking on a video can play it immediately, but a few years ago it took a few minutes to load enough cache.
The design of a video website is mainly to consider the application scenario: video is the main viewing area for users, so the video area must first be large enough, and the color should be mainly dark, because bright colors will interfere with users watching videos. Then the image ratio of other areas should be 16:9 video size, which is convenient for post-editing to add in the background. Designers of video websites can also be divided into product groups and operation groups to deal with the different needs of product direction and operation direction.
8. Mobile H5
You must have been swiped by H5 such as “Looking at You Through the Future” and “Taobao Creation Festival” in Moments, right? Usually we are often swiped by this fun H5. In fact, the full name of H5 is HTML5, which does not only refer to the mobile terminal, but the development language of the front-end of the web page. Due to the concept of convention, we now often refer to the marketing form of integrated video, dynamic effects, and interaction in mobile phones as H5. In fact, its essence is to use web technology to run web pages in mobile browsers or built-in browsers.
With the rapid development of technology, H5 appears to have more and more communication value and weight. The popularity of platform-level products such as WeChat and browsers on mobile phones has promoted the development of H5 that relies on portals to spread. If well designed, your project could go viral in your circle of friends.
Mobile H5 size
When designing mobile H5 projects, we generally use the iPhone 6/7/8 size: 750x1334px, which has a high number of users, as the standard, and then we need to reserve a WeChat or browser navigation area at the top. The main content area is free to design. Generally, the operation of H5 is to slide up and down. In terms of fonts, Pingfang font is used, and the font size is set to 24px or more, and the rendering method is set to sharp. English needs to use SF-UI instead. Of course, H5 can call background music, video, links and other multimedia to make the experience better. In addition to letting the front-end brothers develop, there is actually another way to generate a simple version of H5 without code, which is to generate it through H5 tools.
Currently popular H5 generation tools include: MAKA, iH5, Tuzhan, etc. If we want to generate by ourselves instead of through front-end development, then the size of our design draft needs to be set to 640x1008PX. These tools are relatively simple. After registration, upload the PSD to set the dynamic effect of each original. However, if complex motion effects and interactions are required, the cooperation of front-end engineers is still required.
9. Background website
The background website is also called Dashboard, which translates to dashboard in Chinese. The implication is that there is a whole lot of data and statistics. The background website is To B type, so the first requirement is to quickly display the data that the operator needs to master. But the data is very boring. We can use different methods such as “line chart”, “pie chart”, “curve chart” and “table” to display these cumbersome data. This way of graphically expressing data is also called data visualization.
The background website does not need particularly cute illustrations and cartoon images, the most important thing is efficiency. So if you often deal with To C requirements, you must pay attention to this when you receive To B product requirements. Because the background website needs a larger screen, it usually uses full-screen typesetting, that is, it fills the entire canvas. So what if the screen is small? The front end will use relative layout to shrink each element, and the position of typesetting will also be determined by percentage.
△ WeChat public account background
10. CRM system
CRM stands for Customer relationship management, which translates to a customer management system. CRM is a form of enterprise information management for customers. It uses Internet technology to collect, manage, and analyze customer information, and monitor the sales, service, and after-sales of the enterprise.
Common functions include employee schedule management, order management, invoice management, etc. When we design this kind of project, we must classify the information according to the logical relationship to which it belongs, and strengthen the principles of contrast, alignment, repetition, and intimacy, so that the operator feels convenient when using it.
△ Admin CRM dashboard by Divan Raj
11. SaaS
If we serve third-party companies that build CRM, ERP or OA systems for enterprises, then we may often hear the word SaaS. SaaS is (Software-as-a-Service), that is, software is a service. Other companies will come to provide SaaS service companies to customize the system, and then the service company will provide customers with integrated services from server to design. The term is mentioned here to prevent designers from misinterpreting its definition.
12. Enterprise OA
Enterprise OA, namely (Office Automation), is the office automation system. In the 1960s and 1970s, there was a revolution in using computers to change the traditional way of working. Large-scale enterprises often face problems such as large number of personnel, vast territory, and lengthy procedures for handling company affairs, so enterprise OA can solve these problems well. Through enterprise OA, you can complete tasks such as asking for leave, retiring, resigning, inquiring about company rules and regulations, asking for instructions, and reporting. This reduces a lot of window costs and staff time costs, and enhances the company’s work efficiency.
Internet companies also provide employees with communication functions other than enterprise OA, such as establishing employee BBS and message boards, etc., on which everyone can put forward suggestions and opinions on the company. Enterprise OA is generally for reasons of security and confidentiality, and many companies are more willing to develop it by themselves. Designers should also focus on the operator’s experience and efficiency when designing such projects, so that the operator can easily find the most important functions on the current page.
4. Website Components
Now that we understand the different categories of websites, let’s take a look at the parts that make up a website. A website is composed of different web pages connected by hyperlinks, and different web pages are also composed of different modules. We designed a web like a spider’s web, not a poster. Therefore, when we design a website, we should pay special attention to the website seen from the user’s point of view, instead of thinking of it as a flat work in isolation.
1. Home page
When visiting a website, the first thing we touch is the homepage of the website. The homepage alias is called Index or Default, which means index and directory. In the early stage of website development, the website is not rich media, but similar to a book: the homepage is similar to the catalog of books, and you can click on the link to enter which subpage you need to view. Up to now, the homepage of the website is still a “directory” that guides users to enter different areas. In addition to the navigation function, this directory also exposes part of the content for users to attract clicks. The exposed part must have a “More” button to guide users. Find the secondary page.
2. Secondary page
Logically, the home page is a first-level page, and the pages clicked from the home page are all second-level pages. After the second-level pages, there are levels such as third-level pages. In terms of the probability of clicking, it is natural that the higher the front, the higher the number of visits, and the deeper the page level, the less likely it is to be found by users. A general website has three levels of pages, just to prevent users from getting lost. Breadcrumbs are also added to the page for this purpose. Breadcrumb navigation is the hyperlink structure that appears on the first screen of the page, such as Home>Sports>NBA Channel, which is convenient for users to understand where they are, and click to return to other pages.
3. Bottom page
The bottom page is the last page in the website structure that provides user-substantial information. For example, after we click on the title we are interested in on the home page or second-level page of the portal website, we will see all the information on the bottom-level page. After reading the information on the bottom page, the user can search for relevant content that the user may be interested in on the left or right sidebar; on the bottom side, users can see comments from netizens; on the bottom side, there will also be share buttons, like functions, etc. ; If the user conversion rate in the sidebar is relatively poor, the function of recommending relevant information can appear again at the bottom. In short, after users finish reading their favorite news, continue to attract users to read other news or return to the channel.
4. Advertising
How do portal websites make money? Advertising is one of the monetization methods. Website advertisements are generally in the charge of designers responsible for operational requirements, but may also be completed by channel designers and product side designers. The most common form of advertising graphics on websites is banners. The banner is generally huge in size and is very conspicuous in the website. Therefore, it is not necessarily an external advertisement, but also internal activities, recommended information, etc.
So is the size of the banner image fixed? The answer is no. Banner has two widths, one is full screen (1920px), and the other is full size based on a safe distance (1200px or 1000px). Attention should be paid to the height: generally the user screen is based on 1920x1080px, and the browser itself is equidistant from the plug-in and the bottom toolbar, leaving a screen height of about 900px for the website, so the banner cannot be made very high, otherwise the first One screen of information will not be enough. You might say, let the user pull down. But among the visitors to the website, the second screen touches far fewer users than the first screen. That is to say, many users may jump away or close the website after clicking on it, so the information on the first screen is really important, and it can be said that every inch of land is precious.
So our banner should not occupy too large an area. For example, the Banner area of Zcool.com is 1380x350px. So in addition to the huge banner advertising space on the homepage, what other forms of advertising does the website have?
couplet advertisement
In the portal website, we often see an advertisement like “Couple” that scrolls with the screen outside the left and right safe areas of the website. Usually, the banner is also an advertisement content, and a pop-up made by HTML5 technology or Flash technology will pop up in the center. pop-up advertisements. This kind of advertisement is generally sold in combination, which means that once you enter the website, you will be bombarded in an all-round way, and you cannot fail to notice the existence of this advertisement. This kind of advertisement clicks to enter, and there are also matching special pages, etc. It can be seen that there are many places that need the cooperation of designers.
Information flow advertisement
Information flow advertising is a form of advertising buried in the information flow. This form utilizes the gestalt principle that users will automatically read the content of the advertisement because it is in the same form as other information. For example, Moments, Zhihu, and Facebook all use information flow advertisements. The effect of information flow advertisements is very strong, but it will sacrifice a certain user experience. In-feed ads are the same size as in-feed.
The above briefly introduces three common forms of website advertisements from the form of advertisements. If we see words such as cpm and pv when reading the requirements, what do they mean? They are a fee model for advertising. cpm refers to charging according to the pv of the advertisement, cps refers to charging according to user consumption, cpa refers to charging according to the number of user registrations, and cpc refers to paying according to user clicks. For different charging models, different strategies will be adopted in the design to enhance the purpose of advertising.
5. Footer
In the specific page design of the website, there will be an area at the bottom that we call the footer. Generally, the color of the footer will be darker than the content area above, because the information of the footer is secondary on the logical level. The main functions of the footer area are information such as copyright statement, contact information, friendship link, record number and so on. Be sure to degrade when designing, and don’t make the footer particularly obvious.
5. Technical principles
Web designers must understand the technical principles behind web pages before doing projects. Technology determines which designs and interactions are achievable and which are not. At the same time, the technical principles also determine how we need to cooperate with front-end engineers to complete some complex interactions. In fact, in the past, web front-end engineers and designers were the same job, called web page artist. This job needs to make the page into a static web page and hand it over to the following link after completing the visual design. As the division of labor becomes more and more detailed, two types of work, web designers and front-end engineers, have emerged. But web designers can’t design without technical limitations. Let us understand the basic storage principle of the website:
Save a picture called logo.jpg in the C disk of your computer, and then open this URL in the browser: C:\logo.jpg What do you see? Yes, this is the picture. This is the principle of the website: the resources and files of the website are stored in something similar to our computer, that is, the server. We use the domain name to call different pages and files in the network. If the server is shut down, the website will also be paralyzed. Every time we visit a website through a browser and hit a URL, the domain name will turn to an IP address, which is the house number where the server is located. After finding it, our browser will download the code of the website from the server and translate the code into an interface that we can understand, such as text, borders, tables, etc. are actually in the form of code. The browser will also download the pictures, videos, etc. required by the website separately into the cache. When we enter the user name and password through the form, our information will be uploaded to the server, and the server will process it (such as the information of successful login) and then send it to our browser.
So when we usually visit a website, our computer and browser have to perform multiple “handshakes” with the server through the Internet. Of course, the old “handshake” will slow down the loading speed, so our smart browser will cache the downloaded resources to avoid waste. This mechanism is “cookies”: the browser will automatically store the URLs, website pictures, videos, form information, etc. you have visited.
1. Mouse-based interaction
In the near future, personal computers may interact with us through multi-touch, voice interaction, etc., but currently the most mainstream interaction methods for website design are mouse and keyboard. Let us see what structure the mouse has! We use the mouse in four ways: movement, left button, right button, and drag and drop. Most of our operations on the page are completed by clicking the left mouse button, so the web page is also the art of clicking. Right-clicking generally invokes the right-click menu, but many websites and web applications also use the right-click to customize and design some operations and interactions. It is mainly hyperlinks and buttons that interact with the mouse. So let’s take a look at the four states of hyperlinks (the front-end term is: four pseudo-classes of CSS for hyperlink tags).
link
Link refers to the state when the hyperlink is normal. General hyperlinks need to be distinguished from ordinary text, such as changing a color or underlining. Of course, another function of the underline is to facilitate the visually impaired people to distinguish hyperlinks from ordinary text. Links are all blue by default (color value: #72ACE3), but in order to enhance the branding of the website, we can also change the link color to another color. In short, it must be different from ordinary text in form.
Visited
Visited is the state after the hyperlink is clicked. For example, there are a lot of news on Sina.com, so after clicking on a news, users may not know whether they have read the news or not. Therefore, Sina.com uses the Visited attribute, and the color of the news after clicking is different, which is convenient for users to distinguish which news they have not browsed.
Hover
Hover is the hyperlink mouseover state. This state is the most important state in the connection. In fact, not only hyperlinks, but all interactive elements such as buttons, pictures, and videos should set the Hover property, which is the state when the mouse hovers. Generally speaking, changing color and zooming in are the basic methods of Hover state.
active
Active refers to the activation state of the hyperlink. Hyperlinks can load a state via CSS when clicked.
The same link styles can also be applied to images, buttons, and forms. Clicking, mouse hovering, and mouse pressing can all be designed in different styles, so that users can feel that the object is pressed by me through the mouse. This kind of hint to the user is also called “click feeling”. Of course, the button will be slightly different from the link. In addition to the normal state and the mouse hovering state, the button also has a state called non-clickable. In this state, the button is grayed out, prompting the user that this function cannot be clicked because the condition is not met. Alright, can you give some examples of clicky web design?
2. Static web pages
After understanding the basic technical background and mouse interaction, let’s talk about the real thing. The web pages we generally see are static web pages. Static web pages are compiled by HTML, and the web page codes we store on the server are basically in HTML format. The full name of HTML is HyperText Markup Language, that is, Hypertext Markup Language. “Hypertext” means that this language can contain text elements and call pictures, links, music and other non-text elements. The HTML language may be a headache for people without programming, but it is already the simplest of all programming codes. Don’t be nervous, you can think of it as Moore code, which is a secret language between the server and the browser, and the browser will translate these secret words into colors and links that we can understand. So what would it look like if we wrote a piece of text in HTML?
That’s right, the code is compiled bit by bit. Right-click on any blank space of the website to view the source code of the webpage and you can see the HTML code of the webpage. The HTML code is published and maintained by an international organization – W3C. Founded in 1994, W3C is an international neutral technical standards organization for websites.
W3C has released many versions of HTML, the most far-reaching of which is the HTML4 version. HTML5, referred to as H5, can be said to be an epoch-making version. The H5 tag is more modern and can play video itself, which can eliminate the Flash plug-in. (The Flash plug-in brings problems such as system vulnerabilities and slow loading speed, etc.) At the same time, H5 supports multiple platforms very well, so it adapts to the current era where mobile terminals are king. H5 can even be turned into games, Webapps (websites that work like local programs on web pages, such as Blue Lake, etc.), multimedia and other forms.
However, because browsers such as IE browsers that do not support HTML5 effects still account for a high proportion of users, this restricts the development of HTML5. The browser can be understood as a code reader, and because it does not translate HTML5 code well, it will cause so-called “compatibility” problems. For example, in HTML5, you can add a projection to a DIV through code, so this effect cannot be displayed in some browsers.
It’s not difficult to understand why some programmers wear T-shirts with the words i hate IE. Every time a website project is completed, the test engineer will use Chrome, Safari, Firefox, Opera, IE, Edge and other browsers to test the compatibility of the website, which usually makes the front-end engineer very headache. Because the code moves the whole body, often one is good and the other is not. However, there are some solutions to this problem, such as reducing support for browsers with a small proportion of users, loading specific adaptation codes for difficult browsers, and so on. The Tao is one foot tall, and the devil is one foot tall.
3. Other front-end languages
With the skeleton of HTML, plus pictures and multimedia, the development speed of the website will be faster. However, the loss of the server is very high: all users need to repeatedly come to the server to download resources such as codes and pictures for “handshaking”, and many HTML codes are repeated, resulting in a waste of resources. For example, if the headers of my website are all yellow and the links are all blue, then every page will repeat these few lines of code. It didn’t take long for this problem to be solved by a brand new code: CSS technology.
CSS is the meaning of cascading style sheets: we can understand that the style of the website (color, size, position and other style information) is now completely separated from the content of the website (text, pictures, links and other content information), that is, HTML, And a website can download a CSS and then call the CSS cache for different pages, which saves server resources.
In addition, because the website needs some interactive effects, such as click effects and menu effects, etc., front-end engineers need to use Java script codes to cooperate. Javascript is a relatively short and concise language, and it is very convenient to build some browser-based special effects. So the current mainstream website configuration is a combination of HTML5+CSS3+JS code, of course, in order to be compatible with those low-end browsers, you may also use the HTML4+CSS+JS package. It depends on what browsers our main target audience is using.
Of course, I am not asking you to learn HTML, CSS, and JS codes and then do front-end development, because there are already professional front-end engineers in modern Internet companies. We understand these mainly to understand the work of front-end engineers in order to better cooperate with them.
4. Dynamic web pages
It’s not enough to understand static web pages, now let’s talk about how the website moves. A dynamic web page does not mean that it has crazy and cool animations, but that a dynamic web page will generate a dynamic web page with time, content, and database calls.
For example, the news website seen today is definitely different from yesterday’s news, but the HTML code on the homepage of the website does not need to be manually modified, but just let the editor input news and upload pictures through the background. The process of Xiaobian uploading the background will be input into the database, and the dynamic web page is a form of calling the database content and displaying it to the user. The dynamic web page will call the information in the database to the user at any time, and it seems to the user that the static web page and the dynamic web page look the same.
Then the most foolish way to judge is to look at the end of the URL. The end of the static web page is html or htm, while the end of the dynamic web page is Asp, Php, Jsp, etc. due to the use of advanced web programming technology. Asp, Php, Jsp, Aspx, and Cgi are all languages for dynamic web pages. Of course, sometimes pseudo-static structures are used to improve website efficiency. The ending is consistent with static web pages, but in fact they will be adjusted before users visit Fetch the database again.
At the same time, the URL of the dynamic web page will have a feature, including? symbol. Php is the most popular dynamic language at present, Asp and Cgi are earlier but rarer now, and Jsp is the safest, so many banks use JSP compilation. After understanding these, we basically figure out how the website works.
5. Sprite
We often see animations on websites, so the principles of animation implementation are generally as follows: First, HTML5 video playback; the disadvantage of this method is that it is not compatible with low-end browsers. Second, the Flash Player player plays; the disadvantage of this method is that the Flash security is very low and the efficiency is slow. Third, the animation uses the Gif format; the problem with this method is that the animation length is not enough, and this format only supports two-level attributes of transparency and opacity.
So how is the animation like the Google homepage Doodle realized? This technique is called: Sprite map. CSS Sprite is CSS Sprite, also called CSS sprite, it is a CSS image merging technology. The picture it calls is in the PNG format that supports multi-level transparency, and then the animations are arranged side by side. For example, the width of each frame of a cartoon character animation is 100px, then its action 1, action 2, action 3, and action 4 are arranged side by side in a PNG image with a width of 400px. Then the code calls this png on the background image in a 100px width frame, we see action 1, and then the code will quietly move 100px after a second, and we see action 2. Due to the fast speed, we saw continuous animation. Sprite maps also have their own disadvantages: if there are too many frames, it will consume a lot of memory. So the number of frames must be kept low. If your action is designed with 12 frames, then I suggest you try to delete 2, 4, 6, 8, and 10, and keep half of the actions.
6. Parallax scrolling
Parallax scrolling is a design effect with different rates of movement to achieve a sense of space. For example, the official website of the Milwaukee Police Department makes extensive use of parallax scrolling effects. The principle of implementation is that the code determines that the webpage is scrolling, and the movement speed and displacement distance of the three layers of pictures in the page are different when scrolling. This creates a visual experience that resembles the sense of space we see in physical reality. Parallax scrolling is no longer a high-tech. If your website is more suitable for parallax scrolling, please boldly design and ask the front-end engineer. I believe the front-end engineer can meet your requirements. All we need to prepare is a layered static PSD file with different motion rates.
6. Web Design Specifications
Finally, after a long discussion on the principles and components of the website, we are going to talk about the norms of website design. Website design does not have a specific platform-specific style, and there is no system-level navigation bar and toolbar that must be designed. So the website design is more flexible, but because it is too flexible, our designers will not know how to start. Then I will introduce the specifications of website design, which can be referred to when you are working. Note that we must communicate the size, font, interaction, etc. we use with the front end before designing, so that there will be no misunderstanding later.
1. Artboard size
Because the size of the webpage is related to the user’s screen, and it is difficult to count the types of the user’s screen. Therefore, our design draft can only mainly take into account the resolution of mainstream users, and other resolutions are solved by adaptation. In the latest version of Photoshop website Web preset sizes give us some inspiration: common size (1366x768px), large web page (1920x1080px), smallest size (1024x768px), Macbook Pro13 (2560x1600px), MacBook Pro15 (2880x1800px), iMac 27 (2560x1440px) Wait.
These are the mainstream sizes, and we recommend designing according to the mainstream resolution of 1920x1080px when making a website. So when we usually design a website, the width of the website is 1920px, and the height of each screen is about 900px. Why 900px? Because 1080 also subtracts the height of the browser’s head and bottom, which is about 900px. The content safe area is 1200px (or 1000px/1400px). With this size to design relatively standard. Of course, you need to inform the front-end design size before designing the webpage, because they have more say in the way of adaptation and follow-up cooperation.
2. Text specification
We all now know that the text on the website is rewritten in the code by front-end engineers. The rendering of this kind of text on the browser is related to the system and browser. For example, the text effect seen on an Apple computer is different from the text effect seen on a Windows system computer: Apple will render the text, while the Windows text is almost full of pixel particles. According to the proportion of users, there is no doubt that Windows users are the mainstream, so although we may use Apple computers to design web pages, the effect of the designed web pages should also be consistent with the Windows display. Otherwise, after we design a beautiful design draft, the programmer cannot restore it to what we designed.
In addition, the font size is also very important. The display area of the webpage determines that the text cannot be too large. In website design, our text size is generally 12-20 pixels. Why can’t it be smaller than 12px? Because if the Chinese characters are smaller than 12 pixels, complex strokes cannot fit. Moreover, the expression and adaptation of odd-numbered characters are not easy to do, which means that we must use even-numbered font sizes for design. So to summarize: the text uses Arial, the size is 12px, and the rendering method is None. The slightly larger font uses Microsoft Yahei, the size is 14-20px, and the rendering method is Windows Lcd or Sharp. In addition, the Arial font should be used for English and numbers, and the rendering method should be None.
3. Image specifications
Pictures in website design are commonly used in ratios of 4 (width): 3 (height), 16 (width): 9 (height), and 1:1. There is no fixed requirement for the specific image size, but integers and even numbers are preferred. Mainly because of some adaptation issues. Images that appear as content must have introduction information and sorting information. There are many image formats, such as the png format that supports multi-level transparency, the jpg format that supports small image files, and the gif format that supports transparency/opacity and animation. In the case of ensuring image clarity, the smaller the file size, the better. How to make the images used in web pages smaller?
In the first method , we can appropriately reduce the size of the image file when cutting the image for the programmer. For example, the format used for saving in Photoshop for the web will be smaller than the quick save file.
The second method , you can try to use tools such as Tinypng, Zhitu and other tools to compress the picture again. These tools remove redundant information from the image and compress it without loss of image quality.
The third method , Google has developed a Webp format, its image compression size is only about 2/3 of JPEG, which can save a lot of server bandwidth resources. For example, Facebook, Ebay, and the Zcool image storage commonly used by our designers all use the Webp image format.
The fourth method is that the browser and the server need to download the picture resources called by the webpage when shaking hands. If a website has one hundred pictures, the browser and the server have to shake hands one hundred times. First, it will consume server resources, and second, the access speed will be slower. Therefore, front-end engineers have a way to combine the pictures used in the web page into a large png. Then each element that calls the picture calls this picture and then shifts it a little bit, and the displayed area moves to the required image in a large picture.
4. Button
The style of buttons has undergone great changes in the past ten years, from the “bevel and emboss” style at the beginning to the “skeuomorphic style” later, and now the flat style is more popular. If the button is in a picture, in order not to affect the aesthetics of the picture, the padding will be removed and only the border will be kept. This design method is called a ghost button. Note that when designing the button, remember to design the mouse hovering and pressing states of the button at the same time.
5. Form
In website design, we often need to use some input boxes, drop-down menus, pop-up windows, radio buttons, check boxes, editors, etc. These are system-level controls, which generally call system design directly. However, the system design sometimes fails to meet our requirements: the height of the built-in form in the system is not high enough, making it uncomfortable to click; it does not conform to the brand sense of the overall design of the website, etc. Then we can add styles to these forms through CSS, including color, size, inner and outer margins, etc. So we can also customize the design when we meet the requirements related to the form.
6. Grid
We define the overall width as W. The entire width is then divided into multiple equal division units A. Each cell A has element a and spacing i. So the relationship between them is (A×n)-i=W. Of course, the size of each application can not only be divided into a grid, it depends on the density of our content layout. Afterwards, we add the grid with too much content to another grid to get a larger typesetting space; other elements must stay in their own grid honestly, thus completing a design with a very scientific layout . for example:
The grid system specifically has the following advantages: It can greatly improve the standardization of web pages. Under the grid system, the dimensions of all components on the page are regular. In addition, designing based on a grid can make the layout of each page of the entire website consistent. This can increase the similarity of the pages and improve the user experience.
7. Adapt to Retina screen
In 2012, Apple released the Retina Macbook Pro, and the proportion of computers with Retina screens is getting higher and higher. A Retina screen is simply a screen that is twice as dense as a traditional screen and has greater clarity. It can even meet the highest degree of recognition of our retina, so it is also called retina screen.
The website we designed with a safe distance of about 1000 pixels under this screen is very rough. So if we now display a 400X300PX area under the Retina screen, we actually need to provide a 800X600PX cut image to the front end, because a point on the Retina screen tops the past two pixels. Then our users are users with more retinal screens, such as designers, how can we take care of high-definition screens and ordinary screens?
First of all, we need to complete the design draft at the size of the retina screen, which is recommended to be twice the size of the traditional design draft. Then cut out two sets of cutouts (non-Retina screen users will be slow to load double-sized resources). The common cutout is named as logo.jpg, and the Retina cutout is named logo@2x.jpg. The front end is identified by code, if the screen is Retina, it will load the double size, if not, it will load the normal size. The front end can use Retina.js ( https://retinajs.com/) to identify the technology provided.
8. Adaptive and Responsive Websites
We have seen that some websites have a very good experience when browsing on computers, mobile phones, or even iPads. This requires us to carry out adaptive or responsive layout of the website for user experience. The principles of responsiveness and adaptiveness are similar. They both detect the width of the device screen through code, and load different css according to different devices.
Responsive website
The design draft of the adaptive website is consistent, but the design draft needs to consider the way the screen changes when it gets smaller. For example, the content of a website has 5 blocks and 4 spacing, so how to change when the width is reduced to 900, this is the adaptive layout. For example, websites such as Zcool.com and Dribbble have adopted adaptive layouts.
responsive website
Responsive websites need to design different versions of the design draft, and then provide different CSS styles according to different devices. For example, if the width of your device is determined to be 750px, then the website will know that you are using a mobile phone to visit, and will import a style unique to your mobile phone; if it is the width of a computer, it will import the CSS style of your computer. For designers, self-adaptation needs to consider the divisibility and typesetting of websites under different device widths; responsive design requires at least three sets of design drafts for computers, tablets, and mobile phones (but the contents of the three sets of design drafts are the same) . In short, adaptive and responsive are both efforts made by the website to adapt to the browsing device for the user experience.
Adapted specification
Mobile phone: When adapting mobile phone pages, we generally use the iPhone as the canvas standard. The reason is that the relative display of the iPhone is clearer and has higher requirements. And the number of users is also very high. When adapting, we generally focus on the size of 750x1334px, and then change the website navigation to the form of hamburger + drawer navigation that is often used in mobile apps. At the same time, the buttons on the website also need to become the buttons on the left and right that we see in the mobile APP, and each button should be larger than 88px, which is convenient for fingers to click. In terms of fonts, we need to change all the fonts of the website to Pingfang fonts, and set the font size to 24px or more, and set the rendering method to sharp. English needs to use SF-UI instead. That is to change the website into an APP-like mobile webpage, so as to ensure a good experience for mobile phone users. If the user uses an Android phone, the front-end code will appropriately increase the image and spacing based on the design draft to adapt to the Android screen.
iPad: The size of the iPad is 1024×768, 2048x1536px, etc. No matter how it changes, it is basically similar to the size of the computer screen. So browsing the web on the iPad is basically comfortable. Therefore, many websites are not specially adapted for iPad. If we want iPad users to use it more comfortably, we can choose from text size (above 24PX), button size (about 88PX and above), interactive form (drawer navigation, navigation does not follow Screen scrolling) and other methods to get started.
Summarize
Regardless of whether the project you are facing is a To C or To B website product, we should first establish the design style > search for design materials > create a mood board > complete the visual draft > mark cut images > establish visual specifications > conduct project walkthroughs.
If you design a general website page, you can design it according to the size of 1920 X 1080px. The height of each screen is 900px, and the font uses Arial 12px, Wu and Microsoft Yahei 14-20, and Windows LCD. The banner should fill the screen as much as possible, but the picture needs to be designed according to the ratio of 4:3 or 16:9. When making a website, you can create a grid for better adaptive and responsive layout. We also need to design different corresponding mouse states for hyperlinks and buttons; in addition, we can also try to add parallax scrolling and Sprite to the website design. Figure animation and other fun interactions.
If you design the page on the mobile phone, you can design it according to the size of 750X1334PX. The font should be above 24px and sharp. English fonts use SF UI. Buttons and click areas need to be larger than 88px to facilitate finger clicks. And the header needs to reserve the navigation area of WeChat or browser.
