With the improvement of people’s understanding of medical health, related medical services and medical website design are also being standardized. From the point of view of website design, medical website is the information highway connecting the whole hospital for the medical inside. For patients, excellent standardized design can better guide them to obtain medical information accurately and quickly.

How to design a good medical website? Take a look at some excellent examples.

1. Weightmedics – Website design

Address: www.weightmedics.co.uk/index.html



Design features: cartoon style, flat design, color collocation lively quietly elegant

Different from the general weight loss website, there is no dense weight loss package recommendation, no exaggerated weight loss before and after the comparison picture. The overall website design is presented in a cartoon way, with light blue background color and white font, simple and elegant. Local matching orange tones make the site lively but not monotonous.

2. The Doctors Laser Clinic – Medical beauty website design

Address: laserdocs. Co. UK /



Design features: cater to female aesthetic, card design, elegant purple tone

As a medical beauty website, most of the customers are female. Therefore, knowing how to cater to women’s aesthetic, not only from products and services, website design must be able to win the favor of female customers at the first sight. The overall purple tone of the website is elegant and generous, and different levels of purple card design can guide customers step by step. The CTA section is accentuated with dark purple to attract clicks and increase the conversion.

3. Beauty is power; A smile is its sword – Dentist website design

Address:

Dribbble.com/shots/40902…

 

Design features: black background highlights the theme of the site, simple black and white collocation, forming a tone contrast

As is the theme of the website, the beauty of a smile lies in healthy teeth. What makes this dentist website special is that it doesn’t have the usual white coat and anthropomorphic tooth patterns to highlight the theme. Instead, it uses a more abstract smile to illustrate the design concept. As a dental website, it is also a good advertisement. Clever color matching makes the black part of the site design not dull, but very bright.

4. Tychee Training – Medical Training – Medical website design

Address: dribbble.com/shots/46882…

 

Design features: lively orange tones, illustration style, flat design

The background color of the site is orange and white, which makes the whole page look fresh and energetic. It is very consistent with the healthy life pursued by modern people. The home page adopts the popular illustration style, combined with the flat web design, giving a warm and lively feeling.

Psychologist – Mental health Website design

Address: preview.themeforest.net/item/psycho…



Design features: responsive design, HTML5, fresh light green tones

The overall web design is based on light green color, navigation bar, font, as well as the color of the sky, is a fresh and vibrant color. Part of that transformation is responsiveness and performance excellence. As a mental health class web design template, can also provide a good reference to the novice.

After reading the above case analysis, I do not know whether we have noticed a common point, which is the analysis of the use of color in medical website design.

So, what are the design principles that can be followed when designing medical websites?

Website tone collocation is an important factor affecting web pages. Different colors produce different effects.



(1) Red: Red makes people excited and nervous. Therefore, it is not suitable for medical websites to use red as the main color.

Collocation: the pink in red department is more suitable to use in the website of medical cosmetology class, create an atmosphere that caters to the feminine and pure.

(2) Black: The tone is solemn and reminiscent of death. Therefore, if the color collocation is not good, it is recommended to avoid using black as the main color.

Match: black and high brightness yellow match, can get clear and neat result. Belong to more suitable for lively jump, gorgeous color scheme.

(3) Blue: blue is more suitable for peaceful quietly elegant clean pages, so some hospital websites will appropriately use blue, live alone, or use with.

Collocation: Light blue is elegant, fresh, romantic and noble, often used in cosmetics, women, medical website design.

(4) Green: Green represents the image of refreshing, ideal, hope and growth, which is more in line with the requirements of web design of service industry, medical and health industry, education industry and agriculture.

Collocation: Green can be matched with a variety of colors to achieve a harmonious effect, is one of the most widely used colors on the hospital website.

(5) Purple: Purple symbolizes femininity, representing nobility and luxury, elegance and charm, as well as mystery and solemnity, holiness and romance.

Match: purple joins a few white, can become a kind of very graceful, downy color.

(6) Orange: Orange has symbolic meanings of health, vitality, courage and freedom, and can give people a sense of dignity and mystery. The application in hospital website design can create a warm atmosphere.

Collocation: cannot large area is used, can small ground and other colour collocation have the effect that adorns.

(7) White: White is a common color in web design, which is easy to highlight the characteristics of chroma.

Tie-in: Black looks noble with urban atmosphere, but not suitable as the main tone of medical website.

(8) Yellow: In many design works, yellow is used to express the festive atmosphere and gorgeous goods.

Match: Yellow is a neutral color, so it can be used with almost any color in website design.

The use of color in high-fidelity web prototypes is also a plus for web design. A prototype project with the right color palette is much more likely to win funding and clients. Instead of a monochrome wireframing tool, choose a prototype that supports a library of colors. Component and icon colors can be set directly by color number or color picker in Mockplus. For web design, App design is very friendly.



Conclusion:

All types of web design, not just medical ones, should be disciplined and creative. For designers, it is more important to learn how to avoid web design cliches. Color collocation in web design is not only suitable for medical websites, other types of websites should also pay special attention to color collocation, for their own design bonus points.