About us page design is not difficult, but it is not easy to design a perfect version. It usually depends on your starting point. Do you want a personalized design or a branded operation? Do you want to provide your own contact information or obtain the user's contact information? The following excellent cases will tell you how to design an excellent About Us page. .

1. Friendly interface

A friendly contact interface will always make people feel friendly. If it also has some functionality and is easy to read, users will feel more comfortable. . "What can we help you with" can guide users to click "Join Us", "Hire Us" and participate in email subscription.

2. Showcase offices around the world

On Tool’s About Us page, the designer uses eye-catching fonts to mark the addresses and contact information of the team’s offices in Los Angeles, New York and France. Don’t the users who click on the About Us page just want to know this information? Correct contact information and simple and direct design do just that.

3. Simplify the communication process

Productiong Location’s contact us page also adopts a bold and visual page design, but unlike other similar pages, it simplifies communication The process divides the content that users may pay attention to and the specific parts that need to be communicated, so that users with different needs can be directly guided to specific pages and parts, thereby achieving the purpose of simplification and diversion.

4. Avatars and personalized information

Put pictures of designers and team members to let users know you. The most important thing is not whether your avatar is beautiful enough, but to let users know that behind this beautiful website is a real and ordinary designer like you and me, and it is the result of his or her hard work. Avatars can make a page more personal and make it more real and approachable.

5. Encourage users to communicate

The core design purpose of the About Us page is usually communication, and the page design of Hello Innovation fully implements this idea: trying to encourage users to actively communicate with the website communicate. Use a friendly and approachable design, leave contact information, and encourage users from the copywriting to the email address. Let’s talk, how hard can it be?

6. Use pictures to convey metaphors

The Design Museum has many design-related collections, and the phone number on the About Us page is not only It is a collection of the website, and serves as an important metaphor to convey the image of "communication" to users. This can also be regarded as a kind of "pun" in design.

7. Create unforgettable designs

Weird designs and interesting copywriting can always make people unforgettable. The massive amount of information intake every day makes people only remember the most prominent ones. Those ones. However, weird designs may not be suitable for any brand or website, but for those quirky websites, those unique ideas can always work.

8. Express the brand’s personality

For websites, it is naturally reasonable and appropriate to present their own brand’s personality in the About Us page. This is how Boone Selections elegantly and professionally integrates brand colors and related design elements into the About Us page. As a professional wine importing company, Boone Selections’ About Us page uses unique layout and scrolling page design to create a unique brand atmosphere.

9. Display contact information

This Also’s About Us page design is reliable and in place. The page map indicates the company location. When you scroll down the page When you click on it, you can also see the detailed address description, the way to take the subway along the line, the email address for communication, the phone number, and so on.

10. Give me a tip

The About Us page of the website Deux Huit Huit does not provide a traditional communication method, but is designed as an intuitive and simple dialog box. The "Say hello" dialog box at the top prompts the user very directly. As long as the content is entered, the website developer can see it.

11. Mark the opening/working hours

For the official websites of institutions such as restaurants, museums, shops, etc. that have specific business hours, mark the opening hours of the store on the About Us page. The time spent receiving telephone consultations allows users to receive services more efficiently.

12. Use eye-catching fonts

The title font on Panache’s About Us page uses a very eye-catching “Travaillons Ensemble”. This font is lighter, unique but extremely powerful. High recognition.

13. Use a bold color scheme

The classic black, white and yellow color scheme is used in Sponge’s About Us page. This strong contrasting color scheme is combined with meticulous details to depict. Make the entire page look sharp and textured. Designers use bright colors to focus on the most critical information, making it easier for users to notice them.

14. Use visual illustrations

Illustrations can always attract users’ attention in a more visual way, especially when the illustrations are stylized and personalized enough. Legwork Studio’s About Us page has added a wolf-headed illustration, combined with handwritten fonts, to create a personalized atmosphere.

15. Use simple graphics

Giampiero Bodini’s About Us page does not use complex design techniques, but puts a simple rectangle on the complex background of the sketch. Place contact details and relevant information there. Complexity and simplicity, hand-drawn and graphic, form a sharp contrast.

16. Use forms to communicate

Communication is mutual. You can send messages to the website, or you can leave your contact information and let the website operator send you messages. QED Group leaves a form directly on the Contact Us page through which you can leave your contact details.

17. Use monochromatic colors

Simple, elegant and easy to read is the design style of Joseph A Avoue’s website contact us page. There is no gorgeous design or fancy functions. A A slender ring with basic contact information in the middle, it’s that direct.

18. Humor

A humorous designer will not miss any opportunity to be funny. Bio-Bak’s designers will also try to impress people even on the contact us page. The graffiti fonts and playful copywriting make people laugh. You can feel the designer’s sense of humor from every detail.

19. Fill in the form

Anakin’s About Us page also allows users to fill in contact information, but the design of the form is more unique. There is no special form, but the use of occupancy. The place symbols remind users of the content that needs to be filled in at each location, which is considerate, intuitive, and very attentive.

20. Personalized office location display

Similar to the second case, CPB Group has offices all over the world, but the design style is also more unique. The content is integrated with the personalized background, the information is integrated, and the presentation is personalized.

21. Introduce your business

It is not unusual to introduce yourself on the About Us page, but there are many other things you can do besides this, such as introducing your own business, showing It is also a good way to attract users to talk about your own brand.

Hello Monday’s About Us page does just that.

22. Video background

Adding video backgrounds to websites has become a very popular method, and Moodboard, which exists as a film production studio, uses it in the About Us page The video background not only fits the nature of their team’s work, but also brings the entire About Us page to life.

23. Use grid layout

To design a structured page, grid is always your best friend. Urban Influence's About Us page uses a grid to organize the information on the entire page. The content that needs to be displayed, the part for user input, the decorative part and the map for display are all clearly distributed on the page.

24. Make the interface more friendly

If you want to make the interface more friendly, designers have a lot of work to do. Clear and easy-to-read interface design is the most basic. Information must be conveyed clearly, without aggressive color matching, presentation methods that make people feel familiar and friendly, and easy-to-operate interaction methods. These are all designers must do well. place.

25. Step-by-step guidance

Getting in touch involves a series of operations. If the entire interaction process is divided into several steps, the user can be guided step by step to operate, adding animation and micro Interaction is definitely a different experience.

26. Add contact shortcuts

The people responsible for different parts of the team are usually different. Users usually have clear goals when opening the contact us page. How to add the FAQ section to it? , and add the contact information of specific contacts so that users can communicate with different persons in charge more directly.

27. Integrate with other parts of the website

Robby Leonardi’s website seems to be designed like a flat style computer game. When you browse the page, you will follow the protagonist. Different pages do different things, and going to the About Us page is also one of the "scenes". This is a way to integrate pages and is worth learning.

28. Team photo

Many websites are operated by an entire development and design team. It is also very reasonable and personalized to use a photo of team members as the background image of the About Us page. practice.

29. Use white space

Usually white space can enhance the sense of space and structure of the entire page, and Beta Tataki placed a phone number with a full sense of design on the About Us page. The presence of content such as contact information is strengthened by leaving blank space.

30. Use fonts and typography

Well-designed fonts are not only decorative, but can also carry certain content. Pauline Osmont’s Contact Us page uses black, silver, and gold to create an attractive typography design. As you scroll down the page, you'll see forms that are well laid out for easy reading.

31. Display by hand

This is also a relatively common way of displaying content in recent years. Designers personally hold up display boards to display design works. If used in the contact us page, this designer's technique is also quite appropriate. Just like this page from Mark Jaworkski, the designer's skills, introduction, and message form are all neatly displayed on this whiteboard that is held flat.

32. List social media contact information

Which website does not have several social media accounts now? Post all the social media links of your website on the About Us page. , for many users it is easier to contact.

33. Borrow traditional communication methods

Retro style is a good choice, but using traditional contact information to design seems more thoughtful and interesting.

Lionway's contact us page is designed in the form of a postcard, and some fixed information is simply listed on a printed invoice.

34. Playful copywriting

The design of copywriting is also an important part of the contact us page. Friendly and humorous copywriting design will make users feel close to you, but similarly, playful, Witty copywriting will also make it memorable for users.

35. Show personality

Design studio Resn’s contact us page design is definitely one of the most personalized pages in this set of cases, full of 80s-style design elements, and Images of team members wearing animal hoods form the bulk of the page.

36. Use infographics

Infographics are a design technique that has been on the rise in recent years. If there is suitable display content, it is also quite suitable to use information graphics in the About Us page. Not a bad choice. Quicksprout’s About Us page uses infographics to present content that is clear, easy to read, and accurate.

37. Animation and cartoons

Using cartoons and anime-style images to present designers and design teams on the contact us page is a very common and very effective method. Melonfree’s About Our page displays cartoon images of designers and developers.

38. Use translucent graphics

Human eyes will always consciously identify the content of the desired stone tablet, so even if translucent elements are loaded together, they will not Especially seriously affects the reading experience. Indofolio's page design makes full use of translucent elements and places the core contact information on a translucent rectangle. Through the graphics, users can still see the details of the background, but the key contact information will not be unclear.

39. Hand-drawn effect

Hand-drawn contact us pages, especially those pages that are quite eye-catching, can always make users feel the thoughtfulness of the designer. This page design by Mario Petrone is quite playful and interesting.

40. Only use a drop-down box

The contact us page of Spokes Pedicabs is actually not a complete page, but a drop-down box is used instead. When you click on the navigation link, this eye-catching orange drop-down box will appear.

Case Analysis of Web Design Color System

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

Orange is widely used in web pages. It can create different atmospheres by changing the color tone. It can not only show youthful vitality, but also achieve a stable effect. The wavelength of orange is between red and yellow, and it has symbolic meanings such as health, vitality, courage and freedom. In order to let everyone have a better understanding of orange, different types of web pages are analyzed below.

1. Food and diet web design case analysis

Recommended case: orange, yellow, deep orange

The entire page is mainly orange, with different brightness and purity "Yellow" is used to harmonize, and the page is very harmonious and not monotonous. The pictures are well highlighted, and the food pictures have similar tones, so they won’t be too abrupt. The use of white to layer the web page has a sense of hierarchy.

2. Case analysis of entertainment web pages

Recommended case: dark orange earthy yellow

The entire page is displayed using the combination of dark orange and light yellow , making the page look warmer, with dark underlay and yellow text, achieving a prominent and unobtrusive visual effect, giving the website vitality.

3. E-commerce website case analysis

Recommended case: orange khaki green

This case uses relatively many colors, and orange navigation aids The khaki color with higher brightness will not look very messy, but will be more distinctive and lively. In addition, some green buttons are used to embellish the page, which makes the page look less monotonous and has a visual effect of a little green among thousands of oranges.

IV. Case Study of Science and Technology Development Organization Website

The colors used on the page are relatively complex, but it makes people feel orderly in chaos. You can notice that the page uses dark red as text, and orange appears near the red text, such as the red text on an orange background at the top, the big title in red, and the small title in orange. These elements make the page chaotic and orderly.

Summary: Orange is used a lot. Adjusting the saturation and purity can achieve very good visual effects. Of course, in addition to the visual impact, a little contrasting tones can be appropriately used to soften the visual effect, thereby weakening the visual impact. Visual fatigue.