Web Designing is a tough job. We understand the tight deadlines, the multiple iterations, the late nights so we’ve put together some best practices & some design hacks to help you work smart & deliverer nothing short of excellent. Here’s how:
Before You Start
1) Have a Plan: Before you get to work on your project, it’s a good idea to draw out what you’re about to execute – the layout, the design, the images, icons placement, navigation, etc. Writemaps is a good tool to use to plan out your website layout. Many designers will tell you it’s useful to follow the 80-20 rule. What 20% of your content gives 80% value to your audience? It could be images, icons, the copy, stickers etc. but focus on the 20%. This will help you narrow down your content to what you actually need and omit the clutter.
Elliott Fienberg suggests you ask one question: Does your design fit on a post-it? “One exercise I like to do is to write down your core content on a small piece of paper like a Post-it note,” he says. “This will help you figure out what is really important and what can be omitted. The small piece of paper simulates the attention span of most users these days.”
Before you start, also make sure you’ve got your the requirements and scope-of-work between you and the client clear. To eliminate ambiguity between you and the client and keep track of billable time, use Toggl, a hugely useful tool to measure your work & add value to your efforts.
While You’re Working
So you’ve got a blueprint and are all ready to start. Here are some things to keep in mind:
2) Images Are Vital: For every design & every website, the images you use make all the difference. We suggest you invest in a good, professional photographer for your images. If your budget doesn’t allow it, get a hold of amazing stock images at Gratisography, Pic Jumbo, Pixabay and the like.
Icons are necessary too. Small as they are, they too contribute to your website design. Move away from too much copy and replace it with icons that represent what you want to say.
3) Simple is In: You’ve probably read this in our previous articles but we cannot emphasize this enough! A good web design is always one that has a clutter-free feel. Try these tips:
- Hide navigation icons in a hamburger menu
- Use easy-to-read fonts
- Ditch the sliders. It used to be a fad to add multiple sliders to accommodate or showcase more content but not any more. A single, clean, high-resolution image is enough to suffice. It not only allows you to focus on the single most important aspect of the brand but also allows for better user experience sans the clutter.
- Eliminate Social Icons. If you absolutely must have the social icons, tuck them away in the footer of the page rather than the first fold of the page.
- Limit your character count to 45-50 words. Avoid too much text. It only makes the website look boring and cluttered.
- Limit your colour scheme. We know it’s easy to get carried away when it comes to colours but sticking to a few colours adds to the minimalistic feel.
4) Build Responsive: Although this seems like a no-brainer these days, designers still struggle with building some bits responsive. Screenfly & Browsershots are great tools to help build responsive sites. Videos can be the tricky part when it comes to responsive sites. FitVids is a jQuery plug-in that eliminates the problem of responsiveness and Flash embedding with videos.
5) Keep Everyone in the Loop: As a designer answerable to clients all the time, it’s a good idea to show you’re in control. That doesn’t always mean say all’s well when it isn’t. It’s quite the opposite. Being control includes calling out problem areas and roadblocks in your projects so everyone’s in the loop with the process and knows you’re trying your best. It makes you look more professional and builds credibility & reliability. Tools like Google calendars and Evernote help create checklists, reminders and keep up to date. Being proactive is a huge plus point.
Cheat Sheet (Bonus!)
- Use Dummy Image Generator (the image equivalent for Lorem ipsum) for placeholders: Enter the width + x + height at the end of www.dummyimage.com
Eg. http://dummyimage.com/640×480
- Use the wildcard CSS rule – using an asterisk as the selector and apply changes to an entire page.
Eg. To change all the fonts on a page to sans-serif, you just need: *{font-family:arial, helvetica, sans-serif;}
- The Noun Project has an icon for everything! Find what you want here.
- Use the Squint Test – Take a Step Back & squint as you look at your design for a quick way to learn what’s most prominent.
We hope you follow some of these best practices & design hacks! Got further suggestions & ideas? Leave us a comment & we’ll include it!
There is no ads to display, Please add some
