Good User Interface Design for website
Ordinarily people spent their time more in staring at their smartphone screen than the desktop screen (computer/laptop). On the other side every business wants their website to be visit by the users not in only 1–5 seconds and then left.
Since 2010 I designing the websites, there are a lot more changes in trends, usability and styles. From texture background to the big photography image hero, from the glow gradient dimention style buttons (Skeuomorphism) to just the simple flat style buttons with one color block, from the background space border with different color with the front side to the plain background without any color/same color with the front side except on parallax style with image background.
On this article I define the simple things on what kind of good UI design or what’s the point to creating good UI (User Interface) Design for websites based on my experience since 2010. I was actually created a website mockup design in 2008 at an advertising agency in Jakarta, but effectively I started since 2010.
1. Browse inspirations wisely
Don’t wasting time for browsing the inspiration uneffectively. Only find the inspirations with similar field with the project or by their competitors. So we can find what’s the pros and cons of the competitors. Find the similar color of the brand e.g the brand of the web project is using dominated with blue color, then we should find another websites which are using the blue color too. It’s the one of effective way to me to find the inspiration by color quickly. You can browse the inspration of websites on http://www.awwwards.com/ or http://www.webdesign-inspiration.com/
Also you can find for the spesific part or section. For example you need inspiration for ‘Contact’ Page, forms, profile, etc, go find the similar spesific parts. Usually there are many articles/blog with spesific part of UI design for inspiration.
2. Make it clean
Clean is not always identically with whites. It can be yellow, black, blue, dark blue or even red depends on what the basic color of the website/brand. Clean is whitespace (the space between empty background and elements like fonts and images) and also clear usability.
Reduce some navigations that unuseful or when you think it don’t need to be appear at Home Page. For example you can compile vision / misions link of the company with the career page at one main navigation, ‘About’ button. The effective main menu buttons are not more than 5 menus. But fortunately we have Hamburger Icon as a trend now to reduce menu space on the website, addapted from mobile apps design style.
This is one of my Re Design project for website design:
3. Wide Buttons with bright colors
Using wide button is esentially today. Specially if it’s a Call to Action button. The trend of button style today is ‘Ghost Buttons’ (whether it’s rounded or sharp square)that use only the outline/stroke color, without fill color, mostly in above the background of images. Use bright color to catch users eyes easily.
4. No Long Text of Descriptions
Except it’s ‘About’ page. If there’s step guide or features or benefits that need to be appears on the Home page or any other pages, try to shortening in each paragraph. Or it will be better if you only use 1 paragraph in each description. This is screen not paper/print or book.
5. Contrast color
Using contrast colors. If the background is dark blue, use the orange button or white button, instead of green or purple button. You can use the baby blue color, though. Use this color chart to help you to pick the right and best color https://flatuicolors.com/
6. Using icons for any of lists
Icons can help user to understand quickly beside they read the description. Use the similar style or consistent style of icons. You can browse free icons set on http://www.flaticon.com/ or if you need colorful flat icon style you can browse here http://www.freepik.com/
7. Always test the UI design on browser
Everytime you have finished 1 section of the page web design, you should test the page on the browser. To see are the fonts clear enough to read or too large? are the color looks nice? are the images are to small or too large? etc. You can simply drag or browse your JPG file into your browser and don’t forget to resize the page design on browser fit with your actual screen size. Right click on the image on the browser, choose Inspect Elements and edit the size to the actual size with your screen. Try it repeatedly until you reach the right sizes on each element.
8. Always update the trend of web design
UI design has new trends every year. UI Design is different kind with print design or advertising design. So don’t hesitate to follow the trend when designing for UI. It’s usually grew to adapted with technology and more effectively from time to time. Lot of UI Designer job vacancies that have requirement to always up to date and know the trends.
So these are the list of what I do on designing UI for website. There are a lot of more points actually, but these are the esential and main things and what I remembered right now. Please share your thoughts, tips about what did you do when you designing UI for websites to create a good even great design that successfully satisfied your clients.