18 Insider Web Design Tricks to Simplify Your Process & Workflow

in Social, Webdesign

Web Design Tricks

Over time, every web designer collects their own stash of tricks to make work easier – hacks, workflows and insider information that only experience teaches. This article is a collection of some of these well-guarded secrets as shared by the industry’s top gurus – quite the collection for a young web designer trying to speed up workflows and improve design. Have fun as you read on!

Tricks for perfect site planning

Site Planning

1. ‘Post-it’ your design ideas

Ask yourself: can you fit your design idea on a Post-it? Write down the most important aspects of the content and design on a small piece of paper – like a Post-it, for instance – which will help you understand what’s absolutely necessary and what you can do without. That small piece of paper is an excellent representation of the attention span that web users have nowadays.

2. Planning the user flow

Another great use for Post-it notes is to help in planning your user flow. Map out the core processes on a series of Post-it’s as you visualize how an average user would move along the site. You can be sure that you’ll have a more user-focused project in the end. You can also use virtual sticky notes for this. Learn more about the creative process of web design.

3. Going slow

It’s common for visually-inspired artists to pull out their sketchpads first. Experts advise slowing down the process a little – before going to design, take a scenario-oriented scheme, where you establish the user’s goals and recreate their journey towards them. Now, build a design that effectively fits the scheme. See some recommended design tools here.

4. Version control using Dropbox

Dropbox Pro is a useful tool if you need a simple versioning system. In addition to 1TB storage space, you can get your files in versions for up to 30 days consecutively, which is more than ample to rescue you from the effects of accidental deletions, crashes and bad decisions. You can get an extra free 500mb with my sign up link.

Tricks for faster coding

Faster Coding

5. Applying changes globally

Expert web designers advise using the wildcard CSS rule – this involves making an asterisk (*) your selector – which enables you to apply any changes globally to the whole page. This can really help you save time, especially in the initial stages of design. While useful for the design process initially, it’s not advised to leave it in the live code, so exercise restraint whenever you apply it.

6. Using CodeKit tool with browser reloading

Using CodeKit, you can immediately see any changes made to the browser without having to reload the webpage. It’s especially recommended for Mac users, and it makes the ease of making browser changes worth the small cost incurred to get it. You no longer have to refresh your browser for changes to take effect anymore.

7. Using FitVids to embed videos

Even with the simplified video embedding that comes with HTML5, designers still face some obstacles – enabling responsive resizing for videos and ensuring graceful degradation on Flash where the HTML5 embedding is not supported. FitVids is a plugin by jQuery which solves both problems.

8. Checking character count

You’re advised to have between 45-75 characters in each line for reading comfort. To make sure that you stick to this in your fluid or responsive design, place some dummy text on the page and then insert asterisks (one each) at the 45th character point and 75th character point. Next, test the site to ensure the text density resizes according to that range.

9. Setting garish outlines

This little trick can make design across platforms much easier. If you’re working on media queries, use a garish colour to set the outlines – you’ll immediately be able to see the exact rules that have been applied to what you’re seeing at the time.

Tricks for better layout

Better Layout

10. Finding colour inspiration

Colour blindness is a nightmare for web designers, which makes Adobe Kuler a very useful tool if you’re a colour-blind web designer. You can use Kuler to put together your colour palettes as you work through the projects. Another useful community is ColourLovers, where members offer designs, ideas and colour schemes that can inspire you. See more on accessibility in web design.

11. Using GuideGuide

GuideGuide is a Photoshop panel with rows, columns and midpoints. Using grids is the best way to design a website, but it can be tedious to set up your own grids each time you’re designing in Photoshop. This is where GuideGuide comes in, making the entire process easier and faster.

12. Using 12-column grids

Another insider tip is to use grids where the number of columns is entirely divisible by 4, 3 and 2. This gives the 12-column grid which is very popular because it is highly versatile. You could try out Zurb Foundation for a great grid system.

Tricks for better image management

Better Image Management

13. Using 8bit PNG format for image export

Where you’re trying to export to PNG from Photoshop, this old-school trick might help: if you don’t need it to be transparent, export as 8-bit PNG, which seldom affects quality of the image, but dramatically slashes down file size.

14. Using PNGQuant for image conversion

Where you need a transparent image but can’t use 8bit PNG and still want to reduce the file size, use PNGQuant which is a tool that converts 24-bit and 32-bit PNG files to 8-bit PNGs without affecting the image transparency.

15.  Using Smushit to reduce image sizes

Smushit is a tool that removes idle bytes from image file sizes using optimization techniques. Expert web designers swear by SmushIt for faster image loading speeds and better operability across multiple devices. ImageOptim is another great tool.

Tricks for better web typography

Web Typography Tricks

16.  Using Font Squirrel

Gone are the days when typography was a major problem, thanks to the sheer capabilities offered by Google Web Font, CSS3’s @font-face attribute and Font Squirrel – there’s a world of free web fonts to choose from, literally.

17.  Using Typecast

Typecast is an app created by Front, a design agency based in Belfast, and it makes design of typographically-rich sites just breezy. You can quickly build and compare different typographical palettes with Typecast.

18.  Using Google Fonts with Typecast

A new free version of Typecast is available on Google Fonts, thanks to a partnership between Google and Monotype. With the tool, you can select whichever font you want from Google Fonts and then follow a link redirecting you to the Typecast app, where you can use your selected font on any length of text. You can also make adjustments to the font weight, size and line spacing to come up with clear and legible type systems.

Author Bio: Jack Dawson is a web developer and UI/UX specialist at BigDropInc.com. He works at a design, branding and marketing firm, having founded the same firm 9 years ago. He likes to share knowledge and points of view with other developers and consumers on platforms.