A successful "About Us" is more than simply and rudely filling a page with brand, company and team information. You need to treat the team and the brand as a whole, presenting a unique style and different personalities for users to remember.
This sounds like a particularly difficult thing, but it is not complicated to scrutinize carefully. It is enough to choose the design skills of walking the kidney, choose the modern or simple style that matches your brand, and show your team in the most thoughtful way.
It sounds mysterious, but it is more intuitive to look at other people's cases.
0 1. Eye-catching colors and bright color matching.
Strict color matching and eye-catching tone selection make the design of Rook's "About Us" page look concise and prominent. Eye-catching gold runs through the whole design, from LOGO to image and typesetting.
In the processing of pictures and members' photos, the designer adopted monochrome filters to make our pages more rigorous and unified in color, and the branded design can be seen at a glance here.
02. Hand-painted typesetting and simple pictures
Madebyband's "About Us" page is designed differently, combining the characteristics of the brand, of course, to express personality. Their pages use a lot of hand-painted fonts and typesetting, with pictures of handmade products, to convey the brand's personality. The whole page design is concise, and a large number of blanks also balance the structure of the page.
Therefore, whether it is custom fonts or custom pictures, it is a reliable means to present brand personality and express team differentiation.
03. Lovely illustrations and lively color matching
The most common information on "About Us" page is the photo and location of the team, so why should it be presented in a traditional and rigid way? Pulp fingers didn't do this. The designer chose three colors and made a sharp and fashionable illustration, which is not only beautiful, but also interesting, unique and attractive enough. As an enterprise, the "About Us" page is absolutely unique and unforgettable.
04. Professional team photo arrangement and typesetting.
Do photos of team members have to be personal? Not necessarily, a professional group photo is also a good choice (a group of people are standing on the stairs at the entrance of the building to shoot at will, and there are too many such group photos in China, far from being professional, so it is usually against one's will to put them here). Many companies have done this kind of professional team member photography, which is easy to be too "business style". Few of them have achieved both style and perfection. Interested students can look for photos of the male god of the hammer technology team, probably with the Jam3 team style.
The Jam3 team chose a uniform black dress, which is full of texture and mature and exquisite against a dark background, which is the absolute focus. The layout and background of this picture are very modern, very refreshing, and the priorities are clear.
Of course, the problem with this photo is that if the players change, you have to take it again. If this is not a problem, then send it.
05. Eye-catching headlines and interesting animations
If you want customers, future employees and colleagues to know exactly where your brand value lies, why not write these core contents directly and conspicuously? That's what purple stone scissors and cloth do. This "About Us" page is also very intimate in two places. One is a short video background, which shows the working environment and the overall atmosphere well. The other is the design of team members' heads. When the mouse hovers, you can see the dynamic effect of the change of characters' expressions, which is both intimate and interesting.
06. Two-color collocation and bold illustration
MikeKus's "About Us" page design adopts a unique two-color color scheme, with yellow foreground color and red background color. The advantage of two-color scheme lies in its strong cohesion. This style is usually heavy and retro, which can strengthen the feeling of brand color. Another fascinating place is the bold illustration-the brain.
Of course, collocation plays a decisive role in the whole design, and it is not easy to make a reliable color matching. You may wish to search for color matching in the search box on the homepage of Youtu, and there will be surprises.
07. Clear graphics and information visualization
Do you also like visually prominent graphics rather than the whole text? Then take a look at the huge page about us. This company uses pioneering and bold pictures to present its uniqueness, and the huge and concise title words make these pictures more tense, and at the same time convey its own corporate values.
If graphics are the core of design, then the use of infographics is logical. Key information is represented by infographic, which not only fits the overall style of the website, but also makes it easier for users to accept the information transmitted by the website.
08. Neat typesetting and warm colors.
Frankly speaking, the most used place of grid is traditional media, and the way of using grid by online media is still different from it. However, StudioAlto's web page proves that web page typesetting can be similar to the typesetting style of traditional screen printing industry with the help of grid. The use of warm colors in the page makes the whole page more stylized, and the color similar to kraft paper makes the whole page feel like a new level.
09. Simple layout and clean blank space
Blank space is an important tool and element when designing web pages, so you should master the skills of using blank space. MadeByShape's "About Us" page design is such a case. Angular shapes and different blocks are clearly separated by spaces, and soft tones give the page a sense of fashion and vitality. If you design a page with a lot of information, you might as well make good use of the blank space.
10. Visual timeline and attractive color matching
If you want to show the development process of a product, nothing is more appropriate than a timeline. Moz's page design about us makes full use of this element. Timeline is not a fixed picture, and the events and contents in it can interact with users. In this way, the whole timeline can tell the whole story to users, so that users can feel the sense of participation. Another highlight of the whole design is its color matching.
1 1. Illustrations and warm colors
Do you have a strong behind-the-scenes team? If so, you might as well show it on the "About Us" page. In fact, the design of this page of FoodStudio does not involve too complicated skills. They just changed the heads of team members into illustration styles, and with warm colors, the style of the whole page stood out. The most important point of this design is unity, and consistency is the basis of stylization.
12. Bold colors and oversized team photos.
If you want to make your design more prominent and influential, try to make some elements bigger and the color scheme more eye-catching. As designed by Mixd, the high-definition big picture of the team members highlights the sense of existence of each member, and with the high-contrast color matching, the whole design looks very good. It is worth noting that you should choose the appropriate elements to enlarge, not all of them, so there is no center of gravity.
13. Fashionable pictures and simple layout
The overall design of KingdomCoffeeandCycles can be said to be a model of modern wind design, with simple layout, fashionable pictures, clean and tidy, and bright colors. Pictures are the focus of the visual design of the whole page, and the mixed collocation of pictures, videos and maps eliminates the monotony and simplicity of the page. Technically, the designer made a collage with the team's Instagram works and put it at the bottom of the page, which also looks very fashionable and interesting.
14. Simple graphics and clear lines
This kind of webpage is fashionable and modern in design, clean in appearance, light in drawing selection, large in blank space, neat in typesetting, very professional and eye-catching. It can be called a perfect framework for carrying a variety of content. At the same time, the design case of this page also illustrates the importance of blank space.
15. Boldly brighten colors and highlight information.
6tematik is very interesting about our page design. Black and white color matching will never be out of date, but in some cases, black and white is not enough to meet all the needs, so this page uses high saturation red to blue as bright colors, which is bold and effective. It should be noted that the more information you highlight, the worse the highlighting effect, because the more highlighted places, the more difficult it is for users to find the really important places. So, what you need to do is to mark what is really important.
16. Big white space and small elements
There is a contrast between big and small in many cases. Margins usually refer to the edges, blanks and boundaries around the text. Smaller boundaries can make the main body more tense and cover a wider range. But Alfred's page about us didn't do that. A lot of white space and wide margins make the whole page look full of literary atmosphere, concise and relaxed. Although this kind of design is unconventional, it is this unconventional design that makes the whole page full of unique style and tonality.
17. Unique fonts and personalized files
The unique handwritten font makes BigCartel's pages have extraordinary tension. Although simple, it makes the design shine. Personalized employee files are as unique as the unique fonts above, and the jagged and polymorphic design keeps the whole page consistent in breath. Click the play button of the employee's head, and a personalized video will be played, which is unique.
18. Modular layout and warm colors
When you see this page, I think you will also notice its unique design: the blocks of the page are carefully divided, and the content of each block will connect the preceding with the following, just like a ladder. In this way, modular pages are also very organized, neat and free. The color matching and drawing of the page are also very particular. Black and white tones with warm brown create a warm atmosphere.
19. Eye-catching colors and eye-catching pictures
The color of Visionaire is simply a bold example. The use of red banners is extremely eye-catching and echoes the brand color. Scattered typesetting and unique picture use make users not easily forget this unusual website. The use of infographics is also a feature of this page about us.
20. Strong contrast and retro illustrations
WoahNellyCatering's "About Us" page does not follow the most popular design techniques, but uses warm and nostalgic tones and design elements to create an atmosphere. Bright and beautiful illustrations not only make the page full of vitality, but also simple and intuitive. The subtlety of retro illustration lies in the addition of texture, which makes it feel very good, which also makes the elements of black characters on white background more conspicuous and prominent, in contrast.
2 1. Neat color matching and balanced typesetting
Beautiful sans-serif fonts, balanced typesetting and even and smooth color matching make EBPearls' About Us page look professional. Rational use of blank and light-colored pictures gives people an elegant feeling.
22. Soft colors and simple illustrations
In many cases, the more complicated the design, the better. EVABlackDesign's simple design about our page is easier to create a fashionable and modern feeling. Simple warm color pictures combined with black, white and gray give people a soft feeling, and simple illustration embellishment makes the whole page have a little personality under the well-organized design.
23. Dynamic and impactful typesetting
Want to make your design lifelike and full of vitality? Then let them move! Using short videos instead of pictures or using GIF pictures is also a popular design technique at present. The use of pure black text and red elements makes the whole page full of personality and typography full of impact.
24. Creative typesetting and attractive pictures
The unique typesetting in the center of the picture is an interesting part of our page, and the photos of the team members are just in this position, which makes the typesetting of the file information on both sides need to be aligned to the middle. The use of retro elements and color matching supports the design of the whole page, which is worth learning.
25. Bold layout and color filter
Boldly using unique and pioneering layout is an unforgettable and important means, and at the same time, with full personality color matching, the effect is absolutely good. The choice of clean sans serif and the pictures under the color filter are the highlights of this page about us.
Address of this article: Thinking Materials
40 excellent cases of web design It is not difficult to design our page, but it is not easy to design a perfect version. Usually it depends on your starting point, whether it is personalized design or brand operation. Do you want to provide your own contact information or get the contact information of users? The following excellent cases will tell you how to design our page.
1, friendly interface
A friendly contact interface always makes people feel kind. If it has some functions and is easy to read, users will feel more comfortable. "Whatcanwehelpyouwith" can guide users to click "Join us" and "Hire us" to participate in email subscription.
2. Show offices around the world
On the About Us page of the tool, the designer marked the team in bold.
Los Angeles
Address and contact information of new york and French offices. Isn't that what users who click on our page want to know? Correct contact information, simple and direct design, that's how it is done.
3. Simplify the communication process
The contact page of ProductiongLocation also adopts bold and visual page design, but different from other similar pages, it simplifies the communication process, divides the content that users may pay attention to and the specific parts that need to communicate, and allows users with different needs to be directly guided to specific pages and parts, thus achieving the purpose of simplification and diversion.
4. Avatar and Personalized Information
Put photos of designers and team members to let users know about you. The most important thing is not whether your avatar is beautiful enough, but to let users know that there is a real and ordinary designer like you and me behind this beautiful website, which is the result of his or her efforts. Avatar can make the page more personalized, and it can also make it more real and close.
5. Encourage users to communicate.
The core design purpose of our page is usually communication. HelloInnovation's page design fully implements this concept: trying to encourage users to actively communicate with the website. With kindness and wealth
attraction
Design, contact information, from copywriting to email are all encouraging users. How hard can it be to talk?
6. Use pictures to convey metaphors
There are many collections related to design in the Design Museum, and this mobile phone on our page is not only the collection of the website, but also an important metaphor to convey the image of "communication" to users, which can be regarded as a design.
Play word games
".
7. Create unforgettable designs
Weird designs and interesting copywriting are always unforgettable, and the massive information intake every day makes people remember only the most prominent ones. However, the eccentric design may not be suitable for any brand or website, but for those quaint websites, those unique brain holes always play a role.
8, the performance of brand personality
It is natural and reasonable for a website to present its own brand personality on the About Us page. BooneSelections is an elegant and professional way to integrate brand color matching and related design elements into the About Us page. As a professional wine import company, BooneSelections' About Us page adopts unique typesetting and scrolling page design, creating a unique brand atmosphere.
9. Show contact information
ThisAlso is reliable and in place about our page design, even if the page map shows the location of the company. Scroll down the page, you can also see the detailed address description, subway ride along the line and communication.
E-mail address
Telephone, etc., etc.
10, give a hint.
The "About Us" page of DeuxHuitHuit website does not provide traditional communication methods, but is designed as an intuitive and simple dialog box. The "Sayhello" dialog box at the top directly reminds the user that as long as the content is entered, the website developer can see it.
1 1, indicating the opening/working time.
For institutions with specific business hours in official website, such as restaurants, museums, shops, etc. In the "About Us" page, the opening time of the store and the time of telephone consultation are marked, which can make users receive services more effectively.
12, using bold fonts.
Panache has adopted a very striking "TravaillonsEnsemble" in the title font of our page, which is lighter and more unique, but it is highly recognizable.
13, using bold color scheme.
Sponge's "About Us" page uses a classic black and white yellow color scheme. This contrasting color scheme combined with detailed description makes the whole page look sharp and rich in texture. Designers use bright colors on the most critical information to make it easier for users to notice them.
14, the use of visual illustrations
Illustrations can always attract users' attention in a more visual way, especially when illustrations are stylized and personalized enough. On LegworkStudio's "About Us" page, wolf head illustrations are added, combined with handwritten fonts, to create a personalized atmosphere.
15, using simple graphics
GiampieroBodini's "About Us" page does not use complicated design skills, but puts a simple rectangle on a complicated sketch background, in which contact information and related information are put. Complex and simple, hand-drawn and graphic, formed a sharp contrast.
16, communicate with the form
Communication is mutual. You can send a message to the website or leave your contact information so that the website operator can send you a message. QEDGroup left a form directly on the contact us page, through which you can leave your contact information.
17, with monochrome color matching.
Concise, elegant and easy to read is the design style of the contact page of JosephAAvoue website. There is no gorgeous design, no fancy function, a slender ring with the most basic contact information in the middle, which is so direct.
18, humor
Humorous designers will never miss a funny opportunity, and Bio-Bak designers will even grandstanding in the contact page. Graffiti fonts, nifty copy, people can't help laughing, and the designer's humor can be felt from every detail.
19, fill in the form
Anakin's About Us page also allows users to fill in contact information, but it is more unique in the design of the form. There is no special form, but it uses.
placeholder
It is very intimate, intuitive and intimate to remind users what to fill in at various positions.
20. Personalized office location display
Similar to the second case, CPB Group has offices all over the world, but its design style is more unique. The content and personalized background of local offices are integrated, and the information is integrated, and the display method is full of personality.
2 1, introducing business.
It is not uncommon to introduce yourself on the "About Us" page, but there are many other things you can do, such as introducing your own business, showing your own brand and attracting users to chat. That's what HelloMonday's About Us page does.
22 video background
Adding video background to the website has become a very popular means, and Moodboard, as a film production studio, uses video background in About Us page, which not only conforms to the nature of their team's work, but also makes the whole About Us page more vivid.
23. Use grid layout
To design a structured page, the grid will always be you.
Best friend
. UrbanInfluence uses grid to organize the whole page, and the content to be displayed, the part for user input, the decoration part and the displayed map are clearly distributed on the page.
24. Make the interface more friendly.
If we make the interface more friendly, designers have a lot of work to do. Clear and readable
interface design
It is the most basic, the information should be conveyed clearly, there is no aggressive color matching, people feel familiar and friendly presentation, and the interaction is easy to operate. These are all places that designers should do well.
25, step by step guidance
Getting in touch requires a series of operations. If we divide the whole interaction process into several steps, guide users to operate step by step, and add dynamic effects and micro-interaction, it will definitely be a different experience.
26. Add contacts
short cut
The person in charge of different parts of the team is usually different. When users open the Contact Us page, they usually have a clear goal. How to add the FAQ part and the contact information of specific contacts, so that users can communicate with different responsible persons more directly.
27. Integration with other parts of the website.
RobbyLeonardi's website seems to be designed in a flat style.
computer game
When you browse the page, you will follow the protagonist to different pages and do different things, and our page is one of them. It is a "scene". This is a way to integrate pages, which is worth learning.
28. Team photos
Many websites are operated by a whole development and design team, so it is very reasonable and personalized to take a group photo as the background of our page.
29. Use spaces
Usually, blank space can enhance the sense of space and structure of the whole page, and BetaTataki has placed a mobile phone with a sense of design on our page, which enhances the presence of contact information and other content by leaving blank space.
30, flexible font layout
Well-designed typography is not only decorative, but also can carry certain content. PaulineOsmont's contact page uses black, silver and gold to build an attractive visual design of the font typesetting machine. When you scroll down the page, you can see a form that is easy to read and typeset.
3 1, solo show
This is also a common way to display content in recent years. Designers hold up exhibition boards to show their designs. If used in the contact us page, this design technique is also very suitable. Just like MarkJaworkski's page, the designer's skills, introductions and message forms are neatly displayed on this flat whiteboard.
32. List social media contact information.
Which website doesn't have several social media accounts now? For many users, it is more convenient to contact the social media links of their own websites in the About Us page.
33. Borrow traditional communication methods.
Retro style is a good choice, but it seems more thoughtful and interesting to design with traditional contact methods. Lionway's contact page is designed as a postcard, and some fixed information is simply listed on the printed bill.
34, nifty copy
The design of copywriting is also an important part of the contact page. Friendly and humorous copywriting design will make users feel close, but the same playful and humorous copywriting will also make users unforgettable.
35. Show your personality
Contact the design studio Resn. Our page design is definitely one of the most personalized pages in this group. The main body of the page is composed of design elements full of 80' s amorous feelings and pictures of players with animal hoods.
36, the use of information map
Infographic is a design technology that has emerged in recent years. If there is suitable display content, it is also a good choice to use infographics on the "About Us" page. Quicksprout's About Us page uses infographics to present the content, which is clear, easy to read and accurate.
37. Animation and cartoons
In the Contact Us page, it is very common and effective to introduce designers and design teams with cartoon and animation images. Melonfree's About Us page shows the cartoon images of designers and developers.
38. Use translucent graphics
People's eyes always consciously recognize the contents of stone tablets, so even if translucent elements are put together, it will not seriously affect the reading experience. Indofolio's page design makes full use of translucent elements and puts the core contact information on a translucent rectangle. Through graphics, users can still see the details of the background, but they will not be unable to see the key contact information clearly.
39, hand-painted effect
Hand-painted contact us pages, especially those that are quite eye-catching, can always make users feel the intimacy of the designer. MarioPetrone's page design is quite playful and interesting.
40. Use only one drop-down box.
The contact page of the spokesperson is actually not a complete page, but a drop-down box is used instead. When you click the link in the navigation, this striking orange drop-down box will appear.
A Case Study of Color System in Web Design
Orange is also called orange yellow or orange. Its penetrating power is second only to red, and its color sense is warmer than red. Orange is a very lively color in web design, which gives people a feeling of luxury and warmth, excitement and enthusiasm, joy and vitality, and is also an exciting color.
Orange is widely used in web pages. It can create different sub-atmospheres by changing colors, which can not only show youthful vitality, but also achieve a steady effect. The wavelength of orange is between red and yellow, which is symbolic of health, vitality, courage and freedom. In order to let everyone have a better understanding of orange, the following is an analysis of different types of web pages.
1. Case analysis of catering website design
Recommended case: orange+yellow+dark orange
The whole page is mainly orange, which is blended with "yellow" with different lightness and purity. The page is very harmonious and not monotonous. It's a good picture, and the food pictures are all the same color, so it won't be very abrupt. Use white to layer the web page, which is layered.
2. Case study of entertainment web pages
Recommended case: dark orange+khaki+yellow.
The whole page is displayed by the combination of dark orange and light yellow, which makes the page look warmer. The dark bedding and yellow text achieve a prominent but unobtrusive visual effect and give the website vitality.
Three. Case analysis of e-commerce website
Recommended case: orange+khaki+green