Design Patterns for Creating Exceptional User Interfaces on the Web

Website interfaces are often very similar yet slightly distinct from website layouts. When you design an interface on the web you are often expecting some type of user interaction. This could be a input form, navigation bar, or some other type of dynamic widget.

User interfaces on the web could also be focused on commonplace website elements such as navigation menus and footer boxes. In this article I would like to share some ideas for building captivating user interface on the web. There is no single solution for every web developer to follow. However there are some great design patterns you can take into account when starting on your next web project.

Fully-Loaded Content

Some designers like to go for large content and place this all around the webpage. When you are trying to market a service or product, you need the website layout to stand out among your competition. By loading up your content down the homepage it gives your visitors the option of scanning your content at once, or pursuing other internal pages.

iZettle mobile app payment solution iPhone iOS website

iZettle is a great example of this design trend being applied to the real world. They are a mobile payment company designed to connect into your smartphone device. The homepage features a large slideshow explaining their features coupled with big photography. But as you scroll down you will notice the page is very long, and incorporates much of the data all at once.

As the visitor you can digest this at your own pace without worrying about reloading the page or navigating the website. Although there are plenty of links to switch between, so navigation isn’t a problem. The design pattern of information overload will work up to the point where it is too much to handle all at once. Find that peaceful center where you can offer a large slew of helpful information, but not so much that you are scaring away visitors.

Infinite Scrolling Pagination

I have to believe that most designers have seen this effect used in some websites by now. My immediate consideration is on Pinterest which has seen enormous buzz for a seemingly random new startup idea.

tumblr homepage dashboard auto infinite loading

Another great example is from the microblogging platform Tumblr. As you load the dashboard and scroll down you will notice a loading bar appear after each segment. The pagination is loaded dynamically via Ajax without ever refreshing the page. And all of the older page content is still there, so users can go back up at any point. This unique effect can stabilize user interfaces which have tons of pages and lots of smaller block-level content.

Just be careful how you apply this effect onto webpages which may not need it. Sometimes having pagination on your blog is a good thing. Search engine crawlers can find your content a lot easier, and your visitors will have a permalink URL to get back to the 20th or 30th page in your post archives. This is still a newer UI design idea but is catching on and spreading like wildfire.

Vivacious Page Elements

Designers who can make custom buttons and banners from scratch are in a better position for customizing website interfaces. Imagery and unique graphics are some key points to attracting a user’s attention. And to keep people using your interface these graphics should be simple yet flashy and authoritative.

Oatiful has a great website branding which focuses on unique and relatable imagery. First the top toolbar is designed to feel like a banner or page ribbon. All the navigation links are dynamic which slide down to each section on the page.

Oatiful eating website healthy foods

Additionally each page section has a set of photos related to the topic. Areas on the page such as Promotions and Topping Suggestions use photos and graphics to keep your attention on the section. It is very easy to convey your message when there are images to back it up.

Interactive Thumbnail Galleries

Creating a page listing for your content is not often very difficult. WordPress and other similar CMS’ offer this feature right out of the box. However if you were to customize a listing using thumbnails there is less content presented immediately. This means as the designer you should prepend this content elsewhere on the interface.

CSS Bake Gallery website design inspiration layouts

Looking at the website gallery CSSbake you can see an example of a their thumbnail listing. The gallery is split based on newer entries and can also be sorted by user rating. As you hover over each thumbnail a small div will slide up to display the website name and current star rating. This effect could be applied to any other metadata, including external links to the websites themselves.

Informational Product Tours

When you are building software or digital products the user interface for your sales website must become a key selling point. Demo videos are one way to go, especially for newer startups and web applications. But you should also consider dynamic product tours which explain components and your overall services.

Slickplan XML website sitemap generator webapp tools

Check out the website for Slickplan which is an excellent webapp for creating sitemaps. At the top of the homepage you will find a link to stream a demo video of their product. But scrolling down a bit you will also find a featured tour widget complete with various segments and detailed information for beginners.

Slickplan sitemap tour website features online

If you click through the navigation links you will notice each frame is loaded dynamically via JavaScript. Some website tours will send you over to different pages so that you can take a look at the different interface elements. However I believe that dynamic tours can be a much easier solution for most web developers. Your average user does not like being whisked away to alternate pages, and they want to see what your product can do almost immediately.

Organize and Label Content

This final yet intriguing design pattern comes from the new Treehouse website layout focused on educational resources for web designers. Their library includes topics from HTML5/CSS3, jQuery, PHP, Ruby, and even Objective-C for iOS programming. You’ll notice how each of these sections is labeled and has a series of projects devoted to these topics.

Treehouse Website homepage learning web development mobile apps

When you are presenting information to visitors who may not completely understand what you do, it’s best to lay this out as simple as possible. Pretend you are explaining your website to a child or teenager who has no background information on your company. Icons and screenshots will not always be enough. Sometimes you’ll need to directly explain things point blank – and anyone confused by your website will be very thankful for this.

But don’t take this idea as an argument against using graphics. Icons and badges are the perfect way to capture immediate interest from readers. But to get them moving the rest of the way you may need to grease the wheels. Providing an exceptional user experience isn’t always strictly about website design effects. It also has to do with positioning information and how your webpage content is interpreted by the average visitor.

Final Thoughts

Designing website interfaces is a seriously tough job and requires years of practice to build a solid skillset. Whether you’re creating admin dashboards or frontend website layouts, the interface effects are all built to be used by people. And you have to ultimately consider people as the final judge to any digital interface.

I do hope these tips can get you thinking in terms of brilliant and simplistic user interfaces. Nobody started off as an amazing designer or acquired the skills by just wishing for them. It may take lots of practice before you gain traction and confidence in your design prowess. But keep trying out new methods and find the UI solutions which work best for you and your style of web design.

You may also like:

50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →
Our 50 Favorite Web Developers Resources and Tools from 2011 →
The 50 Most Useful jQuery Plugins from 2011 →

Speckyboy Design Magazine

Leave a Comment