How can I improve my User Interface?

I always used to wonder how these amazing websites are being created? What am I missing out or what goes wrong which makes my website less attractive? So to answer these queries, this article will surely help you out to design your next amazing web site.

1. Layout -

The most important thing is where to place what type of content and how website layout would look in small screen, medium screen and large devices, This problem can be solved by using different types of layout for different devices. For mobile most of the websites uses Single column layout and for larger devices there are multiple layouts -

1. Split Screen Layout,
2. Asymmetrical layout,
3. Grid Layout,
4. Box Layout,
5. N Column Layout

2. Responsive Web Design -

To create websites more attractive and dynamic for any devices such as mobiles, tablet, laptop and desktop responsive design is and important thing to consider. Now there is a question how to do achieve it?

You should always go with mobile first approach i.e. designing website for mobile then for tablet, laptop and lastly for desktops. Their are CSS libraries and frameworks available for example Bootstarp, Foundation CSS, Sementic UI and many more to easily design responsive web site but if you don’t want to use any framework and library you can also go with CSS Flexbox or CSS Grid layout (both have different use cases so choose accordingly) used along with media queries.

3. Colour Palette -

As Colours are having a powerful effect on our emotion, so before making any choice of colours and theme for any website find out what your brand simulates such as Red simulates Power, Passion, Energy etc and Blue simulates Trust, Loyalty, Security etc.

Selecting colours which give contrast effects and also simulates your brand could be easily achieve by using -

1. Colour wheel just by selecting primary colour and 180 degree opposite to that secondary colour, or
2. You can use colour palette having colour grouped together.

4. Pictures and Illustrators -

To express anything picture is the best way because “a picture speaks thousand words”. Always try to select picture with colour matching to your theme that looks attractive as you might have seen many website are now using illustration because of two reason it reduces the size of an image and it also looks good and can be customised with theme colour. There are many free illustrators available on internet you use those.

Always use SVG format for illustrator and use JPEG or JPG for images with lots of color and PNG for simple images that will help you to optimise your website without compromising the quality.

5. Typography -

We always want to good handwriting in our school days then we used to write alphabets in various design in calligraphy now when it comes to website design we have to choose fonts that looks simple and clear.

After choosing a font style their are many thing which could makes it look more attractive such as -

1. Changing font weight instead of using larger font size,
2. Changing colour shade and opacity,
3. Modifying font spacing, word spacing or line height also makes sense.

Conclusion -

When designing a website, it’s important to remember that website should be accessible, responsive and interactive. The primary purpose of the website remains to deliver message which we want to deliver should reach. And keep these things in mind while making your next website good luck.

About Me!

I am Harsh Digwani, JavaScript and MERN stack developer. You can connect with me on LinkedIn.

Thanks for Reading…