1. Locate your website theme and name 2, locate your website CI image 3, determine the barum of the website and the section 4, determine the directory structure and link structure of the website 5, determine the overall style and creative design of the website 6, the design of the home page 7, the principle of layout of the layout 8, the principle of the page color match 9, the font setting 10, the application of the table "
I am honored to discuss problems about website design with everyone here. At present, various tutorials on web pages on the Internet have been quite, which can easily learn the latest technology and techniques. However, there are few articles about the design, such as the design, such as the implementation of the design, the determination of style, development strategy, and technical screening. Many netizens often have good materials, but they have no good expression. Encourages from the Somo Moderator, Abie has organized some web design experience. Here to communicate with you, it is also a throwing brick, hoping to get your correct, if you have good suggestions and experience, please send me Ajie@soim.com, thank you first!
Website design, contains very much. Most of the two aspects:
On the one hand, the design of the pure website itself is such as text typography, picture production, graphic design, three-dimensional stereo design, static silent graphic, dynamic sound image, etc .;
On the other hand, the extension of the website, including the position of the website, the positioning, intelligent interaction, production planning, image packaging, promotional marketing, etc.
These two aspects complement each other (feel a bit like writing syndrome papers :), add the rapid development of network technology, it is impossible to propose an absolute correct and authoritative design idea. It is difficult to summarize it in an article. Abie According to the idea of building a website, the experience of designing the website for a few years into a series of "lectures", telling you (note: I will not tell a certain technology or production skills, focusing on thinking ) I hope to give you some help. The following is a general outline:
1. Locate your website theme and name; 2. Locate your website CI image; 3. Determine your column and section; 4. Site style creative design 5. Structure and link structure of the website 6. Design of the homepage 7. Tips for layout 8. Color match 9. Effects and speed 10. Conside by the vision 11. Sinerid 12. Construction completion and launch time 13. Interactivity and affinity 14. Consider different Browser and resolution 15. Font settings and table nested 16. New technology Applications 17. Design your Banner and Location 18. Statement text - Integration into feelings 19. Suggestions on the website design beginners
The above is the outline of this series "article, which will change according to the actual writing situation. One one per week. Before we start, first clarify the few premise:
One. Website design and website production. We say that the website "design" rather than the website "production", the difference is that the design is a thinking process, and the production is just the performance of the thoughts. A successful website first requires an excellent design and then supplementally produced. The design is the core and soul of the website, and an identical design can have a variety of ways of making performance.
two. We said that "Website" refers to a practical site with a certain topic and a clear purpose, does not include pure express classes or plain textbook sites.
three. In the article, some specific sites may be illustrated or reviewed. First of all, Akie does not exist "suspect" for any site.
Ok, talk less, we entered the topic:
Locate your website theme and name
Design a site, the question first encountered is to locate the topic of the website.
The so-called theme is the subject of your website. The website on the Internet is a misery, dazzling. As long as you want, you can make it. Below is the top 100 "PC Magazine," PC Magazine, the top 100 "top 100" top 100 "topics of famous websites in the United States, have some reference value for us. Category 1: Online Job Search Category 2: Online Chat / Instant Information / ICQ Episode 3: Online Community / Discussion / Mail List Categories 4: Computer Technology Categories 5: Web / Website Development Episode 6: Entertainment Site Section 7 Category: Travel Episode 8: Reference / Information Episode 9: Home / Education Episode 10: Life / Fashion
Each major category can continue to be divided, such as the recreational class is divided into sports / movie / music, music can be divided into MP3, VQF, RA according to the format, divided into classic, modern, rock, etc. All of the above are just the most common subject, there are many major, alternative, unique subjects, such as traditional Chinese medicine, tropical fish, weather forecast, etc., and each subject contact and cross-integrated combination can produce new topics, such as tourism Forum (Travel Discussion), Classic Incoming Play (Football Video) According to this, the subject matter can be thousands, you will not repeat it for the subject, it is difficult to choose, it is troubled :)
For the choice of theme, my suggestion is:
1. The subject is small and fine. Small positioning and content. If you want to make a Bangongguan site, put all the things you think is above, then often, it is willing to violate, giving people the feeling is that there is no theme, no feature, but there is a lot of skin, because you don't There may be so much energy to maintain it. The biggest feature of the network is new and fast. The current most popular personal homepage is updated every day or even a few hours. The latest survey results also show that the "theme station" on the Internet is more favorite than the "Wanquan Station", which is like a store and department store. If I need to buy something, I will choose a special buy shop. Again, my netizen KK hopes to make literary themes, but literature also includes many of the content, novels, poetry, prose; there are science fiction, martial arts, reasoning; Abie makes a little understanding of his good and think The main content to be provided, finally position the subject matter in online literature, delete some of the original literary works, focus on expanding and organizing network literary works. After the website is launched, it is very fond of everyone.
2. The subject matter is best for you to be good at yourself or love. For example: You can build a programming enthusiast website for our programming; interest in football can report the latest battle, star dynamics, etc. In this way, it will not feel boring or force. Interest is the driving force of the website, no enthusiasm, it is difficult to design out outstanding works.
3. The subject matter should not be too high or the target is too high. "Too Oil" refers to it everywhere, everyone has the subject matter; such as software download, free information. "Target too high" means that there is already very good, very famous sites on this subject, you have to exceed it. Unless you are determined to compete and have a strength competition and exceed it, remember that only the first first in the Internet, people often remember the best website, the second third, the impression will be too much.
OK, if you already have a wonderful idea, then we start a name for the website. (Oops, don't kick me!) You may think that the name is not related to the design of the website, and Abie is wasting here. In fact, the website name is also part of the website design, and it is a key element. As you can, "Computer Learning Room" and "Computer Home" are obviously the latter concise; "Midi Paradise" and "Midi Paradise" obviously the latter clarity; "Children's World" and "China Kindergarten" are obviously the latter atmosphere. We all know that Piiicup's Chinese name "Pentium", if it is changed to "run", there may be no such "fire" today :). As in real life, the website name is righteous, loud, easy to remember, and has a great impact on the image and publicity promotion of the website. The general recommendation is: 1. The name is positive. This "positive" is an Akie's own statement, in fact, it is necessary to legal, harmony, and feelings. Can't use reactionary, pornographic, superstitious, noun statements that harm social security.
2. The name is easy to book. According to the characteristics of the browser of the Chinese website, the website name is best used in English, do not use English or English mixed names unless the specific needs is required. For example: Beyond Studio and Beyond Studio, the latter is more intimate. In addition, the number of words in the website should be controlled within six words (preferably four words), such as "XX Pavilion" XX Design Room, four words can be used by idioms, such as "one network". There is still a good word, and the small logo size of the general friendship is 88x31, while the width of the six words is about 78, which is suitable for link typography of other sites.
3. The name must be characterized. The name is physically acceptable, and if it can reflect a certain connotation, give the browser more visual impact and space imagination. Here is a few Ajie think it is very good name: music avant-garde, web pages, Scorpio joys. At the same time as reflecting the subject of the website, you can click on your feature.
In short, positioning themes and names are the first step in designing a website and is also a very important part. If you can find a satisfactory name, spend a day, Turn the dictionary is also worth it :)
Locate your website CI image
The so-called CI is a borrowed advertisement term. (CI is the abbreviation of English corporate Identity), which means the image of a company through visual. The CI planning in real life is all, outstanding examples, such as Coca Cola, global unified symbols, color and product packaging, which give us an impression. More examples such as Sony, Mitsubishi, McDonald's, etc.
An outstanding website, like entity, as well as the overall image packaging and design. Accurate, creative CI design, the promotion of the website is more than half of the effect. After your website theme and name are set, it is necessary to think about the CI image of the website.
Some netizens should ask: I am not learning advertising majors, Ci may be too difficult to me: (Don't worry, Acie doesn't have to learn design professional. Just refer to my specific practices and experience, It's easy to get the CI of your website :)
1. Design the logo of the website (LOGO). First you need to design a sign (logo). Just like the trademark, logo is a concentrated expression of your site characteristics and connotations. Seeing Logo will let you read your site. Note: The logo here does not refer to the 88x31 small icon banner, but the sign of the website.
The logo can be Chinese, English letters, can be symbols, patterns, can be animal or characters, etc. For example, SOIM is using SOIM as a logo, Sina uses letters Sina eye as a sign. Sign design creativity is from the name and content of your website. (1). Website representative characters, animals, flowers, can be used as a designed blueprint, plus cartoon and artistic, such as Disney's rice mouse, Sohu cartoon fox, basketball shark.
(2). Website has professionalism, which can be used as a sign of items in this major. For example, the Chinese bank's copper plate symbol, the steering wheel sign of Mercedes.
(3). The most common and simplest way is to use the English name of your website. With different fonts, the alphabetic deformation, the combination of letters can easily make their own markers.
2. Design the standard color of the website. The first impression of the website is from the visual impact, and the standard color of the website is quite important. Different color matching produces different effects and may affect the emotions of visitors.
"Standard Color" refers to the color of the website type and extension. Each actual example will understand: IBM's dark blue, Kensel's red bar, the red blue green block on the Windows window sign, makes us feel very pleasing, very harmonious. What do we feel if IBM is changed with green or golden?
In general, a standard color of a website is not more than 3, too much is dazzling. Standard Colors To use the logo, title, main menu, and main color block of the website. Give people a uniform feeling. As for other colors, it is only used as embellishment and lining, and it is never to win.
In general, the colors suitable for web-specific colors are: blue, yellow / orange, black / gray / white three series colors. (Note: About the specific method of color match, we will introduce the eighth article in this series).
3. Design the standard font of the website. Like standard colors, standard fonts refer to unique fonts for flags, titles, main menus. Generally, our web page default font is a Song. In order to reflect the "unique" and unique style, we can choose some special fonts as needed. For example, in order to reflect the professional use of a coarse, it can be used, and the design is beautifully used, and it can be referred to as a handwritten, etc. Of course, these are all the opinions of Abie, you can choose a more appropriate font based on the connotation expressed by your website. At present, there are twenty-three kinds of Chinese characters. There are nearly 100 kinds of English characters. There are many special English art fonts on the Internet. It is not difficult to find a satisfactory font :)
It should be described: using a non-default font that can only be in the form of a picture, because it is likely that the browser's PC is not installed in the PC, then your hard design makes it!
4. Design the propaganda slogan of the website. It can also be said to be the spirit of the website, the goal of the website. Use a word or even a word to highly summarize. Similar to advertising gold sentences in real life. For example: "The taste is great"; Meswell's "good things and good friends are shared"; Intel's "give you a pentium heart".
The above four aspects: flag, color, font, slogan, is a key to establishing a CI image. It is exactly the site's surface article, design and complete these steps. Your website will be replaced, and the overall image has an improvement. The image said: You change from a rustic farmers into a white-collar worker in a suit. (Note: We only designed CIs in a flat static, and there is no introduction of sound, three-dimensional stereo.)
Ok, I read the above introduction, you should have a preliminary concept on the website CI. Maybe not very clear, because those truths are too abstract, you may need some actual, more vivid examples. Abie will modify some instances at the same time on its homepage. In the next section, let's discuss "Determine the section of the website", welcome to participate, thank you! Determine the barum and section of the website
"Design Thinking" series, start writing the third article today. Abie is not a professional web designer, but Abie will do our best to write this series of articles, and tell you the experience and experience in your own practice process, I hope to give you a little gain, a little inspiration. The views listed in the article have different opinions. Welcome to the letter to discuss, let's send ajie@soim.com, thank you.
We learned the CI image of the website theme and establish the website in the previous two articles. Is the following to enter a substantive design and production phase? The answer is: can't. Experience tells us that the establishment of a website is better than writing an article, first to form a good outline, the article can be clear, the level is clear; it is also a high-rise building, first design a frame drawing, in order to make the building structure reasonable.
Beginners (including myself :-), the most important mistake is: Determining the subject, start making it immediately. When you have finished production, I found that the website structure is unclear, the catalog is a population, and the content is a piece of Western. As a result, it is quite difficult to expand and maintain the website, but your website may waste it in this halfway, worse: you lose your confidence and interest in making homepage!
Therefore, we must consider the following three aspects before using the page:
1. Determine the column and section; 2. Determine the directory structure and link structure of the website 3. Determine the overall creative design of the website
Today we first discuss "Determine the list of websites and the section".
After the subject of the website is determined, I believe that you have collected and organized many related information content. You must think that these are the best, definitely attract netizens to browse the website. But do you have the best, most attractive content in the most prominent position? Have you made a good thing in the layout of the substance?
I have seen many of the columns of the home page (main menu) is not the case. For example: There is a site that provides an animated material as the theme. Its master is: about the webmaster, this site navigation, animated treasure house, this site forum, this site message book, contact the webmaster. The website is written on this website and the copyright declaration (actually set this site as the first word). The most important, the most attractive animated material accounts for 1/6 in the master, and the word on the home page is not mentioned. I think that even if this site does have a lot of, beautiful animated material, it is difficult to attract the browser to continue to explore.
The essence of the column is the outline index of a website, and the index should explicitly display the body of the website. When you have a column, you should carefully consider it. The general website column is arranged to pay attention to the following aspects:
1. Keep remember to be tight of your theme!
The general approach is to classify your topic to classify and use them as the website of the website. For example, the column can be divided into animal animation, sign animation, three-dimensional animation, cartoon animation, etc., indicating the most recent updated animation on the home page. Remember: The number of theme columns takes an absolute advantage in the sum column, and such a professional, the theme is prominent, and it is easy to impress people.
2. Set up a recent update or website guide section
If your homepage does not arrange the layout recently updated content information, it is necessary to set up a "recent update" section. This is to take care of the common visitors and make your homepage more user-friendly. If your home page is huge (more than 15MB), there are many hierarchies, but no search engine in the station, it is recommended that you set up the "Ben Guide" section. Can help beginners quickly find what they want.
3. Set a column that can communicate two-way communication
No need there are a lot, but must have. For example, forum, a message, an email list, etc., you can let the viewer leave their information. Some surveys show that the site that provides two-way communication is more affinity than simple sites with a "email me".
4. Set a download or common question to answer the column
The network is characterized by information sharing. If you see a large amount of excellent valuable information, you know you can download it once, not a page browsing the deposit. "Put your heart" set a data download column on your own homepage, you will get everyone's favorite. Some sites are in order to advertise the display, an article is also divided into a few pages, I think soon, I will eliminate the decline in the visit (personal opinion :). Also, if your site often receives the issue of netizens about a problem, you'd better establish a list of common questions to answer, which is convenient for netizens, can also save yourself for more time to learn.
As for other auxiliary content, such as about this site, copyright information, etc., may not be placed in the main column, so as not to dilute the subject. Summarize the above points, we have to pay the column, you need to pay attention to:
● To remove columns with the topic as much as possible ● Column of the most valuable content as much as possible ● As far as possible, visitors' browsing and query
The above is the column, let's look at the section. The edition is more than the concept of the column, and each section has its own column. For example: NetEase site is divided into news, sports, finance, entertainment, education and other layers, each of which has its own master. The general personal site content is small, only the master (main menu) is enough, no need to set up the block. If you don't think it is necessary to set the section, you should pay attention 1. There should be relatively independence in each section. 2. Edition blocks must be associated with each other. 3. The content of the section is to surround the subject. Regarding the section, mainly the problem of large ICPs such as portal sites need to consider, and Abie will not be discussed here.
Determine the site's directory structure and link structure
The last story says: We must consider the following three aspects before making the webpage:
1. Determine the column and section; 2. Determine the directory structure and link structure of the website.
I. Directory structure of the website
The directory of the website refers to the directory created when you build a website. For example, the root directory and Images subdirectory are created by default when establishing a website with FrontPage98. The structure of the catalog is an easy to ignore the problem, most webmasters are unplanned, freely create subdirectory. The directory structure is good, there is nothing to feel on the viewer, but for the upload maintenance of the site itself, the future expansion and transplant have an important impact. Below is some suggestions for establishing a directory structure:
● Do not store all files under the root directory.
Some netizens put all the documents in the root directory for convenience. The adverse effect caused by this is:
1. File management confusion. You often can't figure out which files need to be edited and updated, which useless files can be deleted, which are associated files, affecting work efficiency.
2. The upload speed is slow. Server generally creates a file index for the root directory. When you put all the files in the root directory, then even if you only upload a file, the server also needs to retrieve all the files again and create a new index file. Obviously, the greater the amount of the file, the longer the waiting time will be. So, give you the recommendation: minimize the number of files stored in the root directory. ● Create a subdirectory by column content.
The establishment of the subdirectory is first established according to the main menu. For example: webpage tutorial sites can establish corresponding catalogs, like flash, dhtml, javascript, etc.
Other secondary columns, similar to's new, friendship connection, requires a separate subdirectory that can be updated frequently. Some relevance is strong, there is no need to update the column, for example: About this site, about webmaster, site experience, etc. can be merged in a unified directory.
All procedures are generally stored in a specific directory. For example: The CGI program is placed in the CGI-bin directory. Easier maintenance management. All the content you need to download is also best placed in a directory.
● Establish an independent images directory in each home directory.
By default, there is an images directory in a site root directory. When you first start learning the home page, Alie habits are stored all images in this directory. But later discovered that it is quite troublesome when I need to pack a master bar for download, or to delete a column. After practical discovery: Establishing a separate images directory for each primary column is most convenient to manage. The image of the root directory is just a picture that is used to put the home and some subsis columns.
● Don't be too deep at the level of the directory.
The level of the catalog is recommended not to exceed 3 floors. The reason is very simple, and it is convenient for maintenance management.
Others need to pay attention to:
1. Do not use Chinese catalogs; networks are unordance, using Chinese directory may have difficulty in displaying the correct display of the URL.
2. Do not use too long directories; although the server supports long file names, too long's directory is inconvenient.
3. Try to use a clear directory; in the above example, you can use Flash, DHTML, JavaScript to create a directory, or build a directory with 1, 2, 3, but which one is more clear, more convenient for memory and management? Obviously the former!
With the continuous development of web technology, the use of databases or other background procedures automatically generates web pages increasingly common, and the directory structure of the website will have to fly to a new structure.
Second. The link structure of the website
The link structure of the website is a topological structure that is linked between the page. It is based on the directory structure, but can cross the directory. The image said: Each page is a fixed point, and the link is a connection between two fixed points. One point can be connected to a point or multiple points. More importantly, these points are not distributed on a plane, but existing in a stereoscopic space.
● The purpose of our research site link structure is: Use the least link to make browsing the most efficient.
In general, there are two basic ways to establish a link structure:
1. Tree link structure (one-to-one). A directory structure similar to DOS, the home page pointing to the first level page, the first-level page link points to the secondary page. The three-dimensional structure looks like dandelions. When such a link structure browsses, the primary level is entered, and the first level exits. The advantage is clear, visitors clearly know where they are, will not "fans". The disadvantage is that the browsing efficiency is low, the sub-page under one column to the sub-page under another column must be wrapped in the home page.
2. Star-shaped link structure (a pair). Links to web servers, each page is connected to each other. Steel ball on the oriental Pearl TV tower. The advantage of this link structure is to browse, and you can reach your favorite pages. The disadvantage is that there are too many links, it is easy to make the viewer lost, can't understand what is your location, how much content is seen. Both basic structures are only ideal, in the actual website design, the two structures are always mixed. We hope that the viewer can easily quickly reach the page you need, and you can clearly know your location. Therefore, the best way is:
● Tree link structure between the top page and the first-level page, with a tree link structure between the 1st and secondary pages.
for example. The page structure of a news site is as follows:
-------------------------------------------------- - First class page secondary 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, the financial news page, the entertainment news page, the IT news page is a star-shaped link, which can be clicked with each other and arrive directly. The financial news page and its sub-page are a tree-shaped connection. After browsing the Financial News 1, you must return to the financial news page to view IT news 2. Therefore, there is a site to open the secondary page directly with the new window (POP UP UP UP UP UP UP UP Up Windows).
Note: We are all exemplified by the above three-level page. If your site content is huge, classified details, you need more than three levels, then you recommend that you display the navigation bar in the page, which can help the viewer clarify the location of yourself. That is, you often see the top of many websites, like this: "Your present position is: Home-> Financial News -> Stock Market Information -> Shenzhen Stock &> Deep Development
Regarding the design of the link structure, it is very important in the actual web creation. What kind of link structure is used directly affect the layout of the layout. For example, where your main menu is placed, if each page needs to be placed, you need to use a separate framework, whether you need to add a link to the home page. After the connection structure is determined, then the effect and form of the link begins, is it using a drop-down sheet or a DHTML dynamic menu, and the like.
With the promotion of e-commerce, the increasing intense website competition, the requirements for link structural design are not limited to convenient and fast browsing, pay more attention to personalization and correlation. For example, in a love baby theme website, on the 8-month baby's nutritional problem page, you need to join 8 months of health problems link, intellectual training link, or links related to milk powder promotion, a book, a toy the link to. Because parents are not likely to find information about 8 months baby, they may leave the website after finding the problem. How to retain visitors as much as possible, is a problem that the website designer must consider in the future.
Telling here, Abie suddenly felt that he was very powerful, it would summoned such a big set of theory :) What, skin thick? Maybe, so many masters have not been speaking! I have a comment, please let it be ajie@soim.com
Next time we continue to discuss "Determining the Whole Style Creative Design of Website".
Determine the overall style and creative design of the website
The overall style of the website and its creative design are the most difficult to learn from the webmasters. It is difficult to refer to and imitate without a fixed program. Give you a theme, any two people are impossible to design exactly the same website. When we said: "This site is very cool, very personality!" So, what makes you feel COOL? What is the difference between it and a general website? This article tries to explain the text: 1. What is the style? How to establish a website style? 2. What is idea, how to create ideas?
● Style is abstract. It means that the overall image of the site gives the browser's comprehensive feelings.
This "overall image" includes the Site CI (Sign, Colors, Font, Slogan), Layout Layout, Browsing, Interactive, Text, Tone, Content, Existence, Site Honor, etc. For example: We feel that Netease is easy, Disney is vivid, IBM is professional. These are all different feelings that websites have left.
The style is unique, it is where the site is different from other websites. Or colors, or techniques, or interactive, allowing viewers to clearly distinguish this is your site unique. For example, the unique framework of the new century network (www.century.2000c.net), NetEnet wallpaper station, even if you only see one of the places, you can tell which site is.
The style is human. Through the appearance, content, text, communication through the website, you can summarize the personality and emotions of a site. It is Wen Wen Confuciors, which is the enthusiasm, is lively and vulnerable. You can use people's character to compare the site in the poetry.
The difference between a style website and the ordinary website is that the normal website you see is just a pile of information, you can only use rationality to describe, such as the size of the information, the browsing speed is slow. But after you have visible a style, you can have a deeper sense of emotional understanding, such as a taste, amiable, is a teacher, a friend.
I have seen the above description, what may I still have a vague style. In fact, the style is a word: unique!
How to establish a website style? We can divide these steps:
First, the confident style is based on valuable content. A website has a style without content, just a burst of embroidered pillows, like a person who is arrogant but not knowing. You must first guarantee the quality and value of the content. This is the most basic, no need to quo.
Second, you need to completely figure out what you want to give up the impression of people. It can be taken from these aspects:
1. If you only use a sentence to describe your site, it should be: _____________
Reference answer: Creative, professional, have (technology) strength, beautiful, impact
2. Thinking of your site, you can think of the color is: ________________
Reference answer: passionate red, fantasy sky, smart golden
3. Think about your site, the picture that can be associated is: ________________
Reference answer: a morning photo, a Ferrari sports car, crowded square, grocery store
4. If the website is a person, his personality is: ________________
Reference answer: Mature middle-aged people, wild, unrestrained cowgirl, confidently entrepreneur
5. As a webmaster, you want to give people an impression that: ___________________ reference answer: dedication, careful investment, deep, responsible, pure, straight, ladies
6. Use a kind of animal to metaphor, your website is the most elephant: _________________
Reference answer: Cat (mysterious), eagle (gaze), rabbit (smart sensitive), lion (self-confidence)
7. The viewer thinks you and other websites are: __________________
Reference answer: I can trust, the fastest information, convenient communication,
8. The feelings of the browser and your communication are: ______________________
Reference answers: teachers and students, colleagues, friends, long children.
You can first fill in a answer, then let other netizens fill in. The result of the comparison will tell you: Your website is now gap, weakness and places that need to be improved.
Third, after the impression of its own website, started to build and strengthen this impression.
After the "quantification" of the second impression, you need to further find things that have the most distinctive characteristics, which is the best thing to reflect site style. And focused on the characteristics of the website, promoted. For example: Review the name of the website, the domain name, and whether the name is in line with this personality, whether it is easy. Review whether the standard color of the website is easy to think of this feature, whether it can reflect the personality of the website, etc. Specific practice, no formation. I have some reference here:
1. Put your logo logo, as much as possible on each page. Or header, or footer, or background.
2. Highlight your standard color. The link of the text, the main color of the picture, the background color, the border, the border, etc., as many colors match the standard color.
3. Highlight your standard font. In key titles, menus, and unified standard fonts.
4. I want a Lang Lang to propaganda slogan. Do it in your banner, or put it in your eye, tell you that your website is ...
5. Use unified tone and people. Even more people work together, let the reader feel that the same person is written.
6. Use a unified picture to handle the effect. For example, the direction of the shadow effect, the thickness, and ambiguity must be the same.
7. Create a symbol or icon for your site. For example, in a link before the link, you can use it, .. ☆ ※ ○ ◇ □ △ → (see yourself in your location) and so on. Although it is very simple, it gives people a different feeling, (why didn't I think?)
8. Use the lace, line, point
9. Display your website's honor and successful work.
10. Tell your netizens about your true story and ideas.
The formation of styles is not once positioned. You can continue to strengthen, adjust, and modify in practice. Until one day, netizens write a letter to tell you: "I like your site, because it is very style!"
● Creative (IDEA) is the key to survival of the website. This is believed that everyone has already recognized. However, as a web designer, the most upset is there is no good creative source.
Note that creativity here is the overall idea of the site, (because this creativity produces this site, or the same content, the idea of the idea), the flat design creative of the web page will introduce it in the back layout.
What is creative, how to create creativity?
Creativity is fascinating, wonderful, unresolved; creativity is the idea of capturing, is a true trick that created .... These speeches have said some characteristics of creativity, essentially, creative is a special the way.
For example, WebDesigner (web designer), we will write the E letter under: WebDesiger, how is it, this is actually a creative!
Creativity is not the inspiration of the genius, but the result of thinking. According to James, a professor of American advertising, the process of creative thinking is five phases.
1. Preparation - The information collected by the Institute. According to the old experience, inspire new ideas; 2. Incubation - the information is chewed, so that the awareness is free to develop, any combination; 3. Revelation - the development of consciousness and combine, Creativity; 4. Validation period - amendment will be corrected; 5. Formation - design and making web pages will be more specific.
Creativity is to re-combine existing elements.
For example, the network is combined with the phone to generate an IP phone. From this point, anyone, including you and me, you can create different creativity. Moreover, the more information is, the easier it is. It is better than the kaleidoscope, the more the glass sheets in the cartridge, the more patterns presented. If you have your heart, you can find the most creativity on the Internet comes from the combination of real life (or virtual reality), such as online bookstores, e-communities, online auctions. Do you think of a better idea?
Creative thinking is the most commonly used Lenovo, which provides 25 Lenovo clues for website creativity:
1. Turn it down 2. Reduce it 3. 4. Make it a longer 5. Make it flash 6. Put it into music 7. Combine text music drawing 8. Make it a young 9 Let it repeat 10. Make it into three-dimensional 11. Participate in the competition 12. Participate in bets 13. Change part 14. Split it 15. Make it Romantick 16. Make it speeds 17. Add a scented 18. Make it look 19 Make it symmetrical 20. Put it to the child 21. The price is lower 22. Give it a nickname 23. Package it 24. Free 25. All extensions of the above ----------- - (Reprinted from Fan Zhiyuan "Advertising Production")
It is necessary to mention that the purpose of creativity is a better promotion website. If the idea is very good, it is meaningless to the development of the website, we will wear a high heel shoes for the dairy, then we would rather give up this idea!
There are still many things about style and creativity. Interested netizens can find some book reading in some advertising design. I hope this article can help you have an update and improvement to your website. Thank you!
Home design
After we fully consider the columns, link structures and overall styles, we can formally do the home page.
There is such a saying: "Good start is half of success".
The same is true on the website, the design of the homepage is the key to the success of a website. People often see the first page has a holistic feeling for your site. Is it able to encourage the visitor to continue to click on, can attract the viewer to stay in the site, complete the "skills" designed by the home page.
Therefore, the design and production of the homepage is absolutely paying attention to and spending. Abie's experience is: General Home Design and Production Accounting for 40% of the entire production time. You would rather spend more time in the early days, so as not to make it again, it will be the most wasteful thing.
Here, insert a "cover" problem first. The cover means there is no specific content, only one logo click to enter or only a simple graphic menu.
Do you need to design a "cover" for the site? Abie's personal point is: no need!
Unless you are a very art-class site, or can be confident that the content can attract the viewer to further click the entry site, otherwise, the home page of the cover will not give you the benefits of your site. We need to browse the fast and valuable information. If you wait for the XX minutes, only a rough "Enter" icon is displayed, then no one will wait patiently to go to the next page. Because of the importance of the home page, Abie will focus on 8 articles to carefully discuss all aspects of the design of the home page. The approximate outline is as follows:
○ Tips of the layout ○ Color match ○ font settings and tables Nested ○ Subtle Substance ○ Considering Different browsers and resolution ○ Design Your Banner and Location ○ Meta Tag Important ○ Home Design Small suggestion
Today, it is just a primer for the home page design. Let us approach the steps of the home page design.
Home, fundamentally is the directory of the whole station, is an index. But it is just that the Lu Lu is obviously not enough, how do you design a homepage? The general step is:
● Determine the functional module of the home page ● Design the layout of the home page ● Details of processing technology
One). Determine the function module of the home page.
The content module of the homepage refers to the main content and functionality you need to implement on the home page. The average site needs such a module:
Website Name (LOGO), Banner, WHAT, Search (Search), Links, Mails, Counters, Copyright .
Which modules are selected, which features are implemented, whether you need to add additional modules to be the first page design, first, you need to be sure.
2). Design home page
After the function module is determined, the layout of the home page is started. Just like a wooden, each module is a unit building block, how to fight out a beautiful house, just look at your creativity and imagination.
The best way to design the layout is to find a white paper, a pen, first out your ideal sketch, then use the web page to make software.
3). Details of processing technology
Abie often received the letter problem is: How do I make the homepage remain not deformate at different resolutions, how can I seem to be too ugly in IE and NC, how to set fonts and links .... Wait, Abie will introduce you in the following articles.
Home design is the difficulty and key to the entire website design, and Abie hopes to communicate with everyone, summarizing a more reasonable and easy-to-learn design method, which makes us easier to complete the design and production of the entire site. If you are willing to share your experience and everyone, please let me know Ajie@soim.com, thank you!
Principle of layout layout
The first step in the design home is the design of the top layout.
As with the traditional newspapers and magazines, we look at a newspaper, a magazine to make a layout. Although the development of dynamic web technology has begun to tend to learn scene screenwriters, fixed web layout design is still necessary to learn and master. The basic principles are common, you can understand the point, and give it a contrast.
The layout refers to a full page seen by the browser (you can include a frame and layer). Because each person's display resolution is different, the size of the same page may appear 640 * 480 pixels, 800 * 600 pixels, 1024 * 768 pixels and other different sizes.
The layout is to discharge pictures and text to different locations in the page that best browsing. You may notice: "The most suitable" is an uncertain adjective, what is the most suitable? Sorry, Abie can't also give you a complete correct answer. It is better than some people hope that the secret of success is, the successful person can only suggest what method you use, what way is the easiest to succeed, and it is impossible to have a successful "secret" tell you. We are in designing thinking of the series of articles, the overall creativity of the site is also a creative problem, but it is easy to have a regularity than the overall creativity. Let's first understand the steps of layout layout:
A draft
The new page is like a blank paper, there is no form, framework, and conventionally, you can play your imagination as much as possible, draw the "sight" you think (we recommend you with a white paper and one Support pencil, of course, is also used as a picture software Photoshop or the like. This belongs to the creation stage, does not pay attention to delicate and nature, do not have to consider the details, only the creative contours of the rough lines. Do a few more pictures of you, and finally select a satisfactory script as a continued creation.
Two. Rough layout
On the basis of the draft, you determine that the function module you need to place is arranged on the page. (Note: Function Module We have mentioned in "Home Design - Person", mainly including website logo, main menu, news, search, friendship link, advertising, mailing list, counter, copyright information, etc.). Note that we must follow the principles of highlighting, balanced harmony, put the most important modules such as website logos, main menu, and the most prominent position, and then consider the discharge of the secondary module.
Three.
Fine the rough layout is refined and avattern. (Relying on your wisdom and experience, knocking on the side of the side of the association can we make a creative layout.)
In the process of layout, the principles we can follow are:
1. Normal balance - also known as "well". More points, upper and lower control forms, mainly emphasize order, can achieve the effect of setting up honesty, trust. 2, abnormal balance - ie non-comparison form, but also balance and rhythm, of course, is unbearable, this layout can achieve emphasis, uneasiness, high-eye effectiveness. 3, comparison --- so-called contrast, not only using tips such as color, hue, etc., can also involve contrast in ancient and new and old, poverty and rich in content. 4, stare --- The so-called gaze is the use of the person's line of character, so that the viewer will follow the psychology to achieve the effect of the gaze page, generally more stars. 5, blank - blank has two effects, on the one hand, expressed outstanding excellence on other websites, and on the other hand, it also represents the advantages of web level, this performance method is very effective. 6, try to use the picture to explain --- This method is especially effective for emotions that cannot be convinced in words, or use language that cannot be expressed. The contents of the picture explains more psychological factors that can be communicated to the browser. ------------ (Reprinted from Advertising Master Fan Zhiyu "Advertising Production")
The above design principles, although boring, but if we can understand and live in the page layout, the effect is bigger. such as:
○ On the white background of the web, you can add some color; ○ ○, can be connected in series with lines and symbols; ○ Too many words on the left, you can insert a picture to keep balance; Try the corner.
After a constant try and scrutiny, your web page will be bright :)
See the form of layout of our regularly:
1. "T" structure layout. The so-called "T" structure. That is, the top of the page is the horizontal bar website mark advertiser, the left side is the main menu, the layout of the content is displayed on the right, because the menu bar background teaches deep, the overall effect is similar to the English letters "T", so we call it "T" shape layout. This is a layout method for the most widely used in web design. (图)) The advantage of this layout is that the page structure is clear and the main second is clear. It is the layout method that beginners is the easiest to get started. The disadvantage is that the rule is turtle, if the details are not paying attention, it is easy to "see the taste".
2. "Port" type layout. This is a pictogram, that is, the page is generally up and down, there is an advertiser, the left is the main menu, the right side is a friendly connection, etc., the middle is the main content. (图 略)
This advantage of this layout is to make full use of layout, large amount of information (my home page belongs to this layout). A disadvantage is that the page is crowded, not flexible enough. There is also an empty out of the four sides, only the intermediate window type, such as Netease Wallpaper Station.
3. "Three" layout. This layout is mostly used in foreign sites, and there are not many domestic use. The feature is that the landscape of the page is divided into four parts, and most of the advertisements in the color block.
4. Symmetrical contrast layout. As the name suggests, take the left and right or up and down symmetrical layout, half of the dark, half light, generally used for design sites. The advantage is that the visual impact is strong, and the disadvantage is to make two parts of organic combination difficulties.
5.POP layout. POP leads from the advertising term, which means that the page layout is like a propaganda poster, with a beautiful picture as a page design center. Commonly used in fashion sites, such as elle.com. The advantage is obvious: beautiful attractive. The disadvantage is that the speed is slow. It is also worth learning as a layout.
The above summarizes the common layout on the network. In fact, there are many unique layouts, the key is your creativity and design. For the skill of the layout, you can provide four suggestions, you can scrutinize your own:
1. Strengthen visual effects 2. Strengthen the visibility and readability of the copy 3. Uniform visual 4. Fresh and personalized are the highest level of layout
The color of the webpage is one of the key to establishing a website image. Color match is a problem that netizens feel a headache. Background, text, icon, border, hyperlink ... What kind of color should be used, what color is best to express the ideal connotation? Abie is here to talk about some experience, I hope to inspire you.
Page color matching principle
First let's first understand the basic knowledge of some colors:
1. Color is due to refraction of light.
2. Red, yellow, blue is three original colors, and other colors can be used in these three colors. The color expression in the web page HTML language is to indicate the value of these three colors, for example: red is a color (255, 0) hexadecimal representation is (FF0000) White (FFFFF), we often see "BGColor = # ffffff" means the background color is white.
3. Colors are divided into two categories: color and color. Non-color refers to black, white, gray system colors. Color refers to all colors other than non-colored.
4. Any color has the properties of saturation and transparency, and the change in attributes produces different tone, so at least millions of colors can be produced.
What is the color or non-color? According to a professional research institution, it shows that the color of the color is 3.5 times black and white. That is, in general, the color page is more attractive than a complete black and white page. Our usual practice is: Main content text with non-colored (black), border, background, picture color. This page is not monotonous, and the main content will not be spent.
● Non-colored matching black and white is the most basic and simpler matching, white words black, and the black is very clear. Gray is universal color, can be matched with any color, can also help two opposite colors harmonious transitions. If you can't find a suitable color, try the gray, the effect is absolutely worse.
● Color match
Color thousands of measant, color match is our focus of our research. We still need further learning of some colors.
One. Color ring.
We will press "Red -> Yellow -> Green -> Blue -> Red" Overgradation, you can get a color ring.
The two ends of the color loop are warm and cold, which is a medium color. (As shown below)
Red. Orange. Orange. Huang. Yellow Green. Green. Green. Blue Green. Blue Blue Purple. Purple. Purple. Red | ___________ | | _______ | | _________ || | | | Warm neutral neutrality Department of neutrality
Two. The psychological feeling of colors. Different colors will give different psychological feelings of the browser.
Red - is a kind of exciting color. The irritation effect can make people have impulse, angry, enthusiasm, and vitality. Green --- is in the middle of the color of the cold and warm, looks peaceful, quiet, healthy, safe. It and golden, light white matching can produce an elegant and comfortable atmosphere. Orange --- is also a kind of exciting color, with a light, happy, warm, warm, fashionable. Yellow --- has happiness, hope, wisdom, and brisk personality, which is the highest. Blue --- is the most cool, fresh, professional color. It and white mix, can reflect a soft, elegant, romantic atmosphere (color of the sky :) White --- is white, bright, pure, clean. Black --- has deep, mysterious, silent, sorrow, depression feelings. Gray --- has dollar, ordinary, gentle, modest, neutral and elegant feelings.
Each color is slightly changed in saturation and transparency. Take green as an example, yellow-green has youth, strong visual artistic conception, and blue and green looks quiet and covered.
Page color matching principle
Various color. The color of the web page is bright and easy to compete.
2. The uniqueness of the color. There is a different color that makes everyone impressed with you. (Reflections on the design of the standard color section of the second website CI)
3. Color suitability. That is to say, the color and your expression are suitable. If you reflect the flexibility of the female site with pink.
4. Lenovo of color. Different colors will produce different associations, blue think of sky, black thinking of black night, red thinking about happy events, choose color to associate with your web page.
Process of web color master
With the accumulation of web production experience, we use this trend: monochrome -> colorful -> Standard color -> monochrome. At first, the technology and knowledge can only make simple web pages, color single; after having certain basic and materials, I hope to make a beautiful page, the best picture you collect, the most satisfied color is on page But a long time, but I found that color messy, no personality and style; the third repositioning my own website, choosing to take my own color, the site is often successful; when the final design concept and technology reach the peak, It is natural to return to true, with a single color or even non-color, you can design a simple and beautiful site.
Web page color matching skills
The article is here, and anxious netizen wants to ask: "What color is used to look at it? Can you recommend several color schemes?" Don't worry, there is a little skill here, you can help you become a ton master :) 1. Use a color. Here is to first select a color, then adjust the transparency or saturation, (saying that it will deepen color or deepen color, generate new colors for web. Such a page looks a collar unity and has a sense of level.
2. Use two colors. First select a color, then select its contrast color (press Ctrl Shift i) in Photoshop. My home page is confirmed by blue and yellow. The whole page is colorful but does not spend slightly.
3. Use a color system. Simply put is to use a feeling of color, such as light blue, light yellow, light green; or earth yellow, soave, soil blue. Determine the color method, each person is different, I am in the photo of the foreground color box in Photoshop, select "Custom" in the picker window jumped out, and then select it in the "color library" :)
4. Use black and a color. For example, the big red font is fed as a black border feels very "jumping".
In web color, taboos:
1. Do not use all colors, and control it within three colors. 2. Background and foregoing comparisons are as large as possible, (absolutely do not use the pattern of patterns to make a background) to highlight the main text content.
Ok, Today, Alie will tell you here.
Font setting
Hello everyone, the web design thinking column continues today. We last discussed the layout of the homepage design and color matching, today we will talk about the font.
● The font (font) is the first difficult point encountered by the pages. How to control the font size, how to cancel the ultra-linked font is the most information on netizens. Ok, let's completely study all aspects of the font:
Setting of character sets.
When viewing the original code of the HTML file, we can often see this code between the file header:
What is the role of this code? Can you delete it? In fact, this is the setting statement of the Meta label, which is to see the browser. Its role is to tell the browser: This HTML file is made from GB2312 character set. When the browser reads this code, use the GB2312 character set to explain and translate the web original code, and then we can see the correct webpage. So this META statement is very important, try not to delete.
GB2312 is our most familiar GB Simplified Code, English is an ISO-8859-1 character set. The other character sets such as BIG5, UTF-8, Shift-JIS, EUC, KOI8-2 are used for different font display, respectively.
The use of fonts.
In the web page, the definition statement of the font is: Display text where arial is a name of a font.
The default browser defined standard font is Chinese Song and English Times New Roma font. That is, if you don't set any fonts, the web page will be displayed in these two standard fonts. At the same time, two fonts can also be displayed correctly in any operating system and browser.
Windows has another 40 kinds of English fonts and 5 Chinese fonts. These fonts, you can also use and set up in the web page. All browsers using the Windows operating system can display these fonts correctly, but in other operating systems, such as Unix cannot be fully displayed.
If you need to use a special font to reflect your style, how do you let everyone really see your design page? The solution is: use pictures.
It is necessary to use this font to replace it with a picture to ensure that the page seen by everyone is the same effect.
Style of the font.
The font's style has four types: regular, ITALIC, bold, bold italic. The setting method is simple, and Abie is not more than Luo. The effect of the font.
Here, it refers to the effect that can be displayed directly through the HTML language, and the statement in the HTML is set to: Display text, OVERLINE refers to the upper line effect. Other common effects include: underline, Uppercase (capital), etc.
Font size control.
The control of the font size is the focus of this section.
The default size of the general font is 12pt (pound). Use the statement to increase the text by 2PT. We have already mastered this method. And now how the most popular small Chinese font size is 9pt, how is it? Three ways:
1. Use the "display text" statement to set. Obviously this method is very troublesome, you have to set the size for each text. 2. Stack the style sheet with a CSS. CSS is a component of DHTML that defines the font display style and size of the entire page. It is a simple method. For example, here you need to set the entire page text size of 9pt, as long as the following segment is added to the HTML code and between: where font-size: 9pt refers to the size of 9 pounds 3. The second method has been simplified. Many Steps, but still not the most ideal way, because you must place such a code in each page's HEAD area, expand the byte of the file. In addition, this kind of practice has a major disadvantage, that is, if I need to modify the font size of the entire site, I must change one page! So it is recommended to ultimately the best way to currently - the external touch board file call. "External touch board call" means that you make CSS's settings into a separate file, call it in each page. Once you need to modify the font size, just modify a .css file, hundreds of pages are also modified. (This method is easy to understand the netizens of a child program call. Insertion between HTML files
The statement calls mycss.css (note the settings of the path) OK! Font hyperlink style settings. Typically set up a connection in the web page, such as: LINK - HyperLink's color VLINK - Visited HyperLink (Accessible Connection) Color Alink - Active HyperLink (Current Active Connection) Color Color RGB's 16-encoding code indicates that red is # ff0000. Similarly, CSS can set the web super connection style, look at the following code A: Link {text-decoration: none; color: # 0000f} a: visited {text-decoration: none; color: # 000000} A: active {text-decoration: None; color: # ff0000} A: Hover {color: # ff0000} It is possible to insert it into the HTML file. Where the LINK is set to have a color of the hyperlink; Visited is the accessed hyperlink color; Active is the color of the mouse moves; Hover is the color of the mouse click. "Text-Decoration: none" means the underscore display of the hyperlink. About CSS settings There are more usage and techniques, such as setting different font size and hyperlink colors in the same page, learn about CSS's expertise (can go to Abie's home http: // pageone. Yeah.Net Review) We are not scored here. ● The above has been introduced in terms of technical various aspects. There is currently no mature theory. Below is the principle of fonts in several web designs, for reference only: 1. Do not use more than 3 or more fonts. There is too much font, there is no subject. 2. Don't use too much words. Because the layout is precious, limited, rough big fonts cannot bring more information to visitors. 3. Do not use non-splashing text. If you want the viewer to stay more for a while, don't use the flashing text. 4. In principle, the fonts of the title are large, and the color should also be different. ● Attached: English font resources http://www.pambytes.com http://www.frestuff101.com/fonts http://www.typearound.com/mainfont.html http://205.177.231.33/sofontes/us /pc_us.htm About fonts, I wrote here today, you have a good suggestion or opinion, please let us usually jIE@soim.com. Next chapter we continue to discuss the design of the form. The table of the table in the web page is the important element of the page, which is the main means of page version. Although the layers in DHTML can also achieve free positioning of web elements, the form is apparent to more convenient and modifications. Skilled and use the various properties of the table, you can make your page look pleasantly pleasing. This article will be divided into two parts detail the use of the table in web design. Includes the basic usage of the table and the attention of the table. 1. Basic usage of the table. The basic usage of the table believes that you are already very familiar. But in order to ensure the integrity of the article, Abie is here again. ● Table of HTML basic syntax ...
- Define table - Definition Table - Define Header - Defining Table Pictures (specific data of the table), for example:
123ABC
123ABC ● Parameters of Table Tags. The Table tag can contain the following parameters. Border Table Border Cellspacing The blank distance between the cell of the cellpadding table, the blank distance WIDTH table width (can be represented by% or specific data) Height Table, for example: 123ABC
123ABC ● Alignment of the table 1. Align in the table. Syntax: Where # can set the parameters: Left landscape left cENTER horizontal Right Right horizontal Top Portrait Top Middle portrait home Bottom portrait, for example:
ABC
ABC 2. The form is aligned within the page. If you need to use a text and emissively emissions, you need to use another parameter of the Table tag: for example:
Where # can be set to Left (left), Right (right)
123ABC The text here is discharged in parallel
123ABC The text here is parallel to the table. ● The nested table nested in the table is inserted into the table in the table. The nested typesetting method is to insert the table to handle the same statement. E.g:
● Colorful colors of the table also in the BGColor background color bordercolor border color bordercolorlight stereo Border bright color bordercolordark stereo border dark grammar for:
Setting in the label, parameters are:
E.g:
Where rrggbb is a 16-product value value of RGB three colors, respectively.
Bordercolordark = # ffffff bordercolorlight = # 000000 Cellpadding = 5 cellspacing = 0 bordercolorlight = "# 000000">
The above is the basic usage of the table. The web page editing software from Frngtpage, Dreamweaver, etc., you can easily implement the code and nested, but master some basic syntax, the critical moment is still very useful. II. The design of the table is not the most difficult place to handle the most difficult places, no matter how many complex layouts, carefully think that some can always find solutions. What we need to consider is: ○ What kind of nesting mode makes the web page download speed up to the fastest. We know: When the browser reads the web-html original code, it is read a full table and display it. That is to say
The label starts, to read
The content in the table is displayed on the screen when the label is labeled. Moreover, there is also a priority, first-read first display. In this case, if a large table contains multiple sub-tables, you must wait for a large form to read it together. When we visited some sites, wait for a long time without results, press the "Stop" button but display the page is this reason. Therefore, we should do it when designing page forms: 1. Do not set the whole page in a table, try to split into multiple tables; 2. The structure of a single table is as neatly uniform; 3. Table nested levels Be less. The experiment proves that the more complex, the more the table download speed is slower. Table design about the webpage is written here today. Abie doesn't have a lot of skills, the key is your own practice and use, or the old saying: "Cooching".
