How to better design website layouts and elements - Part 1
Small things create a bigger impact on the overall design of your website. In a previous blog on web design principles I shared four pillars of web design you must follow. Now, let's see some rules, best practices, and how to better design different website elements. Following these, you can take better design decisions for your website elements easily.
Let's get started
Hero section is the first thing people see. So here are some different ways you can design it.
1. Slipt Screen
This is the most common layout we see on most websites where we put images on one side - text and call to action on another side. Here balance should be maintained for image and text, imagine this like two equal-width columns.
2. Feature highlight layout
This layout is used when we want to highlight the top feature that instantly grabs the user's attention. You often find this layout with big text followed by a call to action button followed by a big image or video.
3. Featured image
This layout introduces their brand with an image of their product. These layouts make sense when your brand is a single product like a shoe brand, a mobile brand, etc.
Other layouts similar to this layout
- Image carousel
- Video image
- Image as background
These type of layouts quickly grabs visitors into their products without letting them waste their time scrolling. We often found e-commerce websites using this layout. Also, this layout will be more effective if your brand is popular enough that visitors don't even need an intro to your brand.
5. Try out now
This layout quickly gives access to try the product from the hero section itself without signing up. This is like going shopping - trying the product - take it or leave it.
These are some popular hero layouts most websites use. Each layout has a different impact on visitors. So think before you decide on a layout.
The four stages in the life cycle of a button.
- Attract the visitor
- Tell the visitor they are about to click the button
- Tell the visitor they clicked the button
- Give feedback(Optional)
When you design a button make sure it goes through at least the first 3 stages of its life cycle.
1. Attract the visitor
First, make visitors feel it's a button. A button should contain a background color, text/icon, and a small shadow that brings a 3d effect to the button and makes it feel like a button.
Some rules and guidelines:
- Padding - It is recommended to have 2x height as width for spacing between text and border in a button.
- Priority - Design buttons based on priority. Prioritize based on importance.
- Safe area - Leave some space around the button as a safe area. Why? - Safe area helps avoid overlap between two buttons and helps in the accessibility of buttons (when the user navigates the website by tabbing a blueish shadow appears around the button).
- Use icons - Icons + Text combined buttons attract more than normal text buttons. Always place icons on the left and text on the right. But if you are giving directions you are free to put them on the left or right.
2. Tell the visitor they are about to click the button
This step can be achieved by adding a hover effect and add a shadow ring around the button for accessibility. A slight brightening or darkening of the existing color is enough or if there is an icon + text combo add a little animation. I see people overdo this step, it may look cool but not a better UX.
3. Tell the visitor they clicked the button
Add a click effect to achieve this step.
4. Give feedback (Optional)
Give feedback after a button click. In some cases this step is not required, it is highly recommended. Feedback can be a popup or a toast or within the button. Let's say we are giving the feedback within the button. Feedback is of two types,
Waiting-feedback - This feedback tells the visitor some operation is going on, please wait. We often find this in loading operations.
Completion-feedback - Tell the user whether the operation is successful or failed or something. This feedback is not always necessary.
That's all about designing a button.
LEAVE A COMMENT OR START A DISCUSSION
5 min read
Hiring Angular Developers in 2023: Insider Tips & Strategies
Does your company struggle to create a modern, high-performance, cross-platform web app? Do you desire cost-effective development without compromising future software quality? Many web development teams utilize Angular to build complicated single-page apps. Hiring Angular programmers is difficult.
8 min read
How Feature Flags Can Help You Ship Faster and Smarter?
Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.