Web design website-how to design a website

Describe the general steps of web design. 1. Website structure design.

Website structure design includes website column design and website module design, which is a logical expression to determine the service provided by the website and also a hierarchical relationship between pages.

1. The website column can play the role of outlining the amount.

2. The website column has the function of clear navigation.

3. Website modules should be orderly, clear and closely integrated.

Second, the website theme design

Website theme design is actually the design of website visual presentation style. The theme style of the website should fully attract users' attention and provide users with a pleasant visit experience.

1. Design a logo that can reflect the content of the website and put the logo in an eye-catching position on the website.

2. The color of the website should be unified, highlighting the theme color of the website.

3. The same type of images should have the same effect.

4. The website should have a clear slogan.

Third, the type of website layout

1. Chinese font layout

This layout type is divided into upper column, left column, middle content area, right column and bottom footer area, and its shape is similar to a Chinese character. Chinese font structure is a commonly used web page layout structure at present, which is suitable for websites with various information classifications and needs good organization.

2.t-shaped layout

This layout type consists of an upper column, a left column, a content area and a lower column, and its shape is a bit like the word "T" written in English letters. At present, T-shaped websites appear more in the corporate websites of some authoritative organizations, enterprises and institutions.

3. Left and right frame layout

This kind of website is mainly composed of left column and content area, which is relatively simple and mainly used to present wonderful content, and is the first choice for many personal websites and blogs.

4. Layout of upper and lower frames

This kind of website consists of two columns, the upper column is used to place information such as logo and links, and the lower column is used to place web content. Up and down websites are often used for personalized display, and also for enterprise display of enterprise portals.

5. Title text layout

The layout structure of this kind of website consists of an upper column and a content area. The upper column is used to display the title of the article. It is mainly used to display the title of the article, and the content area is used to place the content of the article. This layout is often used in the design of some papers and academic websites.

Website design does not use one of the layout structures listed above alone, but achieves the desired effect by mixing various layout structures, which is often called "comprehensive layout".

Fourth, website page design.

The website page is the final expression of the website. The website page is determined by the quality of the page content and the beauty of the page. The principles to be followed in page design are as follows:

1. conforms to the industry attributes and enterprise characteristics of the enterprise. Customers can intuitively feel the ideas and characteristics conveyed by the enterprise when they open the website.

2. Meet users' browsing habits. According to the importance of website content, users can find the information they need in the shortest time.

3. Meet the user's usage habits. Put the functions that users often use in the eye-catching position of the website.

4. Graphic matching.

5. It is beneficial to search engine optimization. Reduce pictures and animations, and use more text descriptions to make it easier for search engines to include and make it easier for customers to find you. Grid solution.

How to design a website directory method 1: Three basic rules 1, rules 1: Listen to your customers. 2. Rule 2: Know what your users are looking for and design accordingly. Rule 3: Listen to yourself. Method 2: Policy 1. Good user interface design. 2. Establish a consistent style. 3. Maximize readability. 4. Make your website universally readable. 5. Test your website. 6. Publish your website. Designing an excellent website may seem like a huge challenge, but as long as you follow the basic elements of design, you will find the process interesting and enjoyable. It's not just nice! We will explain the basic elements of design and some general guidelines to help you design a user-friendly website.

Method 1:3 basic rules

1, Rule 1: Listen to your customers. You can design "the best website in the history of the world", rich black fine fonts and bold art websites, as if calling "Come and visit me now!" . Unfortunately, what your customers want is a big pink and orange menu bar. You are fired, the best website you have ever had, and you will never have a chance to face users again. Customers will put them on backup hard drives. Study the corporate image of customers. Some customers will tell you some websites that they like very much. This will not only encourage you to cater to their ideas, but also give you some unexpected design inspiration.

If you think orange and pink websites are joking, imagine how this coolest website promotes their products:

2. Rule 2: Know what your users are looking for and design accordingly. People build their own websites because they want others to see them. This website may be used to provide information, for commercial purposes, or to provide entertainment for a specific audience. As a designer, you need to know who to design the website for and let them stay on it after opening your website. You may think, "If the website looks beautiful, users will stay." In fact, this is not necessarily the case. Let's take a look at the real estate example. This is a simple and interesting website. It has many open blank spaces, bold colors and powerful modern widescreen format, and hyperlinks are also highlighted:

Now think about the effect of selling real estate in this way in the same place: messy pages, fancy colors and a lot of advertisements.

Think about which website can better find a house for people? Yes, that's the one who listed "home" for people to browse! When people are searching for "real estate for sale in Santa Monica", they don't care about the aesthetics of the website. They don't want to know about real estate agents or see beautiful pictures of the city. They want to see real estate.

Rule 3: Listen to yourself. You know what customers like and what the market needs. Now it is time to pay attention to yourself, the designer of the website! Create a template in the drawing software for you to choose from. Create page elements on different layers (this can be modified later without destroying the entire template). These factors may include: header. It will be used on every page of the website. The page title includes the name and logo of the website and links to other subordinate pages (such as "About", "Contact", etc.). ). Whether visually or practically, page titles will integrate all parts of the website. It is also a good practice to set the first button on the menu bar to return to the home page.

Let's take a look at Apple's website, as follows:

Like most Apple products, their homepage is very clean and tidy. Pay attention to the menu bar across the top of the page, each button has a title that matches the content, and there is a search box. If your website also supports it, you can visit all the required pages in a friendly way. Now, let's look at the page corresponding to the iPad button, which has several page elements:

The change in the menu bar only darkens the iPad buttons.

The theme of the page is displayed in large black font in the upper left corner.

A new submenu bar will appear so that users can learn more about the product. If you click on those submenus, you will see that each page will provide new theme-related content, but it is unified in layout and design style.

Maybe on your website, there will be cases where the main title of the menu bar contains multiple sub-titles. You can consider replacing the secondary menu bar with a pop-up menu, such as the following Friends of Musicians website:

Sidebar is a common design on websites, but not all websites need it. Remember-content is king. But it is also a very important element, which needs careful design to ensure intuition and avoid unnecessary confusion. Unlike the menu bar, the content of the sidebar can be dynamic. Consider the following two sidebars, which come from Trulia, a real estate marketing website, and are aimed at buyers first:

The second one is for the tenant. Note that their information is very similar, but their concerns are completely different, and they are all displayed in the same position in the sidebar:

Page body. This is the main part of the website and the biggest change in your design. If you are designing an e-commerce website, there may be a product display on one page with twenty products for sale. Your job is to integrate these two parts so that they don't appear messy. You can use similar colors, fonts and interface elements to blend them together.

Footer. Not every website has or needs this part. It is often used to sort out miscellaneous things, or to focus on the unfocused parts of the website. The following is an example of Groupon website:

Method 2: Strategy

1, practice user interface design. Locate various elements of the website, such as title, sidebar, logo, graphics and text, and put them in the same position on each page, which will make your website intuitive and navigable. Keep the same header at the top of each page. No matter whether there are many repetitive elements in your website content itself, you must ensure that every page has a uniform header.

Keep the logic of the design. You should ensure that the elements on the page are logically arranged according to importance or topic; All pages of the website should do the same.

2. Establish a consistent style. Unified layout can bring structural consistency to the website, and unified style brings harmony to the theme. Stick to two or three main colors and make sure they are in harmony.

Avoid using too many font styles or sizes. If you plan to use several different settings alternately, make sure to use them in the same way on every page.

Using Cascading Style Sheets (CSS) to manage uniform styles also makes it easier to modify the elements of the whole website without going to every page.

3. Maximize readability. In order to make words easier to read, we need to break them down into smaller parts. Use subheadings and appropriate spacing to separate the parts.

Using bold or fonts of different sizes can show the hierarchy and importance of the theme.

Pay attention to word processing. Don't make the font too small, increase the line spacing, and make large paragraphs more readable. Large paragraphs are more difficult to read, so it's better to break them down into small paragraphs.

4. Make your website universally readable. Use standard HTML and avoid using tags, functions and plug-ins that are only applicable to a certain brand or browser version. Although most modern browsers and computers can handle complex images, if the images can be kept small and optimized for the network, the access to these web pages will be accelerated. There should be a balance between quality and speed.

5. Test your website. Ensure that all parts are running normally and the images are displayed correctly. You can also do some usability tests: ask some target audience members to test the clarity and ease of use of the website and give feedback to the website.

6. Publish your website. If not, you need to buy a domain name first. Check the links regularly to make sure they still exist, and browse the suggestions sent by website visitors through email.

Tips don't bombard the audience with gorgeous graphics. Flash animation, bright colors, patterned backgrounds and music that automatically plays every time a page loads were an interesting experience in the 1990s, but they will drive away today's Internet users. Stick to a simple background that contrasts with the color of the text to maximize readability.

In order to adapt to tourists with hearing and visual impairment, you can add subtitles to the video, transcribe the audio and explain the accessibility. Although tables are an effective way to organize information, visually impaired visitors may not be able to hear the contents in the tables orderly when they use screen reading programs.

You may have your own design experience, or some favorite designs that have been applied on other websites. You can design the layout according to them, but it may be easier to buy a ready-made template.

In order to avoid wasting tourists' printing ink, you need to use a separate style sheet to format your website when printing. Turn off the background picture when setting printing parameters.

Use black text on a white background.

Delete the menu bar and any unnecessary pictures.

You can always use CSS to keep proper paragraph spacing.

Warning to avoid plagiarism and abide by all copyright laws. Do not add pictures without network or unauthorized structural elements. Anything added to the website must abide by laws and ethics.

40 excellent cases of web design It is not difficult to design our page, but it is not easy to design a perfect version. Usually it depends on your starting point, whether it is personalized design or brand operation. Do you want to provide your own contact information or get the contact information of users? The following excellent cases will tell you how to design our page.

1, friendly interface

A friendly contact interface always makes people feel kind. If it has some functions and is easy to read, users will feel more comfortable. "Whatcanwehelpyouwith" can guide users to click "Join us" and "Hire us" to participate in email subscription.

2. Show offices around the world

On the "About Us" page of Tool, the designer marked the addresses and contact information of the team's offices in Los Angeles, new york and France in bold fonts. Isn't that what users who click on our page want to know? Correct contact information, simple and direct design, that's how it is done.

3. Simplify the communication process

The contact page of ProductiongLocation also adopts bold and visual page design, but different from other similar pages, it simplifies the communication process, divides the content that users may pay attention to and the specific parts that need to communicate, and allows users with different needs to be directly guided to specific pages and parts, thus achieving the purpose of simplification and diversion.

4. Avatar and Personalized Information

Put photos of designers and team members to let users know about you. The most important thing is not whether your avatar is beautiful enough, but to let users know that there is a real and ordinary designer like you and me behind this beautiful website, which is the result of his or her efforts. Avatar can make the page more personalized, and it can also make it more real and close.

5. Encourage users to communicate.

The core design purpose of our page is usually communication. HelloInnovation's page design fully implements this concept: trying to encourage users to actively communicate with the website. With friendly design, leave contact information, from copywriting to leaving email, and encourage users. How hard can it be to talk?

6. Use pictures to convey metaphors

There are many collections related to design in the Design Museum, and this mobile phone on our page is not only the collection of the website, but also an important metaphor to convey the image of "communication" to users, which can be regarded as a kind of "pun" in design.

7. Create unforgettable designs

Weird designs and interesting copywriting are always unforgettable, and the massive information intake every day makes people remember only the most prominent ones. However, the eccentric design may not be suitable for any brand or website, but for those quaint websites, those unique brain holes always play a role.

8, the performance of brand personality

It is natural and reasonable for a website to present its own brand personality on the About Us page. BooneSelections is an elegant and professional way to integrate brand color matching and related design elements into the About Us page. As a professional wine import company, BooneSelections' About Us page adopts unique typesetting and scrolling page design, creating a unique brand atmosphere.

9. Show contact information

ThisAlso is reliable and in place about our page design, even if the page map shows the location of the company. Scroll down the page, you can also see the detailed address description, subway ride along the line, mailing address, telephone number and so on.

10, give a hint.

The "About Us" page of DeuxHuitHuit website does not provide traditional communication methods, but is designed as an intuitive and simple dialog box. The "Sayhello" dialog box at the top directly reminds the user that as long as the content is entered, the website developer can see it.

1 1, indicating the opening/working time.

For institutions with specific business hours in official website, such as restaurants, museums, shops, etc. In the "About Us" page, the opening time of the store and the time of telephone consultation are marked, which can make users receive services more effectively.

12, using bold fonts.

Panache has adopted a very striking "TravaillonsEnsemble" in the title font of our page, which is lighter and more unique, but it is highly recognizable.

13, using bold color scheme.

Sponge's "About Us" page uses a classic black and white yellow color scheme. This contrasting color scheme combined with detailed description makes the whole page look sharp and rich in texture. Designers use bright colors on the most critical information to make it easier for users to notice them.

14, the use of visual illustrations

Illustrations can always attract users' attention in a more visual way, especially when illustrations are stylized and personalized enough. On LegworkStudio's "About Us" page, wolf head illustrations are added, combined with handwritten fonts, to create a personalized atmosphere.

15, using simple graphics

GiampieroBodini's "About Us" page does not use complicated design skills, but puts a simple rectangle on a complicated sketch background, in which contact information and related information are put. Complex and simple, hand-drawn and graphic, formed a sharp contrast.

16, communicate with the form

Communication is mutual. You can send a message to the website or leave your contact information so that the website operator can send you a message. QEDGroup left a form directly on the contact us page, through which you can leave your contact information.

17, with monochrome color matching.

Concise, elegant and easy to read is the design style of the contact page of JosephAAvoue website. There is no gorgeous design, no fancy function, a slender ring with the most basic contact information in the middle, which is so direct.

18, humor

Humorous designers will never miss a funny opportunity, and Bio-Bak designers will even grandstanding in the contact page. Graffiti fonts, nifty copy, people can't help laughing, and the designer's humor can be felt from every detail.

19, fill in the form

Anakin's "About Us" page also allows users to fill in contact information, but the design of the form is more unique. There is no special form, only placeholders are used to remind users of what needs to be filled in in each position, which is very intimate, intuitive and intimate.

20. Personalized office location display

Similar to the second case, CPB Group has offices all over the world, but its design style is more unique. The content and personalized background of local offices are integrated, and the information is integrated, and the display method is full of personality.

2 1, introducing business.

It is not uncommon to introduce yourself on the "About Us" page, but there are many other things you can do, such as introducing your own business, showing your own brand and attracting users to chat. That's what HelloMonday's About Us page does.

22 video background

Adding video background to the website has become a very popular means, and Moodboard, as a film production studio, uses video background in About Us page, which not only conforms to the nature of their team's work, but also makes the whole About Us page more vivid.

23. Use grid layout

To design a structured page, the grid is always your best friend. UrbanInfluence uses grid to organize the whole page, and the content to be displayed, the part for user input, the decoration part and the displayed map are clearly distributed on the page.

24. Make the interface more friendly.

If we make the interface more friendly, designers have a lot of work to do. A clear and readable interface design is the most basic. The information should be conveyed clearly, without aggressive color matching, familiar with friendly presentation and easy-to-operate interaction. These are all places that designers should do well.

25, step by step guidance

Getting in touch requires a series of operations. If we divide the whole interaction process into several steps, guide users to operate step by step, and add dynamic effects and micro-interaction, it will definitely be a different experience.

26, increase the contact shortcut

The person in charge of different parts of the team is usually different. When users open the Contact Us page, they usually have a clear goal. How to add the FAQ part and the contact information of specific contacts, so that users can communicate with different responsible persons more directly.

27. Integration with other parts of the website.

RobbyLeonardi's website seems to be designed as a plane computer game. When you browse the page, you will go to different pages and do different things with the protagonist, and the page about us is one of them. It is a "scene". This is a way to integrate pages, which is worth learning.

28. Team photos

Many websites are operated by a whole development and design team, so it is very reasonable and personalized to take a group photo as the background of our page.

29. Use spaces

Usually, blank space can enhance the sense of space and structure of the whole page, and BetaTataki has placed a mobile phone with a sense of design on our page, which enhances the presence of contact information and other content by leaving blank space.

30, flexible font layout

Well-designed typography is not only decorative, but also can carry certain content. PaulineOsmont's contact page uses black, silver and gold to build an attractive visual design of the font typesetting machine. When you scroll down the page, you can see a form that is easy to read and typeset.

3 1, solo show

This is also a common way to display content in recent years. Designers hold up exhibition boards to show their designs. If used in the contact us page, this design technique is also very suitable. Just like MarkJaworkski's page, the designer's skills, introductions and message forms are neatly displayed on this flat whiteboard.

32. List social media contact information.

Which website doesn't have several social media accounts now? For many users, it is more convenient to contact the social media links of their own websites in the About Us page.

33. Borrow traditional communication methods.

Retro style is a good choice, but it seems more thoughtful and interesting to design with traditional contact methods. Lionway's contact page is designed as a postcard, and some fixed information is simply listed on the printed bill.

34, nifty copy

The design of copywriting is also an important part of the contact page. Friendly and humorous copywriting design will make users feel close, but the same playful and humorous copywriting will also make users unforgettable.

35. Show your personality

Contact the design studio Resn. Our page design is definitely one of the most personalized pages in this group. The main body of the page is composed of design elements full of 80' s amorous feelings and pictures of players with animal hoods.

36, the use of information map

Infographic is a design technology that has emerged in recent years. If there is suitable display content, it is also a good choice to use infographics on the "About Us" page. Quicksprout's About Us page uses infographics to present the content, which is clear, easy to read and accurate.

37. Animation and cartoons

In the Contact Us page, it is very common and effective to introduce designers and design teams with cartoon and animation images. Melonfree's About Us page shows the cartoon images of designers and developers.

38. Use translucent graphics

People's eyes always consciously recognize the contents of stone tablets, so even if translucent elements are put together, it will not seriously affect the reading experience. Indofolio's page design makes full use of translucent elements and puts the core contact information on a translucent rectangle. Through graphics, users can still see the details of the background, but they will not be unable to see the key contact information clearly.

39, hand-painted effect

Hand-painted contact us pages, especially those that are quite eye-catching, can always make users feel the intimacy of the designer. MarioPetrone's page design is quite playful and interesting.

40. Use only one drop-down box.

The contact page of the spokesperson is actually not a complete page, but a drop-down box is used instead. When you click the link in the navigation, this striking orange drop-down box will appear.

A Case Study of Color System in Web Design

Orange is also called orange yellow or orange. Its penetrating power is second only to red, and its color sense is warmer than red. Orange is a very lively color in web design, which gives people a feeling of luxury and warmth, excitement and enthusiasm, joy and vitality, and is also an exciting color.

Orange is widely used in web pages. It can create different sub-atmospheres by changing colors, which can not only show youthful vitality, but also achieve a steady effect. The wavelength of orange is between red and yellow, which is symbolic of health, vitality, courage and freedom. In order to let everyone have a better understanding of orange, the following is an analysis of different types of web pages.

1. Case analysis of catering website design

Recommended case: orange+yellow+dark orange

The whole page is mainly orange, which is blended with "yellow" with different lightness and purity. The page is very harmonious and not monotonous. It's a good picture, and the food pictures are all the same color, so it won't be very abrupt. Use white to layer the web page, which is layered.

2. Case study of entertainment web pages

Recommended case: dark orange+khaki+yellow.

The whole page is displayed by the combination of dark orange and light yellow, which makes the page look warmer. The dark bedding and yellow text achieve a prominent but unobtrusive visual effect and give the website vitality.

Three. Case analysis of e-commerce website

Recommended case: orange+khaki+green

In this case, the orange navigation assisted by khaki with relatively more colors and higher brightness will not be messy, but will be more distinctive and lively. Plus some green buttons are used to decorate the page, so that the page is not so monotonous, and there is a little green visual effect in thousands of oranges.

Four. Case study on websites of scientific and technological development institutions

The colors used in the page are mixed, but it makes people feel confused.