Tips on Designing Layouts Focused around Content

In web design we frequently assume any layout with a spiffy logo and graphics will work out perfect. But designing for the web goes much deeper than attractive page graphics. The entire user experience comes into play and you have to account for a number of anomalies in your layout.

In this article I’d like to examine some tips on designing your web layouts focused around page content. Each type of website is built around a different task and expects different responses from their target market. As such your layout provides the tools required for your users to interact with content such as text, audio, video, or images.

Position your Headlines

The most important news and information should be classified as your headlines. This is generally the most up-to-date articles posted on your website. You could pull from your blog posts or external news source, or alternatively publishing to a 3rd party such as Tumblr or Twitter.

Depending on the type of website you run these headlines may hold less precedence than other content. In a web magazine layout all your latest posts should be enticing enough to grab your visitors attention right away. But for a small media company you may wish to put these into a sidebar widget. You may replace these headlines with a listing of portfolio items instead, since this content holds more value than news updates.

But how about social networks and startups which don’t need to publish headlines? Content is fluid with many of these social media brands. Often you want to use headlines to display your latest features, newest member profiles, signup/login links, and other internal data. Your goal is to convert more visitors entering deeper pages within your site by any means necessary. Use headline titles which catch attention but don’t intrude on the overall page display.

Dynamic Galleries and Image Sliders

Dynamic content is very big these days. So much in fact that you can easily find examples around the web of larger corporations and freelancers presenting data in a slideshow format. With the rise in popularity of JavaScript libraries such as jQuery and MooTools there are tens of hundreds of free, open source solutions.

If you choose to include an image gallery I recommend sticking it onto a single unique page. The homepage of your website is the perfect setup, since a majority of your traffic will be landing here anyway. Try keeping all the images and slider buttons above the rest of your page content, so in this sense the layout will cascade downwards. If you understand the concepts above then you can include links to your portfolio or even external project links right from your home screen!

Identify Problems with Type

The majority of content found in web pages is written in digital text. This would require visitors to spend their time staring at the screen to read and process your written words. Not exactly the quickest way to relay information but it has worked for us going back thousands of years.

Most designers don’t stop to think how important their typography can appear to the overall page layout. I recommend getting a few outside opinions on the color, size, font, and spacing between paragraphs. Dark text on a light background will yield the highest satisfaction in readability, along with larger-than-average font sizes.

Unfortunately you cannot please 100% of your visitors all the time. Take each set of feedback with a grain of salt, as header and paragraph styles can be one of the most difficult areas in design. If you want to learn more we’ve written a small article on typography which offers beginner tips to crafting the ideal page setup.

Another tip to mention regarding hyperlinks – take them deeply into consideration! You want these to stand out not just in paragraph text but in your headers as well. I actually recommend coding a few different styles for links between different page areas such as the sidebar, footer, and internal pages. Keep within a consistent theme but change smaller formatting details such as rounded background corners or font effects(bold, italic, underline).

Gathering User Information

Designers also fall flat when it comes to HTML forms and signup pages. You have to consider just how important these layouts are, since visitors will be interacting with the elements throughout the entire process. Of course you want to make everything simple and straightforward – but how can this be accomplished?

It’s best to keep font sizes on the larger end in mostly all cases. Even if your paragraphs are set to 11px-12px, input fields could range upwards of 15px-16px or possibly larger. This is because most users are typing as they go and will not often go back to look through their input until the very end. You want to be able to clearly make out the characters in each field – especially for e-mail and username data.

It’s also unlikely you’ll be including much written content within these pages. Thus you have a prime opportunity to include some additional JavaScript labels to further explain each step in the form. You can make things a bit “prettier” with CSS, but don’t take the design so far where the form becomes annoying to work with.

Reduce Obvious Distractions

I am an advocate for the utmost simplicity when it comes to designing website layouts. It’s one scenario to include a few advertisements near the top of your header and sidebar. But it’s a whole different story when you have ads littered throughout the sidebar and even within your content.

I’m not saying this is bad practice as a designer, but you should consider how these advertisements will affect visitors going through and reading pages. Not all websites are the same and require careful attention to the details. The reduction of large images and flashy banners will keep attention solely on the page content. Or if you wish to stream sidebar content all the way down your page at least provide extra space and/or padding in-between.

In my opinion whitespace is too often overlooked and undermined – but the balance between empty space and page content is divine. With little-to-no line height and margins between paragraphs all your page text appears to run together. This makes digesting key points very difficult, even when split up between headings.

Using Smaller Graphics and Thumbnails

There is no doubt that image content has the ability of portraying a message much quicker than text. In fact I think all your pages should include at least a few images to break up the reading material. But I don’t think you should include content just because it looks nice – unless aesthetic affects work in your favor.

Diagrams, pie charts, infographics, and other means of displaying information will come in handy for specific types of content. Thumbnails are also great at giving a brief preview behind links to other pages. For example, you may include related post links in your sidebar area with 50x50px thumbnails just to give readers an at-a-glance quick look. This habit is pleasing on the eyes and will likely increase your average CTR.

Conclusion

Designing a website to focus solely around content is difficult. Granted there are helpful web guides and tutorials to get you started on content-centric layouts, these can only go so far without practice. Focus on your own design talents and learn to apply these into the user experience. From this mindset your layouts will begin to naturally cradle webpage content in a dignified and sophisticated manner.

You might also like…

Repeat Work and the Search For The Holy Grail →
Thoughts and Considerations for Freelancing on a Part-Time Basis →
Is Working Freelance Really Worth It? Pros and Cons →
Promoting Your Freelance Design Business with Social Media →
Tips for Converting Your Freelance Operation into a Business →
Thoughts on why Spec Work is Bad and Why You Shouldn’t Do It →
3 Simple Ways to Attract Higher-Quality Clients →
Tips for Landing your first Freelance Design Job →
Newbie Tips For Optimizing Your Blog For Mobile Devices →
An Introduction to HTML Prototyping →
Essential SEO Considerations For A New Website [DOs & DON'Ts] →
Building Up your Web Design Education →
8 Things Newbie Web Designers Should Know About SEO →