Anyone who knows html can create a website, but implementing the following design standards will make it more appealing. In this blog, we are not going to see about placement of call-to-action or making the page responsive, but on the aesthetic aspect, which makes it more visually appealing to the visitor.
Colors make a website expressive. Choosing an appropriate color combination in the website design process has the ability to generate a positive impact to the visitor. The color should match the product or service that you are offering and psychology of the target audience. Avoid extremely bright colors as it drives away visitors.
“Don’t make your website a rainbow by choosing too many colors. Keep the number of colors between 3-5. Websites create an impact when the use of colors is minimum. “
Primary color appears more frequently in the webpage and secondary color accompanies it to highlight and enhance the attraction towards the primary color that visitors will be drawn to those elements first. Primary color is more often chosen to be lighter so it covers the background section and secondary color is used for buttons, text fields and to highlight other important information.
When it comes to text, people are used to reading black text as it is the easiest on the eye. Using text to background color, the area directly behind the text is filled with a solid or transparent color, allowing the users to clearly read the content.
A picture paints a thousand words. Whether the mood is subdued and muted or bright and colorful, the following principles and best practices can help you successfully incorporate imagery and bring your apps to life, no matter what the visual brand. The images should be professional, relevant, compelling, unique with high resolution and optimized to fit into different screen sizes.
“Images clarify problems with a single shot. Adding images to a website is a great way to make the content easily understood, having a direct impact on positive conversion rates”
Successful blogs often use their own images and graphics. Stock images should be avoided as there could be hundreds of other people using the same photos. Features like color overlay, gradient overlay, shape overlay and image blur can be used to enhance the look of the background images. To make typography legible on top of imagery, apply text protection in the form of scrims. Scrims are lightweight, translucent material layers.
Scale-independent Pixels is used for the user’s font size preference. It is recommended to use sp unit when specifying font sizes, so they will be adjusted for both the screen density and user’s preference. SP is important as it provides a link between the users chosen text and the text in the application.
“The typeface style is a major enhancer of the web page content. Choose a font style which goes well with the design and color scheme of the page. “
If you are confused and out of options choose roboto for font style. Roboto is a standard Android typeface. This has been fine tuned extensively and is very readable now. The optimal line length should be 50 – 60 characters which improves the readability. If the text is too wide or narrow it breaks the reading rhythm.
The button represents the primary call to action and should be easily identifiable and its purpose should be clear. There are three standard types of buttons. Floating action button, Flat button, Raised button.
Floating action buttons have special motion behavior and are used for special type of promoted action ideally suited for frequently pressed buttons and provide extra screen space. Flat buttons are simple yet interactive and are used in input fields to minimize distraction from content. Raised buttons stand out more than flat buttons and are used as inline buttons.
Following the above will increase your website usability. For more guidelines, do contact us