10 Effective Tips for Improving Your Web Design

10 Effective Tips for Improving Your Web Design

01. Apply global changes

Here’s a coding tip from musician, producer and web dev Elliott Fienberg that can help speed things up at the early stages of your design work. Use the wildcard CSS rule – using an asterisk as the selector – and you can globally apply changes to an entire page. For example, to change all the fonts on a page to sans-serif, you just need: *{font-family:arial, helvetica, sans-serif;}

This is a great designer’s trick to have in your pocket while you’re going through the design process. Of course, it’s not such a great idea to leave it in your live code, so use this trick carefully and sparingly!

02. Give visitors breathing room

Create enough space between your paragraphs and images so the viewer has space to breathe and is more able to absorb all of the features your site and business have to offer, says Hannah Spencer, graphic designer, Coalition Technologies, a Web design and online marketing agency.

Controlling white space through layout will keep users focused on the content and control user flow,” adds Paul Novoa, founder and CEO at Novoa Media. “With a lot of visual competition taking place on the Web and on mobile, less is more. Controlling white space will improve user experience, increasing returns from the website.

03. Export images as 8bit PNG

Martin Beeby makes an old-school suggestion for handling PNG image files. “If you’re exporting an image from Photoshop to PNG, and it doesn’t need to be transparent, try exporting it as an 8bit PNG,” he explains. “In most cases the image quality won’t be affected but you will massively reduce the file size.”

04. PNGQuant for image conversion

If you want to maintain transparency and minimise file size, there’s a service that can help. PNGQuant can convert 24/32bit PNGs to 8bit PNGS and still maintain transparency. There’s fancy for you.

05. Design every page as a landing page

“Most websites have a design that assumes a user enters through the home page and navigates into the site,” says Michael Freeman, senior manager, Search & Analytics, ShoreTel, Inc., which provides hosted VoIP, cloud PBX service and business phone systems. “The reality, though, is that the majority of visits for most sites begin on a page that is not the home page,” he says. Therefore, you need to design the site in such a way that whatever page a visitor lands on, key information is there.

06. Use responsive design–that automatically adapts to how the site is being viewed

“Rather than developing a site for each device, a responsive site is designed to adapt to the browser size,” making for a better user experience, says Jayme Pretzloff, online marketing director, Wixon Jewelers. And a better user experience typically translates into more time spent on your site and higher conversion rates.

07. Forget Flash

“Thanks in part to the ongoing dispute between Adobe and Apple, the days of Flash as an Internet standard are slowly coming to a close, so why stay on the bandwagon when there are other options that are much more Web and user friendly?” asks Darrell Benatar, CEO of UserTesting.com. Instead, use HTML5, he says. “HTML5 is gaining more support on the Web, with search-engine friendly text and the ability to function on many of the popular mobile operating systems without requiring a plug-in. The same can’t be said for Flash.”

08. Use Typecast with Google Fonts

Monotype recently teamed up with Google to release a new, free public version of Typecast which can be accessed through Google Fonts. It enables you to select any font on the Google Fonts website and then follow the link to the Typecast app.

From there, you can work with that font on text of any length and use a wide range of type controls to build clear, readable type systems through adjustments such as font size, weight and line spacing. Your work can be exported as production-ready HTML and CSS, or PNG files, to share with others or merge with comps.

09. Font Squirrel for free web fonts

Free web fonts have really come of age. With Font Squirrel, Google Web Fonts and the @font-face attribute of CSS3, there’s no need to put up with the typography troubles the last generation of web designers struggled so much with. Here’s our round up of some of the best free web fonts around.

10. Test your design

Whether you are trying different placements for a call to action or even testing different shades of a color, website optimization can make a big impact to your bottom line, states Lindsey Marshall, production director, Red Clay Interactive, an Atlanta-based interactive marketing agency. A user experience manager at Bing once remarked that Microsoft generated an additional $80 million in annual revenue just by testing and implementing a specific shade of blue!

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>