6 tips to speed up your web design creations by Daval Jogi

Productivity and creativity are the important aspects for any web designer, and the purpose of this post is to provide advice on how to speed up coding and manage the various design elements more efficiently. Once you become familiar with the techniques, you will free up your time to work on additional difficult aspects of your projects.

1) Before you design, build a plan

• Include the client

The client should be included at every stage of the design. They have a much better understanding of the business goals associated with the project than you do. A successful web design will allow business goals to be realized.

• Put user goals at the heart of your design

It is very easy to take charge of your web design, without really identifying what you want to achieve. One approach is to establish the goals of the site, map out the journey, and then start the design. If you do not consider user approach, then taking charge of your web design will create problems.

You may want to write down your content on a note. Although strange, some designers believe that ignoring the scope of the core content is a good design trick to draw the attention of the average web user.

• User flow planning

Good user flow is crucial to getting a site design right. If you like the idea of Post-it notes for the core content, you can expand it by using Post-it notes to map user flow.  This technique is used as it focuses your mind on what is important.

• Version control

Most designers agree that a good version control tool is important. It is all too easy to delete a version that you wish you hadn’t. For example, Dropbox Pro gives you a 100GB of storage and version control for 30 days. It will help you to get rid of accidental data delete.

2) Use Photoshop more efficiently

• Photoshop layer names should be understood by the team

If you are working on Photoshop as part of a team, make sure you name layers when you create a new Photoshop layer, so the rest of the team can understand them. This greatly speeds up the design process as the team does not have to determine about the layer is before they can work on it. To maximize efficiency discard the unneeded layers to avoid confusion.

• File your layers appropriately

Besides keeping the layers of naming and binning, keep a folder for current designs.  Put the old layers into a folder labeled ‘Archive’.

3) Code faster, code true

• Make global changes to speed up development time

If you have a need to change an element across an entire page, the ‘’ becomes your best friend. Simply by putting the ‘’ in front of a piece of code will make a global change which will save you a considerable amount of time:

For example, * {font-family: Arial, Helvetica, Calibri;} this will now change the font for the entire page to Calibri.

This should not be used in the live code, but during the development process this is a real time-saving gem.

• Keep your focus with CodeKit (Mac only)

One of the secrets to working in any kind of creative industry is to keep your focus, and this is the real strength of CodeKit. It allows you to view changes in the design without having to refresh your web browser. Although this does not sound epic, by not having to refresh your page to view a change, you are keeping your focus. The focus is vital for creative design.

• Use Fitvids jQuery plugin to make compatible videos

FitVids is a jQuery plug-in, which simplifies video embedding and has two specific functions. It resizes HTML 5 videos in a responsive size. When HTML5 is not embedded video, resizing degrades elegance of Flash player. Given the importance of having a responsive website for better UX, and Google’s recent algorithm change, this plugin is gold.

• Monitor your character count

It is generally accepted that responsive and fluid designs operate better when character counts per line fall between 45-75.

To help your designs stay within this parameter, put dummy text on your page, with an ‘*’ with characters between 45 and 75. It is now easier to see if this works when you test the responsiveness or fluidity of your design.

• Develop grids faster using GuideGuide

GuideGuide helps you to develop grids faster.  Many developers prefer it to Photoshop as it has an easier UX. GuideGuide helps you to get rid of setting up grids every time.

• Use a 12-coloum grid

On the subjects of grids, it is easier to keep your designs working with a twelve column grid.  This helps you keep track of the design and is a good idea to use the grid with columns nicely divisible by 2, 3, and 4.

4) Color palettes

• Orange is the new black: Use a color palette tool for better design

There are plenty of color palette tools to help you put together good color schemes for your design. Color wheels will help you to guess which colors work together. Designers from all fields use them all the time. Tools such as Color Lovers and Adobe Kuler can be great sources of inspiration.

5) Optimizing images for better load times

• Speed up load times by reducing image size

Optimized images help the website in loading time. By removing unnecessary image bytes, you can reduce the size of your images and speed up load times, especially on smaller devices. Tools such as Smushit can do this for you.

• Optimize your PNG files

Here are two tips for you when handling PNG files:

• If you do not need to maintain transparency, try exporting your image as an 8-bit PNG file. Most find that image quality is unaffected and you have a smaller file size to load.
• If you need to maintain transparency, try using PNGQuant. It can convert 24/32bit image sizes to 8bit and maintains transparency.

6) Typography tips

• Realize the magic of Typecast

What is Typecast? Typecast is an app that allows you to quickly build and compare typographic palettes. If you’re using a typographically rich site, this tool is a must – have.

Typecast also has a free version of their app which allows you to find any font on the Google Font website and then follow back to Typecast’s app.

Once you have your font, you can put it through the design process, change the size, weight, and line spacing.  Once it is completed, you can export it as HTML, CSS, or PNG files with other team members in a production ready format.

• Need a free font?

Sometimes, you just want a free font to use. With Font Squirrel, Google web fonts and @font-face attribute of CSS3, you do not need to struggle with typography trouble as the last generation of web designers did so.

By incorporating these tools, you will work faster, more accurately, and to higher standards. What web design tips do you have to share? Please let us know in the comments below.

This article is originally share at technasia by Daval Jogi.

Visit our web Here.