7 Web Design Hacks to Help You Work Quicker

Eli Freelancing, Graphic Design, Web Design Leave a Comment

As graphic designers, we are consistently on the run against time, always minding deadlines and making sure we meet each one of them. Over time, we develop habits and systems that help us accomplish certain tasks in the quickest way possible. Most of these pertain to the more menial tasks, so we could quickly get those out of the way and focus on the nitty-gritty part of the project, which is doing design work.

In this article, we are going to look at some simple but effective web design hacks to make your work life a bit easier. These tips won’t give you better design results (or perhaps they could), but these will definitely make your workflow process more efficient.

1. Get the GuideGuide Plugin for Photoshop

guideguide demo

If there’s anything that’s always present during the early stages of web design, it’s definitely guides. We need them to perfectly align our elements and space them out evenly. They can be a pain to setup though if done manually. Which is why designer Cameron McEfee designed the Photoshop plugin GuideGuide to make – as their site claims – “dealing with guides in Photoshop painless”, which I could totally vouch for. But don’t take my word for it, Smashing Magazine and Adobe have already featured it.

If you head over to their site, a demo interface of the plugin is sitting on the top. You could play with the features and it’ll produce the results right there beside it. With this plugin, you could setup grids by inputting values on fields such as Columns, Rows, Gutters, etc. Or if you’re quite advanced, you can use grid notations to create any type of grid you can think of. You can also create guidelines with reference to your canvas or a marquee selection. Lastly, you can save any grid settings that you like as presets for future projects. Click on the article by Smashing Magazine above to see what else this plugin can do with a little bit of creativity.

2. Work Off a Cloud Platform

cloud server

Today is an amazing time for connectivity and internet, and with the explosion of Cloud technology, this experience is greatly enhanced and made more easy. So if you’re still not riding with the Cloud wagon, you really should consider taking the upgrade. Nice thing about this is that it doesn’t have to cost you anything. There are many Cloud platforms available on the internet (e.g. Dropbox, Mediafire, Box) that starts with a free program for a Cloud capacity of 5-15 GBs.

By moving all your files to a local Cloud folder, you automatically upload and sync them with a secure server. If you need to send your files off to your client or a developer, you simply send them a download link of your file and they can grab it off the server. No need for email attachments and file size limitations. Any revisions done on those files will automatically reflect on the download link you give them as well. This basically makes file sharing very easy, and it eliminates all the limitations of email back when this was the only option before.

On top of that, by migrating all your files on a Cloud platform, you automatically backup your files and prevent losing everything should a fatal crash happens to your computer. Trust me, you’re doing yourself a great disservice if you’re still not working off a Cloud platform.

3. Use Wordmark.it to Help You Decide What Font to Use


Here is a real nifty tool you can resort to if you’re having trouble deciding what font to use for your project: Wordmark.it. By heading to their site, you can type anything on the text field on the title bar and preview it on varying typefaces. What makes this site unique and different from other font websites is that it only previews fonts that you already have installed on your computer. By utilizing a simple Adobe Flash script, it can detect the fonts installed on your computer and preview it using HTML and Javascript. You only need to turn your Javascript for your browser on. And while it utilizes Flash, you can still use it on your iPhone and iPad. Pretty convenient, huh?

Additional features include displaying your text against a dark background, increasing font size, and changing character cases. I think what makes this very convenient is the fact that it uses resources that you already have at your disposal. It eliminates all other technical aspects and lets you focus on the only important task at hand: choosing the right typeface. It’s simple, effective, and doesn’t disconnect you from your creative focus.

4. Bookmark These Free Stock Photo Websites

cats jumping

FREE. Stock photos. Bookmark. Now.

Tip: Don’t just bookmark them one by one, put them in a bookmark folder and label it with something awesome.

5. Place All Usual/Common Vector Elements in One .AI File


usual resources

When we’re designing websites, we often use certain design elements that are common among multiple projects. Such examples of these are social media icons, the email icon, phone icon, location icon, cart icon, etc. They are all vector files and they frequent most website designs.

So what you can do here is take the most common design elements and place them in one .AI file. Add other design variations of each element so you’re not stuck with using the same vector object over and over again. This way you will have options and they will all be consolidated in a single file. Next time you’re designing a website, you can just open this file up and all your usual resources will be in one window. Poof, quick and easy.

I practice this myself and have shared my .AI file freely on this website. If you want to download it, you can submit your email on the opt-in box on the sidebar and you will be redirected to a download page where you can grab it. Take note though that by doing this, you will be subscribed to our newsletter program and permit us to periodically send you informational, non-spammy emails.

Extra tip for quick access: I added the .AI file to the Favorites-sidebar on Adobe Bridge so I can access it instantly whenever I need it.

6. Check Out This Ultimate Pattern Website

subtle patterns

Subtlepatterns.com is your ultimate resource site for all your tilable background needs. They offer a wide selection of quality patterns which you can freely use for all your design projects. You heard that right – they’re available for free. And with the abundance of style and variety, I’m sure there’s something here you can use for each on of your project.

If you head over to their web site, you can immediately test each pattern and see them take effect live on their website to help you decide if you want to download the pattern. If you like everything, you can download everything by clicking the download button on each one – all 300 plus of them. Or if you want, you can purchase their plugin for a small fee which you can then integrate within Photoshop and have all patterns, including future uploads, available right within your software. I’m not affiliated with these guys in any way, but I think they’re offering something truly valuable to the design community which deserves some credit. Plus I’ve used it myself multiple times and I really love it. Go ahead, give yourself a treat and grab some cool patterns.

7. Take the Time to Label and Organize Your Layers Palette. 

organized parts on table

This may sound like real basic advice, but if you’re not practicing it yet, try to do so now and your future-self–not to mention your developer friends–will thank you for it. There’s nothing more cumbersome than opening an old project and going through a pile of unorganized layers just to pinpoint one layer that needs to be fixed. Just imagine the developer who has to go through each of them because he needs to slice everything.

Simplest way to fix this is to just properly name your layers in a general manner so everyone, including your future-self, would recognize it right away. You can then group them into folders according to section. You can even integrate the color-labeling for the layers. This way each layer group can be easily distinguished from the other when they’re all expanded.

Basically you do all of this just to lessen the overall friction in your work flow. Trust me, in the long-run, you’ll thank yourself you took the time to organize your layers.

Any Tips To Share?

What about you, do you have design hacks and systems that you’ve developed for yourself to help you be more efficient with your work? If you do, you can share them with everyone by leaving a comment below. This way we can help each other and make the daily grinds a little bit easier.