Designing Modern Web Layouts with Professional Flair

by Jake Rocheleau

on August 16, 2012

in design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

It’s very easy to tell the difference between a modern website design compared to something done 5 or 10 years ago. Web designers have quickly grown into a new phase of glossy buttons and CSS3 webkit properties. All of these effects can be applied to website projects today in order to prepare for a comparable outcome later on down the road.

In this article I want to look into modern design techniques for creating professional websites. I’ll use a few current examples in the article which we can compare with each other. Some trends just do not work well on all websites, so you’ll have to take these ideas with a grain of salt and gauge them for each situation. But it’s very clear that web design has entered a more advanced development cycle and as such we are noticing tremendous adaptations with modern layouts.

Big Catches the Eye

The first goal for any layout is to draw attention from your viewers onto certain areas of the website. You can do this any number of ways – too many for listing in this one article. But looking over examples of other powerful business websites may give you an idea.

We Are Empire design studio website

We Are Empire is an excellent company which designs website layouts and mobile phone app interfaces. You can quickly see how their use of big photography catches your eye in a heartbeat. Also as you scroll down the page their featured photograph stays in place like a fixed background. You can pan around the website and portions of the image will fade in color.

All of their navigation links and core content towards the bottom is focused around grabbing attention. Bright colors like whites and orange are noticeable right away. It’s best if you can design something limited with 2-3 color choices at most. There’s always the opportunity to increase your color choices or even redesign at a later date.

Working with Responsive Design

Mobile responsive web design is all around the watercooler with so many new articles and tutorials published in recent months. CSS3 media queries have changed the way we build layouts and adapt websites for mobile phones.

There is obviously nothing wrong with creating a separate mobile layout instead. This keeps everything organized in separate directories and you don’t need to go back and edit your old template. But moving forward it’s not a bad idea to keep your designs fluid so they may work on smartphones or tablets or laptop PCs.

The Bodhum Network homepage screenshot

The Bodhum Network is a good example using responsive HTML5 techniques for much of the layout. You can always setup img tags with a max-width: 100% so that image media will resize naturally based on the window size. Also you should rearrange navigation links so they can fit on a smaller mobile screen display.

There is no doubt that responsive design has been growing strong. You want to support everybody coming to your website in the most professional, conventional ways possible. For additional mobile web inspiration check out our previous gallery of responsive web designs.

Trendy Browser Effects

There are some designs where you have a good idea but it’s difficult to gain traction from your audience. Some designers really like to push the envelope and create a system much more confusing than normal. But these are perfect when you’re trying for weird designs to catch an “awe”-factor from your visitors.

Jon Montenegro portfolio website design

The portfolio website of Jon Montenegro is created as one big text block. Each of the letters are spaced the same distance apart and styled the same, except for links. You can quickly discern which links go to internal pages on the site. But you can also see how this design could be very confusing to some people.

You’re always taking a chance with something like this. You want to support as many people who would enjoy your website, but you don’t want to sacrifice personal flair. I love the idea of case studies and tests among your friends or colleagues. Then you can get a solid idea of just how far your designs may be pushing comfort boundaries – either too far or maybe even not far enough!

Dynamic Page Effects

There’s no reason to shy away from JavaScript or jQuery in modern web development. Perhaps a decade ago it was commonplace to find people using Internet Explorer or older browsers with no scripting support. But today’s Internet is a much different beast, and you can safely support most jQuery effects even in mobile browsers!

Styiens record labels music layout

Of course, you’ll want to make sure the effects you’re creating aren’t just pointless or annoying. In the Styiens website they’ve setup two distinct page layouts for music artists and record labels. Clicking on either link will open up a dynamic block of content which you can flip through by using the left and right arrow icons.

Styiens music and artists album layout

You have to consider why you’re using these effects and what type of emotional response you’re going for. When viewing the Styiens website I’m overwhelmed with their nature of professionalism. By looking at the first landing page you do not expect such a content-rich website hiding behind a few links. Often this level of surprise is a good thing, since it tends to stick in the minds of your visitors where they may return again in the future.

Minimalism with Icon Graphics

Minimalist websites are possibly the easiest and quickest solutions for a business or startup company. You don’t need to include very flash graphics or vector mascots to promote your branding. Often the webpage is designed with a white or black background and contrasting colors for your page content.

Luan Freire Kondo portfolio and website design

The freelance portfolio of Luan Freire Kondo is an excellent example of combining minimalism with eccentric company branding. His personal website has so many icons that you can tell he has put thought into the layout.

But it’s also not so bare-bones full of whitespace that you despise the layout. Luan has found a solid balance in his design, and the icons behave as part of the portfolio too.

Final Thoughts

Hopefully this article can get you thinking about how you put together a mockup or website layout. It’s tough to get started with a blank sheet of paper or document in Photoshop. But the more you practice, the more you’ll learn and understand where you went wrong in the past.

I’ve put together these ideas for more professional websites aimed at businesses and startups. But really these techniques can work with almost any niche. It’s all about how you apply different icons or color schemes to suit your best interest. If you have any ideas or questions on the post feel free to share with us in the discussion area below.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+