Source: Shangpin China|Type: website encyclopedia|Date: July 16, 2012
Website Design, contains a lot of content.There are two aspects:
On the one hand, it is the extension design of the website, including the theme positioning of the website and the positioning of the browsing group, intelligent interaction, production planning, image packaging, publicity and marketing, etc.
On the other hand, it is the design of the website itself, such as text layout, picture production, graphic design, three-dimensional design, static silent graphics, dynamic audio images, etc;
These two aspects complement each other (it feels like writing a dialectical paper:). In addition to the rapid development of network technology, it is impossible to put forward an absolutely correct and authoritative design idea, and it is difficult to summarize it in an article. Therefore, according to the idea of building a website, Ajie collates his experience of website design and production over the years into a series of "lectures",Let me tell you (note: I will not talk about a particular technology or production technique very specifically, but focus on the idea). I hope I can give you some help.The following is a rough outline:
1. Locate your website CI image; 2. Locate your website theme and name; 3. Creative design of the overall style of the website 4. Determine your columns and sections; 5. Home page design 6. Hierarchy and link structure of the website 7. Tips for layout 8. Color matching 9. Effect and speed 10. Consider for the viewer 11. See skill in details 12. Construction completion and launch time 13. Interaction and affinity 14. Consider different browsers and resolutions 15. Font setting and table nesting 16. Application of new technology 17. Design your banner and location 18. Suggestions for beginners of website design 19. Sentences and words -- integrate feelings
The above is the outline of this "series" of articles, which will be changed according to the actual writing situation.Once a week.Before we begin, we should first clarify several prerequisites:
1、 In the article, you may give examples or comment on some specific sites.First of all, Agility is not suspected of advertising for any site.
2、 Website design and website production.We say that website "design" is not website "production". The difference between them is that design is a process of thinking, while production only shows the results of thinking.A successful website needs an excellent design first, and then an excellent production.Design is the core and soul of a website. The same design can have multiple ways of production.
3、 By "website", we mean a practical website with a definite theme and a clear purpose, not including a website of pure expression or pure text.
All right, cut the crap and let's get to the point:
When designing a website, the first problem is to locate the website theme. The theme is the theme of your website.The website on the network has a variety of topics.As long as you think about it, you can make it.The following is a list of the top 100 topics of well-known websites in the United States in 1999 by PC Magazine, which has some reference value for us. Category 1: Life/Fashion Category 2: Online job search Category 3: Online chat/instant messaging/ICQ Category 4: online community/discussion/mailing list Category 5: Computer technology Category 6: Web page/website development Category 7: Entertainment websites Category 8: Travel Category 9: Reference/Information Category 10: Family/Education
Each category can be further subdivided, for example, the entertainment category can be further divided into sports/movies/music category, music can be divided into MP3, VQF, Ra according to the format, and classical, modern, rock and roll according to the form of expression.The above are only the most common themes. There are many professional, alternative and unique themes to choose from, such as traditional Chinese medicine, tropical fish, weather forecast, etc. At the same time, the connection and cross combination of various themes can produce new themes, such as tourism forum (tourism+discussion), classic goal play (football+film and television),There can be thousands of themes, and you won't be bothered by the repetition and difficulty of choosing themes:)
My suggestions for choosing themes are:
1. The theme should be the content you are good at or like.For example, if you are good at programming, you can set up a website for programming enthusiasts;Interested in football, you can report the latest war situation, player dynamics, etc.In this way, when making, you won't feel bored or powerless.Interest is the power of making websites. Without enthusiasm, it is difficult to design and produce outstanding works. 3. The theme should not be too excessive or the goal too high."Too much" refers to the theme that can be seen everywhere and everyone has;For example, software download and free information."Too high a target" means that there are already very excellent and well-known sites on this topic. It is difficult for you to surpass them.Unless you are determined and have the strength to compete and surpass it, remember that there is only the first website on the Internet, people often only remember the best website, and the second and third place will have a much shallower impression.
2. The theme should be small and precise.The positioning should be small and the content should be refined.If you want to create an all inclusive site and put all the wonderful things you think on it, it will often backfire, giving people the feeling that there is no theme, no feature, everything is superficial, because you can't have so much energy to maintain it.The biggest feature of the network is new and fast. At present, the most popular personal homepage is updated every day or even every few hours.The latest survey results also show that "theme stations" on the Internet are more popular than "Wanquan stations", just like specialty stores and department stores. If I need to buy something, I will definitely choose specialty stores.To take another example, one of my online friends KK hopes to produce literary themes, but literature also includes many contents, including novels, poems, essays;Science fiction, martial arts, reasoning;A Jie carefully understood the main content that he was good at and wanted to provide, and finally positioned the subject on network literature, deleted some original irrelevant literature works, and concentrated on expanding and sorting out network literature works.After the launch of the website, it was quickly loved by everyone.
OK, if you have a brilliant idea, we will start to name the website.(Oh, don't kick me!) You may think that naming has nothing to do with website design. Ah Jie is wasting time here.In fact, the website name is also a part of the website design, and is a key element.As you can see, "computer learning room" and "computer home" are obviously the latter simple;"Midi Paradise" and "MIDI Paradise" are clearly the latter;"Children's World" and "China Kindergarten" are obviously the latter atmosphere.We all know the Chinese name of PIIICUP, "Pentium". If it were changed to "run", it might not be as "hot" as it is today:).As 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 recommendations are:
1. The name should be correct.This "righteousness" is Ah Jie's own statement. In fact, it is to be legal, reasonable and affectionate.It is not allowed to use reactionary, pornographic, superstitious and harmful nouns. 2. The name should be easy to remember.According to the characteristics of Chinese website visitors, unless specifically required, the website name should preferably be in Chinese, not in English or mixed Chinese and English.For example: beyond studio and beyond studio, the latter is more friendly and easy to remember.In addition, the number of words of the website name should be controlled within six characters (preferably four characters), such as "XX Pavilion" and "XX Design Room". Idioms can be used for four characters, such as "typing in through one website".There is also a benefit of less words. Generally, the small logo size of friendship links is 88X31, and the width of six words is about 78, which is suitable for the link layout of other sites. 3. The name should be distinctive.It is acceptable if the name is plain. If it can reflect certain connotation and give more visual impact and spatial imagination to visitors, it is top grade.Here are some names that Ah Jie thinks are very good: music avant-garde, web pottery bar, and sounds of nature.While reflecting the theme of the website, it can point out the characteristics.
In short, positioning the theme and name is the first step in designing a website, and it is also an important part.If you can find a satisfactory name, it is worthwhile to spend a day turning to the dictionary:) Well, today's experience is here.Since it is the first chapter, if you have any suggestions on the form of this series of lectures, please write to Agui immediately so that Agui can make corresponding changes.If you have better experience, please write, and Ajie will choose the best to publish.Thank you!The topic of our next discussion is "Positioning your website CI image".
CI is a borrowed advertising term.(CI is the abbreviation of corporate identity in English), which means unifying the corporate image through vision.CI planning in real life can be found everywhere, and outstanding examples such as Coca Cola Company, the globally unified logo, color and product packaging give us a deep impression.More examples are SONY, Mitsubishi, McDonald's, etc.
An outstanding website, like an entity company, also needs the overall image packaging and design.Accurate and creative CI design can achieve twice the result with half the effort in website promotion.After your website theme and name are determined, what you need to think about is the CI image of the website.
Some netizens want to ask: I'm not majoring in advertising, but CI may be too difficult for me:
1. Design a website logo. First, you need to design and make a website logo.Just like a trademark, a logo is a concentrated expression of your site's characteristics and connotation. Seeing a logo reminds everyone of your site.Note: The logo here does not refer to the 88X31 small icon banner, but the logo of the website.
The logo can be Chinese, English letters, symbols, patterns, animals or people, etc.For example, soim uses soim's English as its logo, and Sina uses the letter sina+eyes as its logo.The design idea of the logo comes from the name and content of your website.
(1) The representative characters, animals, flowers and plants of the website can be used as the blueprint of the design, and can be cartoon and artistic, such as Disney's Mickey Mouse, Sohu's cartoon fox, and Shark's basketball shark.
(2) If the website is professional, it can be marked with representative items of its own specialty.Such as the copper plate logo of Bank of China and the steering wheel logo of Mercedes Benz.
(3) The most common and simplest way is to use the English name of your website as a logo.It is easy to make your own logo by using different fonts, letter deformation and letter combination.
2. Design the standard color of the website.The first impression of the website comes from the visual impact. It is an important step to determine the standard color of the website.Different color combinations produce different effects and may affect the mood of visitors.
"Standard color" refers to the color that can reflect the website image and extend the connotation.A practical example shows that IBM's dark blue, KFC's red stripe, and the red, blue, yellow and green blocks on the Windows logo make us feel very appropriate and harmonious.What will we feel if we change IBM to green or golden?
Generally speaking, the standard colors of a website are no more than 3, and too many are dazzling.Standard colors should be used for website logo, title, main menu and main color block.It gives people a sense of unity.As for other colors, they can also be used just as ornament and foil, and can never dominate.
Generally speaking, the colors suitable for standard colors of web pages are: blue, yellow/orange, black/gray/white.(Note: we will introduce the specific methods of color matching in the eighth article of this series).
3. Design the standard font of the website.Like standard colors, standard fonts refer to unique fonts used for signs, titles, and main menus.Generally, the default font of our webpage is Song typeface.In order to reflect the "distinctive" and unique style of the site, we can choose some special fonts as needed.For example, in order to reflect the specialty, you can use rough imitation Song typeface, advertising typeface to reflect the exquisite design, and handwritten typeface to reflect the friendliness, etc.Of course, these are Agui's personal views. You can choose a more appropriate font according to the content expressed on your website.At present, there are twenty or thirty common Chinese fonts, and nearly one hundred common English fonts. There are many special English art fonts downloaded on the network. It is not difficult to find a satisfactory font:)
It should be noted that the use of non default fonts can only be in the form of pictures, because it is likely that your special fonts are not installed in the browser's PC, so your hard design and production will be wasted!
4. Design the propaganda slogan of the website.It can also be said that it is the spirit and goal of the website.Use a sentence or even a word to summarize.Similar to advertising phrases in real life.For example, the magpie nest "tastes great";Maxwell's "sharing good things with good friends";Intel's "Give You a Pentium Heart".
The above four aspects: logo, color, font and slogan are the key to building a CI image of a website. To be exact, it is the superficial article of the website. If you design and complete these steps, your website will be reborn and the overall image will be improved.Figuratively, you have changed from a rustic farmer to a white-collar person in a suit.(Note: we only design CI based on plane static, and have not introduced sound, three-dimensional and other factors.)
Well, after reading the above introduction, you should have a preliminary concept of website CI.Maybe not very clear, because those principles are too abstract, you may need some practical and more vivid examples.Ajie will modify and add some examples on its home page at the same time.In the next section, we will discuss "Determine the column section of the website". Welcome to participate, thank you!
Determine the columns and sections of the website
The third article in the series "Thinking about Design" begins today.Agui is not a professional web designer, but Agui will try his best to write this series of articles and tell you his experience and experience in practice as much as possible, hoping to give you some harvest and inspiration.If you have different opinions on the views listed in the article, please write to discuss[email protected], thank you.
In the first two articles, we learned to locate the website theme and establish the CI image of the website.Is it time to enter the substantive design and production stage?The answer is: No.Experience tells us that building a website is like writing an article. First, we should draw up an outline, so that the article can have a clear theme and level;It is also like building a tall building. The first thing to do is to design the frame drawings to make the building structure reasonable.
For beginners (including myself: -), the most common mistake is to start production immediately after determining the theme.When you have completed the production page by page, you will find that the website structure is not clear, the directory is numerous and jumbled, and the content is piecemeal.As a result, not only did the visitors get confused, but it was also quite difficult to expand and maintain the website by yourself. Your website might give up halfway, and what's worse: you lost the confidence and interest in making the home page!
Therefore, we must consider the following three aspects before we start to make web pages:
1. Determine columns and sections; 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 columns and sections of the website".
After the theme of the website is determined, I believe you have collected and organized many relevant materials.You must think that these are the best and will certainly attract netizens to visit the website.But have you put the best and most attractive content in the most prominent position?Have you made good things absolutely dominant in layout?
I see many columns (main menu) on personal homepage are not like this.For example, there is a website with the theme of providing animation materials. Its main columns are: About the webmaster, our navigation, animation treasure house, our forum, our message book, and contact the webmaster.The website address and copyright statement are written on the home page (even the words "set this site as the home page").The most important and attractive animation materials account for 1/6 of the main columns, and they are not mentioned at all on the home page.I think even if this site does have a large number of beautiful animation materials, it is difficult to attract visitors to continue digging.
The essence of a column is an outline index of a website, and the index should clearly show the main body of the website.When formulating columns, we should consider carefully and arrange reasonably.The general arrangement of website columns should pay attention to the following aspects:
1. Remember to keep to your theme! The general approach is to classify your topics in a certain way and make them the main columns of the website.For example, in the above example, the columns can be divided into animal animation, logo animation, 3D animation, cartoon animation, etc., and the latest updated animation can be marked on the home page.Remember: the number of theme columns should take an absolute advantage in the total columns. Such a website is professional, the theme is prominent, and it is easy to leave a deep impression.
2. Set up a recent update or website guide column If your home page does not have a layout for the recently updated content information, it is necessary to set up a "recently updated" column.This is to take care of frequent visitors and make your homepage more user-friendly.
If your home page is large in content (more than 15MB), has many levels, and does not have a search engine on the site, it is recommended that you set up a "guide to this site" column.It can help new visitors quickly find what they want.
3. Set a column for two-way communication It doesn't need much, but it must be.For example, forums, message books, mailing lists, etc. can let visitors leave their information.A survey shows that a site that provides two-way communication is more friendly than a site that simply leaves an "Email me".
4. Set up a download or FAQ column The network is characterized by information sharing.If you see a site with a large number of excellent and valuable materials, you certainly hope to download them at one time, rather than browse and save them page by page."Put your heart into your heart" Set up a data download column on your home page, and you will be liked by everyone.Some websites need to display an article in several pages for the purpose of advertising display volume. I think it will be eliminated sooner or later due to the decline in the number of visitors (personal opinion:).In addition, if your site often receives letters from netizens about certain issues, you'd better set up a column to answer common questions, which will not only facilitate netizens, but also save yourself more time for learning.
As for other auxiliary content, such as information about the site and copyright information, it can not be placed in the main column to avoid diluting the theme.To sum up the above points, we can draw a conclusion that the following should be paid attention to when dividing columns:
● Delete columns irrelevant to the theme as far as possible ● List the most valuable content of the website on the column as far as possible ● Make it as convenient as possible for visitors to browse and query The above is about columns. Let's take a look at the layout settings.The concept of section is larger than that of column. Each section has its own section.For example, NetEase's website is divided into news, sports, finance, entertainment, education and other sections. Each section has its own main column below.Generally, the content of personal websites is small, and only the main column (main menu) is enough, and there is no need to set a section.If you think it is really necessary to set up a forum, you should pay attention to 1. Each forum should be relatively independent.2. Each section should be related to each other.3. The content of the forum should focus on the theme of the site.In terms of the format, it is mainly the portal and other issues that need to be considered for larger ICPs No further discussion. Well, it's late at night. Let's write about it today.Ajie will continue to discuss with you how to "determine the directory structure and link structure of the website" next time. Thank you.
Determine the directory structure and link structure of the site
Hello, everyone.This is the fourth article in the series "Thinking about Design".If you need the previous articles, you can download the E-magazine Multimedia and Website Development from Suoyi, or visit my homepage Web Designer.
As mentioned in the previous part, before we start to make web pages, we must consider the following three aspects:
1. Determine columns and sections; 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、 Directory structure of the website
The directory of the website refers to the directory created when you created the website.For example, when creating a website with frontpage98, the root directory and images subdirectory are created by default.The structure of the directory is an easily ignored problem. Most webmasters create subdirectories without planning.The quality of the directory structure does not give much impression to the visitors, but it has an important impact on the upload maintenance of the site itself and the future expansion and migration of the content.Here are some suggestions for establishing directory structure:
● Do not store all files in the root directory.
Some netizens put all files in the root directory for convenience.The adverse effects of doing so are: 1. Document management is disordered.You often can't figure out which files need to be edited and updated, which useless files can be deleted, and which are associated files, affecting work efficiency. 2. The upload speed is slow.The server usually builds a file index for the root directory.When you place all files in the root directory, even if you only upload and update one file, the server needs to retrieve all files again to create a new index file.Obviously, the larger the number of files, the longer the waiting time will be.Therefore, the advice is to reduce the number of files in the root directory as much as possible.
● Create sub directories according to column contents.
To create a subdirectory, first click the main menu column.For example, web tutorial sites can set up corresponding directories according to technical categories, such as Flash, Dhtml, Javascript, etc;The enterprise website can establish the corresponding directory according to the company profile, product introduction, price, online order, feedback contact, etc.
Other secondary columns, such as what's new, have more friendship links and can create independent subdirectories if they need to be updated frequently.And some columns that are highly relevant and do not need to be updated frequently, such as: about the site, about the webmaster, site experience, etc. can be merged into a unified directory.
All programs are generally stored in a specific directory.For example, CGI programs are placed in the cgi bin directory.It is convenient for maintenance and management.All content to be downloaded should also be placed in a directory.
● Create an independent images directory under each main directory.
By default, there is an images directory in the root directory of a site.At the beginning of learning how to make the homepage, Ajie used to store all the pictures in this directory.However, I found it inconvenient later. When I need to package a main column for netizens to download, or delete a column, the management of pictures is quite troublesome.It is found through practice that it is most convenient to establish an independent images directory for each main column.The images directory in the root directory is only used to place pictures of the home page and some secondary columns.
● The level of the directory should not be too deep.
It is recommended that the directory hierarchy should not exceed 3 levels.The reason is simple, and maintenance and management are convenient.
Other things to note are:
1. Do not use the Chinese directory;The network has no borders, and the use of Chinese directories may cause difficulties for the correct display of web addresses. 2. Do not use too long directories;Although the server supports long file names, too long directory names are not easy to remember. 3. Try to use a meaningful directory;In the above example, you can use Flash, Dhtml, and Javascript to create a directory, or you can use 1, 2, and 3 to create a directory. But which one is more specific and easier to remember and manage?Obviously the former!
With the continuous development of web page technology, it is more and more common to use database or other background programs to automatically generate web pages, and the directory structure of the website will also leap to a new structural level.
2、 Link structure of 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.Figuratively, every page is a fixed point, and a link is a line between two fixed points.A point can be connected to one point or multiple points.More importantly, these points are not distributed in a plane, but exist in a three-dimensional space.
● The purpose of our research on the link structure of the website is to use the least links to make browsing the most efficient.
Generally, there are two basic ways to establish the link structure of a website:
1. Tree link structure (one-to-one).Similar to the directory structure of DOS, the first 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 browsing such a link structure, one level enters and one level exits.The advantage is clear organization. Visitors know where they are and will not get lost.The disadvantage is that the browsing efficiency is low. When a sub page under one column goes to a sub page under another column, it must go around the home page.
2. Star link structure (one to many).Similar to a web server link, each page has a link 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 easy to browse and you can reach your favorite page at any time.The disadvantage is that there are too many links, which is easy to make the visitors lose their way, and they can't figure out where they are and how much content they have seen.
These two basic structures are only ideal ways. In actual website design, these two structures are always mixed together.We hope that visitors can not only easily and quickly reach the page they need, but also clearly know their location.Therefore, the best way is:
● Star link structure is used between the first page and the first page, and tree link structure is used between the first page and the second page.
Take an example.The page structure of a news site is as follows: ---------------------------------------------------
First level page Second level page
Financial News Page -- [Financial News 1, Financial News 2...] / | Home -- Entertainment News Page -- [Entertainment News 1, Entertainment News 2...] | IT News Page -- [IT News 1, IT News 2...]
---------------------------------------------------- Among them, the home page, financial news page, entertainment news page and IT news page are star links, which can be directly reached by clicking each other.There is a tree connection between the financial news page and its sub page. After browsing financial news 1, you must return to the financial news page to browse IT news 2.Therefore, in order to avoid the trouble of returning to the first level page, some sites directly open the second level page with a new window (POP up windows) and close it after browsing.
Note: above we all use the three-level page as an example.If the content of your site is huge and needs more than three levels of pages, it is recommended that you display navigation bars in the page to help the visitors to know where they are.You often see it at the top of many websites, like this: "Your current position is: Home ->Financial News ->Stock Market Information ->Shenzhen Stock ->Shenzhen Development"
The design of link structure is very important in the actual web page production.The link structure used directly affects the layout of the layout.For example, where to put your main menu, whether to place it on every page, whether to use a framing frame, and whether to add a link back to the home page.After the connection structure is determined, consider the effect and form of the link, whether to use a drop-down form or a DHTML dynamic menu.
With the promotion of e-commerce, the competition of websites is becoming more and more fierce. The requirements for link structure design are not only limited to convenient and fast browsing, but also pay more attention to personalization and relevance.For example, in a baby friendly website, on the nutrition page of an 8-month-old baby, you need to add a link to the health problems of the 8-month-old baby, a link to intellectual development, or a link to the promotion of milk powder, a book, a toy.Because parents can't go to every column to find information about 8-month-old babies, they may leave the website after finding the problems they need.How to retain visitors as much as possible is a problem that website designers must consider in the future.
Speaking of this, Ah Jie suddenly felt that he was very powerful, and unexpectedly he would sum up such a big theory:) What, thick skin?Maybe, so many experts didn't speak!If you have any comments, please write[email protected]
Next time we will continue to discuss "Determine the overall style and creative design of the website", and you are welcome to participate.
Determine the overall style and creative design of the website
The overall style of the website and its creative design are what webmasters hope to master most and are also the most difficult to learn.The difficulty lies in that there is no fixed program to refer to and imitate.Given you a theme, no two people can design exactly the same website.When we say: "This site is cool, very personalized!" Then, what makes you feel cool?What's the difference between it and general websites?This article tries to use the most concise language to explain:
1. What is the style and how to establish the website style? 2. What is creativity and how to generate it?
● Style is abstract.It refers to the comprehensive feeling of the overall image of the site to the visitors.
This "overall image" includes CI (logo, color, font, slogan), layout, browsing method, interactivity, text, tone, content value, significance, site honor and many other factors of the site.For example, we think NetEase is approachable, Disney is lively, and IBM is professional and serious.These are the different feelings left by the website.
The style is unique, which is different from other websites.Or color, or technology, or interaction, can let visitors clearly distinguish that this is unique to your website.For example, the black and white color of New Century Network (www.century.2000c. net) and the unique frame of Netease wallpaper station can tell which website it is even if you only see one page.
The style is human.Through the appearance, content, text and communication of the website, the personality and emotion of a website can be summarized.It is gentle and elegant, persistent and enthusiastic, lively and changeable, and uninhibited.Like the "bold and unconstrained school" and "graceful and restrained school" in poetry, you can use the character of people to compare the site.
The difference between a styled website and an ordinary website is that what you see on an ordinary website is just information piled up together, and you can only describe it with rational feelings, such as the amount of information and the speed of browsing.But you can have a deeper emotional understanding after you have visited the website with style, such as the website has taste, is amiable, is a teacher, is a friend.
After reading the above description, you may still be vague about what style is.In fact, style is a sentence: different!
How to establish website style?We can take the following steps:
First, make sure that style is based on valuable content.A website with style but no content is like an embroidered pillow with a bag of grass, like an arrogant but illiterate person.You must first ensure the quality and value of the content.This is the most basic, no doubt.
Second, you need to thoroughly understand what impression you want the site to give.We can clarify our thinking from these aspects:
1. If you only use one sentence to describe your site, it should be:_____________
Reference answer: Creative, professional, with (technical) strength, aesthetic feeling and impact
2. When you think of your site, the colors you can associate are:________________
Reference answer: Enthusiastic red, fantasy sky blue, smart golden yellow
3. When you think of your site, the picture you can associate is:________________
Reference answer: A morning paper, a Ferrari, a crowded square, a grocery store
4. If the website is a person, his personality is:________________
Reference answer: Mature middle-aged people, wild and unrestrained cowboys, confident and honest entrepreneurs
5. As a webmaster, you want to give the impression that:____________________
Reference answer: Dedicated, earnest, deep, responsible, pure, straightforward, lady
6. To use an animal analogy, your website is most like:__________________
Reference answer: Cat (mysterious and noble), eagle (sharp eyes), rabbit (smart and sensitive), lion (confident and authoritative)
7. The difference between you and other websites is that:__________________
8. The feeling of communication and cooperation between visitors and you is:______________________
Reference answer: Teachers and students, colleagues, friends, parents and children.
You can fill in an answer by yourself, and then let other netizens fill in.The comparison results will tell you the current gaps, weaknesses and areas for improvement of your website.
Third, after clarifying the impression of your website, start to work hard to establish and strengthen this impression.
After the "quantification" of the impression in the second step, you need to further find out the most characteristic thing, which is the thing that best reflects the style of the website.And take it as the characteristics of the website to focus on strengthening and publicity.For example, review the website name, domain name and column name again to see if they conform to this personality and are easy to remember.Check whether the website standard color is easy to associate with this feature, and whether it can reflect the website's character, etc.There is no formula for the specific method.Here I provide some references:
1. Put your logo on every page as much as possible.Or header, or footer, or background. 2. Highlight your standard colors.The link color of the text, the main color of the picture, the background color, and the border color should be consistent with the standard color. 3. Highlight your standard font.Use a unified standard font in key titles, menus, and pictures. 4. Think of a catchy slogan.Put it in your banner, or put it in an eye-catching position, and tell everyone that the feature of your website is 5. Use a unified tone and person.Even if it is maintained by multiple people, the reader should feel that it was written by the same person. 6. Use unified picture processing effect.For example, the direction, thickness and blurriness of the shadow effect must be the same. 7. Create a symbol or icon unique to your site.For example, a point before a link can use.☆※○ ◇ □△ → (refer to the location code), etc.Although it's a simple change, it makes people feel different. (Why didn't I think of it?) 8. Use self-designed lace, lines and dots 9. Display the honors and successful works of your website. 10. Tell netizens about your true stories and ideas.
The formation of style is not a positioning, you can continue to strengthen, adjust, and decorate in practice until one day, netizens write to tell you: "I like your site, because it is very stylish!"
● Idea is the key to website survival.This is believed to have been recognized by everyone.However, as a web designer, the most distressing thing is that there is no good source of creativity.
Note that the creativity here refers to the overall creativity of the site (the site is generated because of this creativity, or the same content, but the creativity is different). I will introduce the graphic design creativity of the web page in the layout tips later.
What is creativity and how to generate it?
Creativity is fascinating, wonderful and unexpected; Creativity is an idea captured and a trick created These statements tell some characteristics of creativity. In essence,
○ Creativity is a special way to convey information.
For example, for Web designer, we will capitalize the letter "E": wEbdEsigEr, how do you feel? This is actually an idea!
Creativity is not the inspiration of genius, but the result of thinking.According to the research of James, an American advertising professor, the process of creative thinking can be divided into five stages:
1. Preparation period -- the data collected by the research institute can inspire new ideas based on old experience; 2. Incubation period - chew and digest the materials to make the consciousness develop freely and combine freely; 3. Revelation period -- consciousness development and combination to generate creativity; 4. Validation period -- discussion and revision of ideas to be generated; 5. Formation period -- design and produce web pages to concretize creativity.
○ The idea is to recombine existing elements. For example, the combination of network and telephone generates IP phone.From this point of view, anyone, including you and me, can create extraordinary creativity.Moreover, the richer the information, the easier it is to generate creativity.Just like a kaleidoscope, the more pieces of glass in the tube, the more patterns it presents.If you are careful, you can find that the most creative ideas on the Internet come from the combination with real life (or virtual reality), such as online bookstores, electronic communities, and online auctions.Have you come up with a better idea?
The most common way of creative thinking is association. Here are 25 kinds of association clues of website creativity:
1. Turn it upside down 2. Reduce it 3. Change the color 4. Make it longer 5. Make it flash 6. Put it into music 7. Combine words, music and pictures 8. Make it young 9. Make it repeat 10. Make it three-dimensional 11. Participate in competitions 12. Participate in betting 13. Change part 14. Split it 15. Make it romantic 16. Speed it up 17. Add fragrance 18. Make it look popular 19. Make it symmetrical 20. Appeal to children 21. Lower price 22. Give it a nickname 23. Pack it 24. Free 25. Extension combination of above items -------------(Reprinted from Advertising Production by Fan Zhiyu)
It should be mentioned that the purpose of creativity is to better promote the website.If the creativity is good, but it is meaningless for the development of the website, like wearing high-heeled shoes for cows, then we would rather give up the creativity!
There is still much to say about style and creativity.Interested netizens can find some books on advertising design by themselves.I hope this article can help you to have an updated understanding and improvement of the website design.thank you!
Home page design
After we fully consider the columns, link structure and overall style of the website, we can officially start to make the home page. There is a saying: "A good beginning is half the battle". This is also true in website design. The design of the home page is the key to the success of a website.People often have an overall feeling of your site when they see the first page.It depends on the "skill" of the home page design whether it can promote the visitors to continue clicking to enter and whether it can attract visitors to stay on the site. Therefore, the design and production of the home page must be paid attention to and dedicated.Ajie's experience is that the design and production of the general home page account for 40% of the production time.You'd rather spend more time in the early stage, so as not to modify it after all is done, which will be the most energy wasting thing.
Here, insert a "cover" question first.The cover refers to the home page with no specific content, only a logo, or a simple graphic menu. Do you need to design a "cover page" for your site?A Jie's personal view is: no need! Unless you are a very artistic site, or you can be sure that the content is unique and can attract visitors to further click on the site, otherwise, the cover style home page will not bring any benefits to your site.What we need to browse online is fast and valuable information. If we wait for xx minutes and only show a crude "ENTER" icon, we believe that no one will patiently wait to enter the next page.
Because of the importance of the home page, Ajie will focus on discussing all aspects of the home page design in 8 articles. The outline is as follows:
○ Tips for layout ○ Color matching ○ Font setting and table nesting ○ See skill in details ○ Consider different browsers and resolutions ○ Design your banner and location ○ Importance of meta tags ○ Tips for homepage design
Today, it's just an introduction to the home page design.Let's take a look at the steps of home page design.
The home page is basically the content directory of the whole site, which is an index.But it is obviously not enough to just list the contents. How to design a home page?The general steps are:
● Determine the function module on the home page ● Design the layout of the front page ● Processing technical details 1） Determine the function module of the home page.
The content module of the home page refers to the main content and functions you need to implement on the home page.General sites need such modules:
Website name (logo), banner, main menu, What's new, search, links, Maillist, counter, copyright
What modules to select, what functions to implement, and whether other modules need to be added are the first to be determined in the homepage design. 2） . Design the layout of the front page
After the function module is determined, start to design the layout of the home page.Just like building blocks, each module is a unit building block. How to build a beautiful house depends on your creativity and imagination. The best way to design a layout is to find a piece of white paper and a pen, sketch out your ideal sketch first, and then use web page production software to achieve it.
3） . Processing technical details A Jie often receives letters about how my homepage can remain unchanged at different resolutions, how it can not look too ugly in IE and NC, and how to set fonts and link colorsWait a minute, Ajie will introduce it in detail in the following articles.
The home page design is the difficulty and key of the whole website design. Ajie hopes to sum up a set of reasonable and easy to learn design methods through communication with everyone, so that we can draw inferences from one instance and complete the design and production of the whole website more easily.If you are willing to share your experience with everyone, please write[email protected], thank you!
Principles of layout
The first step in designing the home page is to design the layout. Just like the traditional editors of newspapers and magazines, we regard the web page as a newspaper and a magazine for layout.Although the development of dynamic web technology makes us tend to learn scenario script writing, the fixed basis of web page layout design is still necessary to learn and master.Their basic principles are common. You can understand the main points and draw inferences from one instance.
A layout refers to a complete page (including frames and layers) seen by the browser.Because everyone's display resolution is different, the size of the same page may be 640 * 480 pixels, 800 * 600 pixels, 1024 * 768 pixels and other different sizes.
Layout is to arrange pictures and text in different positions of the page in the most suitable way for browsing.You may notice that "best fit" is an uncertain adjective. What is the best fit?Sorry, Agui cannot and cannot give you a complete and correct answer.Just like someone wants to know what the secret of success is, a winner can only suggest what method you use and what way you can most easily achieve success, but there is no "secret" of success to tell you.
In the fourth article of the design thinking series, we talked about the overall creativity of the site. The layout is also a creative problem, but it is easier and more regular than the overall creativity of the site.Let's first understand the steps of layout:
1、 Draft
The new page is like a piece of white paper, without any tables, frames or conventional things. You can use your imagination as much as possible to draw the "scene" you think of (we suggest you use a piece of white paper and a pencil, of course, the mapping software photoshop can also be used).This belongs to the creative stage. We don't pay attention to delicacy and neatness, and we don't need to consider the function of details. We can only use rough lines to draw the outline of creativity.Draw as many as you can, and finally select a satisfactory script to continue creating.
2、 Rough layout
On the basis of the draft, arrange the function modules you decide to place on the page.(Note: The function module we mentioned in the "Homepage Design - Introduction" mainly includes website logo, main menu, news, search, friendship link, advertising bar, mailing list, counter, copyright information, etc.).Note that we must follow the principle of highlighting key points, balancing and harmonizing, place the most important modules such as website logo and main menu in the most prominent and prominent position, and then consider the emissions of secondary modules.
3、 Finalization
Refine and specify the rough layout.(Only by relying on your wisdom and experience, can you create a creative layout.)
In the layout process, we can follow the following principles:
1. Normal balance --- also called "symmetry".It mostly refers to the form of left and right, up and down contrast, mainly emphasizing order, which can achieve the effect of stability, honesty and trust. 2. Abnormal balance --- that is, non contrast form, but also balance and rhythm, of course, are uneven, and this layout can achieve the effect of emphasis, insecurity, and high attention. 3. Contrast --- The so-called contrast not only uses color, tone and other techniques to express, but also involves the contrast between ancient and modern, new and old, poor and rich in content. 4. Gaze --- The so-called gaze is to use the line of sight of the characters on the page to make the viewer imitate the following psychology to achieve the effect of staring at the page. Generally, the star gaze is used. 5. Blank - Blank has two functions. On the one hand, it shows outstanding performance to other websites, and on the other hand, it also shows the superiority of web page taste. This method of expression is very effective in showing the style of web pages. 6. Try to use pictures to explain --- This method is especially effective for emotions that cannot be persuaded or expressed with words.The content of the picture explanation can convey more psychological factors to the visitors. ------------(Reprinted from Advertising Production by Fan Zhiyu, an advertising master)
Although the above design principles are boring, if we can understand and apply them to the page layout, the effect will be different.For example,
○ If the white background of the webpage is too weak, you can add some colors quickly; ○ The layout is scattered, and lines and symbols can be used in series; ○ If there are too many words on the left, a picture can be inserted on the right to keep balance; ○ The table is too regular, you can try using the leading angle instead.
After constant attempts and deliberation, your web page will be bright:)
Look at the layout forms we often use:
1. "T" structure layout.The so-called "T" structure.It means that the top of the page is a horizontal website logo+advertising bar, the bottom left side is the main menu, and the right side displays the layout of the content. Because the menu bar has a deep background and the overall effect is similar to the English letter "T", we call it a "T" layout.This is the most widely used layout in web design.(Sketch) The advantages of this layout are clear page structure and distinct primary and secondary.It is the easiest layout method for beginners.The disadvantage is that the rules are rigid. If you don't pay attention to the details and colors, it is easy to make people "look boring".
2. "Mouth" layout.This is a pictographic saying, that is, there is usually an advertising bar at the top and bottom of the page, with the main menu on the left, friendship links on the right, and the main content in the middle.(Sketch) The advantage of this layout is that it makes full use of the layout and has a large amount of information (my home page belongs to this layout).The disadvantage is that the page is crowded and not flexible enough.There are also those who leave the four sides empty and only use the window design in the middle, such as Netease wallpaper station.
3. "Three" layout.This layout is mostly used in foreign sites, but not in China.It is characterized by two horizontal color blocks on the page, which divide the page into four parts, and most of the color blocks contain advertising strips.
4. Symmetrical contrast layout.As the name implies, it adopts a symmetrical layout, half dark and half light, which is generally used for design sites.The advantage is strong visual impact, while the disadvantage is that it is difficult to combine the two parts organically.
5. POP layout.POP is quoted from the advertising term, which means that the page layout is like a propaganda poster, with a beautiful picture as the design center of the page.It is often used in fashion sites, such as ELLE.com.The advantages are obvious: beautiful and attractive.The disadvantage is that the speed is slow.As a layout, it is worth learning.
The above summarizes the common layout on the network at present. In fact, there are many different layouts, the key is your creativity and design.For layout skills, here are four suggestions that you can consider:
1. Enhance visual effect 2. Enhance the visibility and readability of the copy 3. Unified vision 4. Freshness and individuality are the highest level of layout
Well, today we will stop here. In the next chapter, we will continue the "color matching" chapter designed on the home page. Welcome to write and discuss.[email protected]
Color of web page
The color of the web page is one of the keys to establish the website image, but the color matching is a headache for netizens.Background, text, icons, borders, hyperlinks,What kind of color should be used and what color should be matched to best express the expected connotation?A Jie talks about some experience here, hoping to enlighten you. First, let's learn some basic knowledge of color:
1. Color is caused by light refraction.
2. Red, yellow and blue are three primary colors, and other colors can be blended with these three colors. The color expression in the html language of web pages is the numerical expression of these three colors For example, red is color (255,0,0), and the hexadecimal representation method is (FF0000) White is (FFFFFF). The "bgColor=# FFFFFF" we often see means that the background color is white.
3. Color is classified into non color and color. Non color refers to black, white and gray system colors. Color refers to all colors except non color.
4. Any color has the attributes of saturation and transparency. The changes of attributes produce different hues, so at least millions of colors can be produced.
Is it better to make web pages in color or non color?According to professional research institutions, the memory effect of color is 3.5 times that of black and white.In other words, in general, color pages are more attractive than black and white pages. Our usual practice is to use non color (black) for the main content text, and color for the border, background and pictures.In this way, the whole page is not monotonous, and the main content will not be dazzled.
● Non color matching
Black and white is the most basic and simple combination. White characters on black background, black background and white characters are very clear. Gray is a universal color, which can be matched with any color, and can also help the harmonious transition of two opposite colors.If you really can't find the right color, try gray, and the effect will not be too bad.
● Color matching
The colors are ever-changing, and the collocation of colors is the focus of our research.We still need to learn more about color.
1、 Color ring.
We can get a color ring by gradually changing the color according to "red ->yellow ->green ->blue ->red". The two ends of the color ring are warm color and cold color, and the middle is medium color.(See the figure below)
2、 Psychological feeling of color.Different colors will give visitors different psychological feelings.
Red --- is an exciting color.The stimulating effect can make people feel impulsive, angry, enthusiastic and energetic. Green --- between cold and warm colors, it looks harmonious, quiet, healthy and safe. It matches with golden yellow and light white to create an elegant and comfortable atmosphere. Orange --- is also an exciting color, which has the effect of lightness, joy, warmth, and fashion. Yellow --- with happiness, hope, wisdom and lightness, it has the highest brightness. Blue --- is the most cool, fresh and professional color. It is mixed with white to reflect a soft, elegant and romantic atmosphere (like the color of the sky:) White --- has the feeling of white, bright, pure and clean. Black --- deep, mysterious, silent, sad, repressed feelings. Grey --- It has the feeling of moderation, mediocrity, gentleness, humility, neutrality and elegance.
A slight change in the saturation and transparency of each color will produce a different feeling.Take green as an example. Yellow green has a youthful and vigorous visual mood, while blue-green appears quiet and dark.
○ Principle of webpage color matching
1. Brightness of color.The color of the web page should be bright and easy to attract attention. 2. The uniqueness of color.Have distinctive colors to make people have a strong impression on you.(Refer to the section of standard color of website CI in the second chapter of design thinking) 3. Color suitability.That is to say, the color is suitable for the content and atmosphere you express.For example, pink reflects the flexibility of female sites. 4. Color association.Different colors will have different associations. Blue thinks of the sky, black thinks of the night, red thinks of happy events, etc. The choice of color should be related to the connotation of your website.
○ The process of mastering web page color
With the accumulation of web page production experience, we have such a trend in using color: monochrome ->colorful ->standard color ->monochrome.At the beginning, because of the lack of technology and knowledge, we could only produce simple web pages with a single color;After having a certain foundation and materials, I hope to create a beautiful web page and stack the best pictures and colors I have collected on the page;But after a long time, I found that the color was disorderly, and there was no personality and style;Reorient your website for the third time, choose your own color, and the launched site is often successful;When the final design concept and technology reach the peak, it will return to simplicity, and a simple and beautiful site can be designed with a single color or even non color.
○ Web page color matching skills When the article was written here, some anxious netizens wanted to ask: "What color is good to match? Can you recommend several color schemes?" Don't worry, here is a skill that can help you quickly become a master of color matching:)
1. Use one color.This refers to selecting a color first, and then adjusting the transparency or saturation (in a colloquial way, it is to lighten or deepen the color) to generate new colors for web pages.Such pages look uniform in color and layered.
2. Use two colors.First select a color, then select its contrast color (press ctrl+shift+I in Photoshop).This is how my homepage is defined in blue and yellow.The whole page is rich in color but does not spend a little.
3. Use a color system.In short, it is to use a feeling of color, such as light blue, light yellow, light green;Or soil yellow, soil gray, soil blue.The method of determining color varies from person to person. I press the foreground color box in Photoshop, select "Custom" in the pop-up color picker window, and then select "Color Library":)
4. Use black and one color.For example, the bright red font with the black border feels very "jumping".
In web page color matching, the taboos are: 1. Don't use all colors, try to control within three colors. 2. The contrast between the background and the previous text should be as large as possible (never use complicated patterns as the background), so as to highlight the main text content.
Well, that's all for Ajie today. In addition, The Open Road website provides you with a basic page color matching table, which is very valuable information. Please save a page!
Next time we will continue to discuss "fonts and tables". If you have good experience, please write!
Hello, everyone. Today, we will continue with the eighth lecture in the section of thinking about web design.Last time, we discussed the layout and color matching of home page design. Today, let's talk about fonts. ● The setting of font is the first difficulty for novice web page creators.How to control the font size and how to remove the underline of the hyperlink font are the most frequently asked questions in netizens' letters.OK, let's thoroughly study all aspects of fonts: ○ Character set setting.
When viewing the source code of the html file, we can often
There is a code between and: What does this code do?Can I delete it? In fact, this is a meta tag setting statement, which is for browsers.Its function is to tell the browser that this HTML file is made using the gb2312 character set.When the browser reads this code, it interprets and translates the original code of the web page with the gb2312 character set, and then we can see the correct web page.So this meta statement is very important. Try not to Delete. Gb2312 is the most familiar simplified GB code, and the English is iso-8859-1 character set.Other character sets include BIG5, UTF-8, Shift JIS, EUC, KOI8-2, which are used for different font displays. ○ Use of fonts. In the web page, the definition statement of font is:display text Arial is the name of a font. The default browser defined standard fonts are Chinese Song typeface and English times new Roma font.That is, if you do not set any fonts, the web page will be displayed in these two standard fonts.At the same time, the two fonts can also be displayed correctly in any operating system and browser. Windows also comes with more than 40 English fonts and 5 Chinese fonts.These fonts can also be freely used and set in the web page.All browsers using the Windows operating system can display these fonts correctly, but in other operating systems, such as Unix, they cannot display them correctly. If you need to use a special font to reflect your style, how can you let people really see your design page?The solution is to use pictures. Instead of using this font, use pictures to ensure that all people see the same page.○ Font style. There are four font styles: regular, italic, bold, and bold italic.The setting method is very simple, and Ah Jie doesn't talk much. ○ Font effect. This refers to the effect that can be directly displayed through the html language settings. The statements in html are set as follows: display text Where, overline refers to the overline effect.Other commonly used effects are: underline, uppercase, etc. ○ Font size control. The control of font size is the focus of this section. The default size of the general font is 12pt (pound). You can increase the text by 2pt with statements.We have mastered this method.Now the most popular small Chinese font size on the network is 9pt. How is it set?There are three methods: 1. Use the "Display Text" statement to set. Obviously, this method is very troublesome, and you must set the size for each paragraph of text. 2. Cascade style sheets with CSS.CSS is a component of DHTML, which can define the font display style and size of the entire page.It is a relatively simple method.For example, here you need to set the text size of the entire page to 9pt. Just add the following code to the sum of the html code between: Where FONT-SIZE: 9pt refers to the font size of 9 pounds 3. The second method has simplified many steps, but it is still not the ideal method, because you must place such a piece of code in the head area of each page, expanding the bytes of the file.Another major disadvantage of this approach is that if I need to change the font size of the entire site, I must change it page by page! Therefore, it is recommended to you that it is also the best method at present - external template file debugging. "External template call" means that you make the settings of css as a separate file and call it in each page.Once you need to modify the font size, just modify a. css file, and hundreds of pages will be modified at the same time.(This method is similar to subprogram calling, which is easy for netizens who have written programs to understand:) The specific method of calling is as follows:
(1) Copy the above css code into a mycss.txt file, and then modify the suffix to mycss.css (2) Insert between html files， Statement to call mycss.css (note that the path settings are correct) OK! ○ Setting of font hyperlink style. The color of the connection is usually set in the page, such as:
Where: link -- the color of the hyperlink Vlink -- visited hyperlink color Alink -- Active Hyperlink color The color is represented by rgb hexadecimal code. For example, red is # FF0000. It is also easier to set the style of web hyperlinks with CSS. See the following code
Just insert it into the head area of the html file.Link sets the color of hyperlinks;Visited is the color of hyperlinks visited;Active is the color moved by the mouse;Hover is the color when the mouse clicks."Text decoration: none" means to cancel the underline display of hyperlinks. There are more usages and techniques for setting CSS, such as setting different font sizes and hyperlink colors on the same page. Please learn about CSS expertise (you can go to Ajie's home page//pageone.yeah.netWe are not going to elaborate here. ● All aspects of font technology have been introduced above.There is no mature theory about the design and use of fonts at present. The following are some principles for the use of fonts in web page design for reference only: 1. Do not use more than three fonts.Too many fonts are messy and have no theme. 2. Don't use too large words.Because the layout is precious and limited, the crude large font cannot bring more information to visitors. 3. Do not use flashing text.Don't use flashing text if you want the viewer to stay longer. 4. In principle, the font of the title is larger than the text, and the color should also be different.
● Attachment: English font resources //www.pambytes.com //www.freestuff101.com/Fonts //www.typearound.com/mainfont.html //205.177.231.33/sofontes/us/pc_us.htm I will write about fonts here today. If you have any good suggestions or comments, please write[email protected]。In the next chapter, we will continue to discuss the design of tables.
Table is an important element of the page and the main means of page layout.Although the layer in DHTML can also realize the free positioning of web page elements, the table is obviously more convenient to edit and modify.Mastering and using various attributes of tables can make your pages look pleasing to the eye.
Source Statement:This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China.The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
Thank you very much for visiting our website.Please read all the terms of this statement carefully before you use this website.
1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.
2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.
3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.
4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!
Thank you very much for visiting our website.Please read all the terms of this statement carefully before you use this website.
1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.
2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.
3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.
4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!
