×

18 Insider Web Design Tricks to Simplify Your Process & Workflow

18 Insider Web Design Tricks to Simplify Your Process & Workflow

We independently research, test, review, and recommend the best products—learn more about our process. If you buy something through our links, we may earn a commission.

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.

sponsored message

Adobe Creative Cloud Discount

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.


sponsored message



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

sponsored message


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.

Share This Post:

27 thoughts on “18 Insider Web Design Tricks to Simplify Your Process & Workflow”

  1. Great tips! I’m going to apply them to my development of databases in Filemaker Pro.

    One thing, though, is the Post-Its. That brings back nightmares from a disastrous Lean consulting company that was obsessed with Post-Its for everything they did. They ruined two years of productivity and inflicted massive amounts of RSI in our most critical unit because of their “Toyota Way” unthinking approach to things. (Give a child a hammer, and everything they encounter requires hammering.) So forgive me for flinching at the mention of those colorful little pieces of paper.

    I have an alternative idea. Use an outlining program and a visual idea-mapping tool such as OmniOutliner and OmniGraffle on the Mac, or Visio and some kind of outlining tool on PC (NOT Word). They give you the tools to do idea mapping that Post-Its can’t possibly compete with, and they don’t kill trees.

  2. To getting success in Online business is really hard process. Therefore, the most crucial factor is the designing of any website, because it makes first impression in user’s mind. So, I think every designers looking for a great web designing concept and making the process as simpler as possible. This blog is really helpful to simplify the Web Development Process. Thanks Jack Dawson to sharing such a great post with us.

  3. Its contain lots of information and tips I need. As a newer its very helpful for me to understand and work with it. I specially say one thing , I had fun reading this and many great insights here. I will share this information with my friends and they will certainly love to read this. Very informative, I’ll definitely give these 5 stars.

  4. Awesome post. All tool and techniques are very useful for web designers. we also used all tools and tricks in our last working site and we used 8 bit .png images and got amazing site speed. Thanks for share. Good job keep it up. 🙂 (y)

  5. Subliminal messaging is a wonderful thing. You can gain your customers’ trust by building the credibility of your brand naturally. Professional social media and white papers are an effective way to show off your industry authority, but you can also do it subconsciously right on your website.

  6. Subliminal messaging is anathema for garnering customer trust. Once they discover they are being manipulated in such a sneaky way, they will abandon your product/website. Trust is earned, not manipulated into existence.

  7. Great overview, looks like you hit on basically all of the key points when getting started with a professional website.

    THANKS

  8. Great post. The trick you have told in the post are very nice and I think every web designer should know these tips and tricks. Please keep delivering such types of nice posts. I am always here to read.

  9. very nice blog! For a web design company it is essential to have a perfect workflow for a good design. In that case your tricks are worth reading. Great work!

  10. It is helpful information.Thank you so much for sharing helpfull post

Comments are closed.