Thoughts on website design

Website design involves a lot of content. There are two aspects:

On the one hand, the design of pure websites, such as text layout, image production, graphic design, three-dimensional design, static silent text, dynamic sound images, and so on; on the other hand, it is the extension design of the website, including website theme positioning and browsing group positioning, intelligent interaction, production planning, image packaging, publicity and marketing, etc.

The following is a rough outline:

1. Locate the subject and name of your website;

2. Locate your website CI image;

3. Confirm your topic and forum;

4. Overall creative design of the website

5. Website hierarchy and Link Structure

6. homepage design

7. layout tips

8. Color Matching

9. effect and speed

10. For viewers

11. Skill in nuances

12. Construction completion and release time

13. Interaction and affinity

14. consider different browsers and resolutions

15. Font setting and table nesting

16. Application of New Technologies

17. design your banner and location

18. statement text-integrating feelings

19. Suggestions for beginners of Website Design

The above is the outline of this "series" article, which will be changed based on the actual writing situation. Every Monday. Before we begin, we need to clarify the following prerequisites:

1. Website Design and website production. We say that the website is "design" rather than "production". The difference between them is that design is a process of thinking, while production only shows the results of thinking. A successful website requires an excellent design first and then supplemented by excellent production. Design is the core and soul of the website. The same design can have multiple forms of presentation.

2. what we refer to as "website" refers to a practical site with a fixed subject and a specific purpose, excluding pure-expression or pure-text websites.

3. Some websites may be illustrated or commented on in the article.

1. Locate your website subject and name

To design a website, you must first locate the website topic.

The theme is the theme of your website. The website theme on the Internet is a wide array of strange things. As long as you think, you can make it. The following are 10 theme topics of the top 100 well-known national websites in 99 years from PC Magazine, which has some reference value for us.

Category 2: online job search

Category 2: online chat/instant message/ICQ

Category 2: online community/discussion/email list

Category 2: Computer Technology

Category 2: webpage/website development

Category 2: entertainment websites

Category 2: Travel

Category 2: Reference/Information

Category 2: Family/Education

Category 2: lifestyle/fashion

Each category can be further subdivided. For example, entertainment categories can be further divided into sports, movies, and music categories. Music can also be divided into MP3, vqf, and RA categories by format, classic, and modern, rock and roll. The above are just the most common themes, and there are many professional, alternative, and unique themes to choose from, such as Chinese medicine, tropical fish, weather forecasts, etc. At the same time, different themes can be connected and combined to generate new themes, such as tourism forums (Tourism + discussion) and classic ball playing (Football + film). Thousands of themes can be divided in this way, you won't repeat things for the subject, and it's hard to choose :)

My suggestions for theme selection are as follows:

1. The subject should be small and refined. The positioning should be small and the content should be refined. If you want to create an all-encompassing website and put all the things you think are wonderful on it, it will often be counterproductive. It gives people the feeling that there is no theme and no special features, everything is superficial, because you cannot have so much energy to maintain it. The biggest feature of the network is new and fast. Currently, the most popular personal homepage is updated every day or even several hours. The latest survey results also show that the "theme Station" on the Internet is more popular than the "Wanquan Station", like specialty stores and department stores. If I need to buy something, you will definitely choose a specialized store. For another example, KK, a netizen of mine, hopes to create a subject matter in literature, but literature also includes many contents, such as novels, poems, and prose; science fiction, martial arts, and reasoning; he carefully understood what he was good at and what he wanted to provide. Finally, he located the subject matter on the network literature, deleted some original irrelevant literature, and concentrated on expanding and organizing the network literature. After the launch of the website, it was quickly liked by everyone.

2. The best theme is your own good or favorite content. For example, if you are good at programming, you can create a programming enthusiast website. If you are interested in football, you can report the latest situations and star trends. In this way, we will not feel bored or powerless during production. Interest is the driving force behind website creation. without enthusiasm, it is difficult to design and produce outstanding works.

3. The subject matter should not be too broad or the target should be too high. "Too abuse" refers to theme that is visible everywhere and available to everyone; such as software downloads and free information. "Too high goal" means that there are already excellent and well-known websites on this subject. It is very difficult for you to surpass it. Unless you make up your mind to compete and surpass it with strength, remember that on the Internet, there is only one, people often only remember the best website, and the second and third place are much more impressive.

Okay. If you already have a wonderful idea, let's start to name the website. You may think that the website name has nothing to do with the website design. In fact, the website name is also part of the website design and is a key element. You can see that "computer study room" and "computer home" are obviously concise; "MIDI Park" and "MIDI Park" are clearly clear about the latter; "Children's World" and "Chinese Kindergarten" are clearly the latter's atmosphere. We all know that the Chinese name of piiicup is "Pentium". If it is changed to "running", it may not be as "fire" today. Like in real life, whether the website name is upright, loud, and easy to remember has a great impact on the image and promotion of the website. The general suggestions are as follows:

1. the name must be positive. This "zheng" is the statement of Alibaba Cloud. In fact, it must be legal, rational, and emotional. You cannot use reactionary, pornographic, superstitious, and harmful terms to social security.

2. The name must be easy to remember. According to the characteristics of Chinese website viewers, unless necessary, it is best to use a Chinese name. Do not use a mix of English or Chinese and English names. For example, beyond studio and beyond studio are more friendly and memorable. In addition, the website name should contain six words (preferably four words), such as "XX Pavilion" and "XX design room". idioms can be used for the four words, for example, "one network entry ". There is also a benefit of a small number of words, generally the small logo size of the link is 88X31, and the width of the six words is about 78, suitable for the link layout of other sites.

3. The name must be unique. The name is acceptable. If the name can reflect a certain connotation and give the viewer more visual impact and space imagination, it is the top product. Here are some good names that aegis thinks: cutting-edge music, taoba on the web page, and sounds awesome. While reflecting the theme of the website, it can also highlight its unique characteristics.

In short, positioning themes and names are the first step and an important part of designing a website. If you can find a satisfactory name, it is also worth a day to flip the dictionary.

Locate your website CI image.

The so-called Ci is the term used for advertising. (CI is the abbreviation of corporate identity), which means to unify the corporate image through vision. In real life, CI planning is everywhere. Outstanding examples include Coca-Cola, globally unified logos, colors and product packaging, which impressed us a lot. More examples include SONY, Mitsubishi, McDonald's, etc.

An outstanding website, like a real company, also needs the overall image packaging and design. Accurate and creative CI design, with a multiplier effect on website promotion and promotion. After the subject and name of your website are determined, you need to consider the CI image of the website.

1. design the Website Logo. First you need to design and make a Website Logo ). Just like a trademark, logo is a concentrated embodiment of the characteristics and connotation of your site. Seeing the logo reminds everyone of your site. Note: The logo here is not the banner of 88x31, but the logo of the website.

A logo can contain Chinese characters, English letters, symbols, patterns, animals, and characters. For example, soim uses soim English as the logo and Sina uses Sina + eyes as the logo. The logo design idea comes from the name and content of your website.

(1 ). website representative figures, animals, flowers and plants, can be used as the blueprint for design, cartoon and artistic, such as Disney's Mickey Mouse, Sohu's cartoon fox, and shark basketball.

(2). If the website is professional, the items represented by this major can be used as a symbol. For example, the copper logo of the Bank of China and the steering wheel logo of the Mercedes-Benz car.

(3). The most common and simplest way is to use the English name of your website as a sign. Using different fonts, deformation of letters, and combination of letters can easily make your own logo.

2. design the standard color of the website. The first impression of a website is a visual impact. Determining the standard color of the website is an important step. Different colors have different effects and may affect the mood of visitors.

"Standard colors" refer to the colors that reflect website images and extensions. Let's take a practical example to understand that IBM's dark blue, kendeki's red stripe, and Windows logo's red, blue, yellow, and green blocks all make us feel very appropriate and harmonious. How do we feel if we change IBM to a green or golden color?

In general, a website has no more than three standard colors, and too many colors are dazzling. Standard colors are used for website logos, titles, main menus, and main color blocks. It gives people a unified feeling. Other colors can also be used. They can only be used as an embellishment and set off.

Generally, the following colors are applicable to the standard webpage colors: blue, yellow/orange, black/gray/White.

3. Design the standard font of the website. Like Standard colors, standard fonts refer to the specific fonts used for logos, titles, and main menus. Generally, the default font of our webpage is. To show the uniqueness and uniqueness of the website, we can select some special fonts as needed. For example, in order to reflect the professional, you can use the rough imitation style, the exquisite design, the advertisement, and the friendly and casual handwriting. Of course, these are the personal opinions of Alibaba Cloud. You can choose a more appropriate font based on the content of your website. Currently, there are 20 or 30 common Chinese fonts and nearly Common English fonts. Note: non-default fonts can only be used in the form of images, because it is very likely that your browser's PC does not have your special fonts installed, so your hard work of design and production will go far!

4. design the website's promotional slogans. It can also be said that the spirit of the website and the goal of the website. Use one sentence or even one word to give a high degree of generalization. Similar to the real-life advertising quotes. For example, magpie nest "tastes great"; Maxwell's "Good things are shared with good friends"; Intel's "give you a surging Heart ".

The above four aspects: logos, colors, fonts, and slogans are the key for a website to establish a CI image. Specifically, they are the superficial articles of the website. These steps are designed and completed, your website will be reborn and the overall image will be improved. In an image: You have changed from a rustic farmer to a white-collar man in suits. (Note: We only design the CI based on static plane. We have not introduced sound, three-dimensional, and other factors .)

Determine the topic and forum of the website

Experience tells us that building a website is like writing an article. First, we need to prepare an outline so that the topic and layers of the article are clear. Instead of building a tall building, we must first design the frame drawings, in order to make the building structure reasonable.

The easiest mistake for beginners is to create a subject immediately after you confirm it. After one page is created, you will find that the website structure is not clear, the directories are complex, and the content is east and west. As a result, not only are the viewers confused, but it is also difficult to expand and maintain the website by themselves. Your website may be abandoned halfway. What's worse: You lose confidence and interest in making a homepage!

Therefore, before making a webpage, we must consider the following three aspects:

1. Confirm the topic and forum;

2. Determine the directory structure and link structure of the website.

3. determine the overall style and creative design of the website

Today, we will first discuss "determining the website's topic and Forum ".

After determining the subject of the website, I believe you have collected and organized a lot of relevant information. You must think that these are the best and will certainly attract netizens to browse the website. But have you put the best and most attractive content in the most prominent position? Is there an absolute advantage in the layout distribution of good things?

I have seen that many personal homepage columns (main menu) are not like this. For example, there is a website with the subject of providing animation materials. Its main topic is about webmaster, navigation on this site, animation treasure house, website forum, message book on this site, and contact webmaster. The home page contains the website and copyright statement of this site (the website is also set as the home page ). Most importantly, the most attractive animation materials account for 1/6 of the main columns and are not mentioned on the homepage. I think even if this site does have a lot of exquisite animated materials, it is difficult to attract viewers to continue mining.

The topic is essentially an outline index of a website. The index should clearly display the subject of the website. When preparing a column, you should carefully consider and arrange it properly. Pay attention to the following aspects for General website columns:

1. Remember to stick to your subject!

The general practice is to classify your themes in a certain way and use them as the main topic of your website. For example, in the above example, the topic can be divided into animal animation, logo animation, 3D animation, and cartoon animation, and the latest animation is marked on the home page. Remember: The number of topic columns must take an absolute advantage in the total column. Such a website is professional and has a prominent topic, which is easy to impress.

2. Set up a recent update or website guide topic

If your homepage does not have a layout for the latest update content, it is necessary to set up a "Latest Update" topic. This is done to take care of common visitors and make your homepage more humane.
If your home page contains a large amount of content (more than 15 MB) with many layers and no intra-site search engines, we recommend that you set the "this site Guide" column. It helps beginners quickly find what they want.

3. Set a topic for two-way communication

You don't need a lot, but you must have one. For example, forums, message books, and email lists allow viewers to leave their information. Some surveys show that sites that provide two-way communication are more friendly than simply leaving an "email me" website.

4. Set up a download or FAQ answer topic

The network features information sharing. If you see a site with a lot of excellent valuable information, you certainly want to download it at one time, rather than browsing the storage disk on one page. Set a Document Download topic on your own homepage, which will be liked by everyone. Some sites need to display their ads on several pages in an article. I think they will be eliminated sooner or later due to a decrease in access traffic (personal opinion :). In addition, if your website frequently receives emails from netizens about some problems, you 'd better set up a topic to answer frequently asked questions, which is convenient for netizens, you can also save yourself more time for learning.

Other auxiliary content, such as website and copyright information, can be left in the main topic to avoid downgrading the topic. To sum up the above points, we can conclude that we need to pay attention to the following points:

● Delete topics irrelevant to the topic as much as possible

● List the most valuable content of the website on the topic as much as possible

● As convenient as possible for visitors to browse and query

The above is the topic. Let's take a look at the forum settings. A forum has a larger concept than a topic. Each forum has its own topic. For example, Netease's website is divided into news, sports, finance, entertainment, education, and other sections. Each section has its own main column. Generally, the content of a personal site is small, and only the main column (main menu) is enough. You do not need to set a forum. If you think it is really necessary to set a forum, you should note that 1. Each forum must be relatively independent. 2. Various sections should be associated. 3. The content of the forum should be centered on the site topic. Regarding the forum, the main issue to be considered is the portal site and other large ICPs.

We will not discuss it further.

Determine the directory structure and link structure of the website

As mentioned in the previous article, we must consider the following three aspects before making a webpage:

1. Confirm the topic and forum;

2. Determine the directory structure and link structure of the website.

3. determine the overall style and creative design of the website

Today, we will continue to discuss "determining the directory structure and link structure of the Website ".

1. website directory structure

A website directory is a directory created when you create a website. For example, when frontpage98 is used to create a website, the root directory and the images subdirectory are created by default. The directory structure is easy to ignore. Most webmasters create subdirectories without planning. The directory structure is good or bad, but it does not feel too much for viewers. However, it has an important impact on the upload and maintenance of the site and the future expansion and Transplantation of content. The following are some suggestions for creating a directory structure:

● Do not store all files in the root directory.

Some netizens put all files in the root directory for convenience. The negative impact of this operation is:

1. Chaotic file management. You often cannot figure out which files need to be edited and updated, which useless files can be deleted, and which are associated files, which affects productivity.

2. the upload speed is slow. Generally, the server creates a file index for the root directory. When you store all files in the root directory, the server needs to retrieve all files and create new index files even if you only upload and update one file. Obviously, the larger the file volume, the longer the wait time. Therefore, we recommend that you minimize the number of files in the root directory.

● Create sub-directories by column content.

Create Sub-directories. First, follow the main menu bar. For example, website tutorials can create directories based on different technical categories, such as flash, DHTML, and Javascript. Enterprise sites can follow the company profile, product introduction, price, online order, feedback and contact to create a directory.

Other secondary columns, such as what's new, have a large number of links, and you can create independent subdirectories if you need to update them frequently. Some columns that are highly correlated and do not need to be updated frequently. For example, for this site, the webmaster and site experience can be merged into a unified directory.

All programs are generally stored in a specific directory. For example, place the CGI program in the cgi-bin directory. Easy to maintain and manage. All the content to be downloaded should also be placed in a directory.

● Create an independent images directory in each home directory.

By default, the root directory of a site contains an images directory. At the beginning of learning how to create a homepage, Alibaba Cloud is used to storing all the images in this directory. However, it was inconvenient to manage images when I needed to package a main column for users to download or delete a column. After practice, we found that it is most convenient to create an independent images directory for each main topic. The images directory under the root directory is only used to store pictures of the home page and some secondary columns.

● The Directory level should not be too deep.

It is recommended that the directory level not exceed three layers. The reason is simple and easy to maintain and manage.

Note the following:

1. Do not use a Chinese directory. The network has no borders. Using a Chinese directory may cause difficulties in displaying the website correctly.

2. Do not use too long directories. Although the server supports long file names, too long directory names are not easy to remember.

3. use directories with clear meanings as much as possible. In the above example, you can use flash, DHTML, and JavaScript to create directories, or use 1, 2, 3 to create directories, but which one is clearer, what makes it easier to remember and manage? Apparently the former!

With the continuous development of web page technology, the use of databases or other background programs to automatically generate Web pages is becoming more and more common, and the directory structure of the website will also jump to a new structural level.

2. Link Structure of the website

The Link Structure of a website refers to the topological structure of links between pages. It is based on the directory structure, but can span directories. Image: each page is a fixed point, and the link is a line between two fixed points. A vertex can be connected to or connected to multiple vertices. More importantly, these points are not distributed in a plane, but exist in a three-dimensional space.

● The purpose of studying the link structure of a website is to use the least link to make browsing more efficient.

Generally, there are two basic methods to create a link structure for a website:

1. Tree link structure (one-to-one ). Similar to the DOS directory structure, the Home Page Link points to the first-level page, and the first-level page Link points to the second-level page. The three-dimensional structure looks like a dandelion. When such a link structure is viewed, it enters at the first level and exits at the first level. The advantage is that the Organization is clear, and visitors know exactly where they are, so they are not "confused. The disadvantage is that browsing efficiency is low. subpages under one topic must go around the homepage to subpages under another topic.

2. Star Link Structure (one-to-many ). Similar to the network server connection, each page is connected to each other. The three-dimensional structure is like a steel ball on the Oriental Pearl TV Tower. The advantage of this link structure is that it is convenient to browse and can arrive at your favorite page at any time. The disadvantage is that there are too many links, which can easily lead the viewer to get lost and cannot figure out where and how much content he has read.

These two basic structures are only ideal. In actual website design, they are always used together. We hope that viewers can easily and quickly reach their desired pages and clearly know their locations. Therefore, the best solution is:

● A Star Link structure is used between the home page and level-1 page, and a tree link structure is used between level-1 and level-2 pages.

For example. The Page Structure of a news site is as follows:

---------------------------------------------------

Level 1 Page Level 2 page

Financial News Page -- [Financial News 1, Financial News 2...]

/|

Homepage -- entertainment news page -- [Entertainment News 1, Entertainment News 2...]

/|

It news page -- [it news 1, it news 2...]

----------------------------------------------------

Among them, the homepage, Financial News Page, entertainment news page, and it news page are star links, which can be clicked on each other and arrive directly. The financial news page and Its subpages are tree-connected. After you browse Financial News 1, you must return to the financial news page to view it news 2. To avoid the trouble of returning to the first-level page, some websites can directly open the second-level page with a new pop up windows window, and close the page after browsing.

Note: The above are examples of third-level pages. If the content of your site is huge and the classification details need to exceed the level 3 page, we recommend that you display a navigation bar on the page to help the viewer identify his location. You often see the top pages of many websites, such as: "your current location is: homepage-> Financial News-> Stock Market Information-> Shenzhen Stock-> Shenzhen Development ".
The design of the link structure is an important part in the actual website creation. What kind of link structure is used directly affects the layout of the layout. For example, the location of your main menu, whether or not each page needs to be placed, whether the frame splitting frame is required, and whether to add a link to the returned home page. After the connection structure is determined, consider the effect and form of the link, whether to use a drop-down form or DHTML Dynamic menu.

With the promotion of e-commerce, the competition for websites is becoming increasingly fierce. The requirements for link structure design are not limited to convenient and fast browsing, but also focus more on personalization and relevance. For example, on the eight-month Baby Nutrition page, you need to add a link to the eight-month baby's health questions and intelligence training link on a baby-loving subject website, or a link to the promotion of milk powder, a book, or a toy. Because parents cannot go down to every topic to find information about 8-month babies, they may leave the website after finding the problem they need. How to retain visitors as much as possible is a question that must be considered by website designers in the future.