8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 1/9

Powerful Tips and Tools for Web Designers

Designing a business website can be a time consuming task for webdevelopers where some steps are repetitive and lackluster especially

when the site involves big challenges as it is the reflection of your brand

image. Therefore designers need to work efficiently in order to give us a

cost effective results.

Here we will discuss some tips to make your work simpler so that you

will have more time to experiment with your project.

Here we go!

Tips and Tricks

DESIGN WORKFLOW

“Color Schemes” 

Erica Schoonmaker shares her trick for matching up colors and creating

a nice color scheme. Read more… 

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 2/9

“Useful Aligning and Spacing” 

Kris Jolls creates squares for the various spaces to cuts down time and

makes sure everything is aligned and spaced properly. Read more… 

“The Photoshop Web Design Workspace” 

Jacob Cass set-up for the ultimate Web design workspace in Photoshop.

Read more… 

CODING WORKFLOW

  “Perfect Workflow in Sublime Text 2” 

 

“Vertical Editing”

  “Prevent background-color Bleed on Touch Screens” 

  “Quick Tip: Rounded Corners Done Right” 

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 3/9

  “The //* /*/ //*/ Comment Toggle Trick” 

  “Outdenting Properties for Debugging CSS” 

 

“Favicons Next to External Links” 

  “Chrome DevTools Tips and Tricks” 

  “Sublime Text Workflow That Beats Coda and Espresso” 

  “Speed Up CSS Prototyping 

  “The JavaScript “Ah ha!” Moment” 

LIFEHACKS

 Sync a Server to Dropbox Every Day Automatically 

Use backup script which syncs server to Dropbox so that you can

exclude folders if you want. Start backing up today, and prevent data

loss.

 “Ask Slashdot: How Do You File Paper Documents at Home?” 

This discussion covers how to organize your documents

electronically.

 “Print Files From Any Mobile Phone Using Dropbox” 

Use Dropbox to print documents from your phone to any printer

without requiring any additional software. 

 “How Does Trello Access the User’s Clipboard?” 

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 4/9

When you hover over a card in Trello and press Ctrl + C, the URL of

this card is copied to your clipboard. How does Trello do this? Find

the answer in this post.

Tools

TimeZoneSlider 

Time Zone Slider is a free to use web application that lets you find out

what time it is in other parts of the world. It lets you add as many as

people to find the best meeting time.

World Time Buddy 

World Time Buddy (WTB) is a convenient world clock, a time zone

converter, and an online meeting scheduler. Best tools for those who

often finding themselves traveling, in flight, in online meetings or just

calling friends and family abroad. 

Doodle 

Doodle offers a wide selection of online solutions that radically simplify

the process of scheduling appointments that suits everyone — with

only one email.

DESIGN, COLOR AND IMAGE TOOLS

Hex Color Tool 

Hex is a color tool that automatically displays any hex color in darker

and lighter shades.

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 5/9

 

GuideGuide 

GuideGuide make dealing with grids in Photoshop easy. Pixel-accurate

columns, rows, midpoints and baselines can be created based on a

document or selection with the click of a button. Guide sets can be

saved for repeated use.

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 6/9

ColorBlendy 

Ever fire up Photoshop just to multiply a couple of colors? ColorBlendy

can do this easily in your browser.

CMYK to Pantone 

Input a CMYK color code, and this tool will work out which Pantone

colors are close.

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 7/9

ImageMagick 

ImageMagick is a command-line program that can do many operations

on images quickly and with high quality. It’s especially useful for

resizing and sharpening images, generating thumbnails, etc.

Review 

Updating large and possibly responsive website can be a difficult task.

You never know whether a change will break anything. These tool gets

screenshots of all of your running websites in different resolutions, so

that you can spot any issues.

DEVELOPMENT AND TESTING TOOLS

Emmet Documentation 

Emmet is a Web developer’s toolkit that could greatly improve your

HTML and CSS workflow.

Alias Alias enables you to manage all of your aliases online and to browse a

list of cool aliases submitted by others.

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 8/9

DOM Monster 

DOM Monster is a cross-platform, cross-browser bookmarklet that will

analyze the DOM and other features of the page you’re on, 

BrowserStack 

BrowserStack gives you instant access to all desktop and mobile

browsers, which is great for testing your designs, especially if you

cannot afford to buy many devices.

USEFUL CHROME EXTENSIONS

Tab Wrangler 

It automatically closes the inactive window but you can easily get

them back too.

Responsive Inspector 

It allows you to view the media queries of visited websites. It is very

useful when developing responsive layouts because it visually shows

what resolutions are defined in style sheets.

Shortcut Manager 

Using this extension, you can change the browser’s default shortcut

keys, and assign any bookmarklets or JavaScript actions to your

hotkeys

Auto Login 

This tool automatically logs you into websites that Chrome has saveda password for.

OneTab 

OneTab is perfect for anyone who tends to open too many tabs in

8/18/2019 Powerful Tips for Web Designers

http://slidepdf.com/reader/full/powerful-tips-for-web-designers 9/9

Chrome. It saves up to 95% of memory and minimizes clutter by

reducing all tabs into one.

FURTHER READING

  “The Modern Web Development Workflow,” by Paul Irish. 

  “Tooling For The Modern Web App Developer” (slides), by Addy

Osmani. 

  “The New Wave Utility Belt” (slides), by Addy Osmani. 

  “How to Debug Node.js Applications,” at Stack Overflow. 

  “Simple Tools for Front-End Developers,” by Louis Lazaris. 

We have gathered some great tools, tips and tricks for you that we

have found very useful. Hoping that this will speed up your web design

workflow or solve all of your development issues.

If we forgotten to share any tips or tools in this list, do share with us in

the comments section below.