Welcome to our virtual newstand, full of web news, business tips and more. Please hop in the discussion and leave a comment.
Get blog updates delivered straight to your inbox, subscribe to our RSS Feed:

12 Web Design Shortcuts to Try Out This Month


 

Sometimes completing a task in a new way spurs innovation. Whether you’ve got a laundry list of hacks you routinely use or you typically work by the book, try something fresh this month! When you work in any creative industry, being creative is your job. However, the need to be creative all day every day can take a heavy toll on your inspiration. If your designs have started to look like a signature template or you’re overwhelmed with orders, these shortcuts, tips, and tricks can help.

Go Backwards 

As a designer, you probably start with a sketch mock-up of the website first, right? Staring at that blank page while you wait for ideas to start popping up can seem intimidating. Sometimes you might even encounter the dreaded "designers’ block." In situations like this, working backwards can be helpful. Start with the endgame first. Build the design based on where the customer will end his or her journey. For example, is the goal the customer viewing the gallery or adding a product to his or her shopping cart? This will shape the navigability of the website and what elements of design should take priority. 

The Post-it Trick 

It's not uncommon to become overwhelmed with ideas. You're a designer; it's your job to be creative! Narrowing down those ideas is how you end up with a comprehensive and workable design, but that's easier said than done. Imagine fitting your design ideas onto a single Post-it note. This exercise will help you determine the most important aspects of your work. This is because the size of the Post-it note accurately represents the attention span of today's average web users. Remember, less is more.

Make Global Changes Easy 

Using the asterisk as your CSS selector lets you quickly apply changes to everything on the website. This can be extremely helpful in the beginning stages of design when you're trying out different looks, fonts, or other elements. It's also a fantastic way to make site-wide changes if you've found a recent problem while doing a website health check. Just make sure to remove it before the code goes live. 

See Changes Without Reloading 

Isn't it a pain to make website changes only to reload the browser to see how they look? Well, now you don't have to. CodeKit is a remarkable new tool that lets you see browser changes right away without having to reload the page. It's especially helpful for Mac users, since reloading a browser can really cut into design time. CodeKit is a fine way to make sure you've complied with web design best practices without having to wait around for the page to load. 

Resize Videos With One Click 

HTML5 is a simple way to edit and embed videos, but you can still encounter issues with responsive sizing and areas where HTML5 isn't supported. FitVids is a jQuery plugin that allows videos to resize themselves seamlessly without losing quality or fluidity. 

Create Palettes Like a Master Colorist 

Just because you're a web designer doesn't mean you're a master of color schemes. Color is important to a website, but color theory is so nuanced that designing a color palette can sometimes eat up a lot of time. Luckily, there are plenty of apps available that take the guesswork out of combining colors. Apps like Adobe Kuler and Paletton let you choose a color from the color wheel. They will then display secondary and tertiary choices. You can see palettes for monochromatic or multicolor schemes.

Image: Paletton

Export Images Without Losing Quality

Web design and Photoshop go hand in hand, but occasionally, exporting an image from Photoshop to PNG can be a real pain. One classic trick is to export as an 8-bit PNG image. This reduces file size without compromising image quality. 

However, this doesn't allow you to export transparent images. If you need the image to be transparent, use the plugin tool PNGQuant. It converts 24-bit and 32-bit images into a tiny 8-bit file but still lets you keep the transparency. 

Design Beautiful Fonts Easily

Typography-based sites are still on-trend and are undeniably beautiful. However, no matter how simple they look, they can sometimes be a challenge to design. From building fonts to comparing font palettes and adjusting line lengths, font design can become pretty time-consuming. 

Typecast, a relatively new design tool, allows you to design typography-based websites easily. What's more, it integrates with Google fonts. You select a font from Google fonts and click the link to visit the Typecast site. There you can make adjustments to the font, like weight, size, spacing, and line length. 

Image: Typecast

Avoid Overdesigning

Overdesign is the bane of the web design community, and it happens more often than you’d expect. It's easy to get carried away, adding too many elements, colors, or features to a website. In a time when minimalism is cherished, overdesign is an instant turn-off for viewers. How do you ensure you never cross the overdesign line? 

Start with shades of gray. While using Photoshop, you can display your wireframe in grayscale. Once you've added photography and other elements, slowly add color, bit by bit. Start with the most important elements on the page. That way, you accent the important aspects without the risk of going overboard. 

Make Rapid Prototyping a Breeze 

Rapid prototyping is essential for getting your client on board and excited about your project. Did you know you don't need to use Photoshop to create rapid prototypes? Keynote is a rapid prototyping tool that works across an array of devices. It also has an active community of users who regularly contribute templates for all aspects of prototyping, from wire framing to testing apps. 

Web Design

Image: Keynotopia

Use Pinterest to Remember Your Favorite Elements 

Pinterest isn't just for recipes and DIY inspiration.  A lot of designers actually use Pinterest to create mood boards for future or current projects. It's like making a collage of your favorite designs and saving them for later, except they're much easier to retrieve. 

The Pinterest mood board lets you save images, colors, patterns, samples, templates, layouts, fonts, and anything else that catches your eye. Next time you're stuck in a design rut, check your mood board for some fresh ideas. 

Find Out What Pops on Your Site 

You're nearing the end of your mockup process and you want to make sure the important parts really stand out. Here's a quick way to figure out the most prominent features of your design: take a few steps back from your computer and squint. This will make almost everything on the page blurry, and only the boldest, most attention-grabbing features will be noticeable. The average internet user has a very short attention span. When a visitor first lands on your website, he or she will quickly scan the page. This trick helps you see the website through your visitors' eyes and what elements are most likely to capture their attention.

Shortcuts and tricks like these take the mundane aspects out of design and let you focus on the fun parts. Design shouldn't be about tedious tasks and boring chores—it should be about creativity and fun. As you gain more experience, you're likely to find even more shortcuts that work for you and make your professional life a lot easier. Now get out there and start building some beautiful sites.


Today’s Date 
Categories
About 337 design

Since 2003 we've been dedicated to creating website for businesses small and large, that are beautiful to look at, and help turn visitors into customers.

Archives