The print-only freelance designer is a dying breed. There, I said it. If you’re a freelance designer who doesn’t have web-related skills, you best add that arrow to your quiver or you’re going to be left in the dust. Now, it’s worth noting that I’m not saying “print design is dead” or “identity design is dead”. As long as there are businesses, artists, musicians and the like, graphic designers will be needed. However, freelance designers who only operate in the print realm aren’t long for this world.

The digital realm is growing and spreading, and at the expense of the print world. As the opportunities for print work shift over to digital work, so do those print jobs. The numbers show the shift: Amazon sold 143 ebooks for every 100 hardcover books in the second quarter of 2010.  In the music industry, album sales fell 12.7% in 2009 while digital singles rose 8.3% and digital albums rose 16.1% (source). These are only two industries, but two big ones – and they point towards the growing trend towards digital over print. It should be noted that overall, people still currently buy more physical albums and physical books, so it’s not like we should erase the section of our brains that holds our print design information right now. However, the numbers don’t lie: digital is growing, print is declining.

Hit the jump for the full article!

Back in the day, print design was king. We started with cave drawings in rock and moved on to books and other print design. In 1991, the Internet was introduced and in 1993, the first proper web browser was introduced; but with the Internet in its infancy, print design wasn’t really threatened. In 2010 however, the large majority of the Western world uses the Internet on a daily basis, plus we have amazing digital devices like the iPad, Kindle and so forth. This explosion and continued upward trend in digital use means that more and more people are consuming information via digital means, which means that freelance designers need to be able to feed that frenzy.

There are a couple routes designers can take: we can be print & web/digital designers, or we can be web/digital designers. We can’t solely be print designers any more. While there are still plenty of print jobs out there, more and more of these jobs will have some sort of digital tie-in – for example, the magazine you lay out must have an interactive digital copy as well. The album art you design and supply must be print-ready but also work in the iTunes store; perhaps the artist wants an iTunes LP as well. We’ll be seeing more and more of these combination print/digital jobs taking the place of what were formerly print-only jobs, and if you are a designer with no digital or web skills or knowledge, you are putting yourself at a disadvantage. Who do you think a client would rather work with in the aforementioned scenarios: a designer with zero digital/web design knowledge, or a designer with both?

The Solutions

There are two routes you can take to broaden your skill set and offer digital design services. First: partner with a developer (or two), learn the basics of the digital realm you want to expand into (web, iPad, software GUI), and stick to designing and letting the developer bring the designs to life. If you go this route and stick to the web design field, for example, I’d suggest researching web standards and developing a knowledge base in areas like a) common screen resolutions, b) max widths, c) the grid system, d) web safe fonts and e) usability. This will give you the basic knowledge base to design well for the web and provide implementable, cross-browser friendly designs to your developer.

Alternatively: learn the actual development side of the area you want to expand into, and offer both design and development. Sticking with the web design example, this means you know the previously mentioned areas and can design to those requirements, and you can take those designs and turn them into valid CSS/HTML. This is a little tougher and requires more time, more study and more practice; however, the benefits are equal to the workload.

There are advantages and disadvantages to both of these routes: advocators and opponents to each side. However, the underlying principle is that you know the basics and can offer services in the digital realm as well as the print realm. Once you’ve learned the basics, commit to staying on top of your new field of choice – digital is a quickly moving world.

It’s not just animals, humans & plants that need to evolve. Designers do as well. The world changes, people change, clients change and demands change. If you want to be a freelance designer – one who doesn’t live in their parents’ basement and eat Kraft Dinner every day – it’s best to accept the truth: the print-only freelance designer is dying. It’s time to jump into the digital deep end and start swimming if you want to keep your head above water.

Like many of our readers, we end up doing quite a bit of work for smaller businesses. Personally, I love working with small businesses: you usually have one solid contact, you can relate to one another, and you can usually skip the bureaucracy and red tape that sometimes comes with working for larger companies. However, the common downside is that small businesses might not have the budget to pay for a full identity overhaul – logo, business cards, print material etc. The result is that the designer may only work on a logo, or may work on the identity system in pieces. This is fine, but one trick we’ve learned that I’d like to share is something we call “designing past the logo”.

Hit the jump for the full article!

What this means, in a nutshell, is to not get hung up on just the logo design. Design from the start with the whole identity system in mind, even if it may never come down the pipe. It’s easy to focus on the logo and solely the logo, but if the designer lets that happen, he/she may be making their potential future work a little more difficult by designing themselves into a corner, or having a combination of design pieces that lack the cohesiveness that a solid identity system should have. By the way, if we’re talking about cohesiveness and forward-thinking design work, jump over to Pentagram’s blog and see any of their latest work.

Why Should We Design Past the Logo?

Looking past the logo (the common starting point for identity work for businesses) and even going so far as mocking up a website homepage, a business card or more can help show the client how their logo may be used in the future. This will make it easier for you to “sell” your logo concept. As well, it can help you pinpoint any flaws in the logo that need to be fixed prior to release. I mentioned a while ago how some clients perceive value in a design; if you are hired solely to design a logo, not an identity system, it might be in your best interests to go that extra length and mock up the items I mentioned above. Why? Well, the client will feel as they’ve gotten more value for their money, and you may avoid the over-designing requests that come from some clients. After all, showing the client how their logo may be used will help some grasp the distinction between a logo, an identity system, a brand or a campaign. Remember, the logo is just part of the business; it doesn’t have to “do it all”.

Plus, there is the off chance that the client will wish to purchase your mockups because you knocked ‘em out of the ballpark. It can lead to easy extra work – just be sure to charge what your work is worth.

How Do I Design Past the Logo?

We know why we should design past the logo, but how do we do that? The simple answer is to always keep the end goal in mind – that is, a cohesive, aesthetic & effective collection of business materials. Assume that, at some point, your client is going to come back to you for a letterhead; a business card; a website. Always design with that in mind. If it’s piecemeal work – as in, logo, invoice, wait two months, design a business card & invoice, wait two months, etc – try to design each piece to be part of an all-encompassing system. Don’t design the business card as a separate, unique piece from the envelope, and the envelope as a separate, unique piece from the letterhead, etc. Try and define the goals & elements of the identity system from the start, and use those when taking on any design task related to the same client. If the rest of the identity work never comes down the pipe, oh well. At least you were prepared, right? Besides, the large majority of the time the remaining work will come down the pipe (so long as you did great work and treated the client well).

Hopefully I’m making sense. I know how easy it is to fall into the trap of designing solely for the piece you’re working on, like a logo; it’s one of the downsides of being really focused on your work. However, if you can always keep the big picture in mind, the work you do for your client will be more cohesive, flexible, and overall just plain better.

Do you have any related tricks that you use to ensure your work for your clients is cohesive?

Some web designers write their own code; some don’t. Even if you’re in the former category, chances are you have worked with a developer who has been hired to bring one of your web designs to life (if you haven’t, you will soon). Sometimes clients have a developer already in mind and are just looking for a designer; sometimes a developer will approach you; the list of possibilities goes on and on.

With that in mind, us designers have to be cognizant of how we work and how best to make life for the developer easy. If you make their life easy, the project will run that much more smoothly and the client will be that much more happy. So how do we do that?

Hit the jump to find out!

Communication

As with any project, good communication is the key to a solid client-designer relationship. Talk to the developer; learn as much as you can about the project and your requirements. Are they building it on a CMS, or just straight up CSS/HTML? How many unique page designs do they need from you? Do you know the goals and objectives of the site? What are the specifics for each page?

The more information shared at the beginning of a project, the smoother it will run.

Basic Understanding of Development

Your life as a web designer will be infinitely easier if you have at least a basic understanding of HTML/CSS and web standards. In fact, if you don’t know basic web standards (common screen resolutions, etc), you shouldn’t be designing for the web. But if you have a basic understanding of development, you will make design choices that make sense for the web. For instance, you should know about web typography, the 960 Grid system, how CSS backgrounds work and so forth. This way, you can ease the load on your developer by letting them recreate as much of the design as they can using CSS/CSS3, as opposed to using images all over the place. Plus, this will make for a faster site.

Fonts

Thanks to an ever-growing array of web font resources, we don’t have to use the tried-and-tested “safe font list” any more. With that being said, when designing for the web it’s much easier to use open source fonts whenever available and include the link to download these files when you submit the PSD to the developer. If you insist on using a font that is not open source or licensed for the web (like Gotham), then rasterize that text layer in Photoshop before sending it along. Keep in mind that rasterized fonts are not editable, so keep a backup design with unrasterized fonts and generally only use these types of fonts for design elements or headlines that will rarely/never change.

Organize

I have a bad habit of not immediately naming my layers in Photoshop as I’m designing. This leads to a lot of “Layer 27″ and “Layer 16 Copy 3″ layer names, which are indecipherable to both you and the developer. However, I always make it a habit to go back through my final design, before submission to the developer, and name my layers semantically. For example, “Background” and “Slider Image” etc.

After this is done, I group all my semantically named layers into semantically named folders. By this I mean I take all the layers that make up the navigation system, say, and put them in a folder titled “Navigation”. Everything that makes up the banner goes in a “Banner” folder. It might take you some extra time, but your developer will love you for it.

File Submission

Every developer I’ve worked with has a slightly different preference when it comes to how they like their design files submitted. It’s always a PSD (Photoshop Document), but some like each page separated into separate PSDs (I normally make a folder for each unique page design and keep all pages in one PSD). Some developers also like a JPEG included; some don’t. Again, talk to your developer and figure out how they like their files submitted.

UX Ideas

Finally, be sure to go through the final file with the developer so he/she knows what exactly what you have envisioned. For example, do you want the company logo to have a slight CSS3 drop shadow when a user rolls over it? Do you want the hover values of your anchor tags to be a specific color? Do you have specific slider transitions in mind? All these items and ideas cannot usually be accurately conveyed through a static document like a PSD or JPEG; it is best to sit down with the developer, or use an app like BounceApp (just upload a screenshot of your design to your server) to highlight UX features you envision.

Working with a developer can be a great experience if you do everything in your power to make it one. If you follow these steps, your developer will be happy to work with you, and possibly refer you to others, thanks to your solid communication and organizational skills. Do you have anything to add? Developers, do you have any pet peeves when it comes to working with designers?

A couple of weeks ago, I launched a side project of mine: Chorus Magazine. My regular readers know this already, as I shamelessly promoted it here on the launch date. However, today I’d like to reveal my thought processes behind Chorus the brand and showcase the various design elements that came along with that: logo, print and web.

When my partner-in-crime, Kelvin, and I sat down to discuss what Chorus should be, we were clear on one thing: there is a need not only in our hometown of Edmonton, but everywhere, for a solid musician’s online resource. We wanted to build something that could potentially grow into the Smashing Magazine for musicians, so to speak. With that in mind, I approached the logo design as I would with any other business: I looked at competitors, I looked at my target market, and I aimed to create something that would resonate with the latter.

Chorus is a site for independent musicians, so I wanted the logo to reflect the DIY (do-it-yourself) ethic that indie musicians possess. I also wanted to create a logo that, perhaps, could someday be used on the front of an actual print magazine. Who knows, maybe we’ll get to that point. With that in mind, I decided to go with a logotype with a hand-drawn style. This was the end result:

Hit the jump for the full article!

Essentially, I lightly modified the Billabong typeface and used Gotham for “Magazine”. I tossed around creating an actual hand-drawn logo myself, but time constraints thanks to other projects and the fact I wasn’t getting paid led me down this path. I’m happy with the result; the logo is inviting, works on various mediums, and reflects the DIY ethic I was going for. I wanted to pursue a whole toned-down Swiss-style design for the following website, so  I decided to go with red as the highlight color, with white & grey being the brand’s neutral tones. As well, red intones passion (the color theory quick reference poster says so!), which you have to have if you’re an indie musician. This logo was the rare one-shot deal; sometimes it’s nice to work for yourself. As always, the logo was created in Illustrator CS4.

Next up were business cards. As we’d need to approach potential advertisers and contributors, we wanted to have something to hand out. Keeping with the idea of having a toned down, Swiss-inspired design, I decided to go with a double-sided, clean & simple business card.

As this is a strictly online venture, there wasn’t any need to put physical addresses and other clutter-inducing design & type. The logo and color scheme are strong enough that something like a business card design really just needs to get out of the way, you know? The cards were designed in Illustrator CS4, and I printed these through VistaPrint. I was very happy with the result (as per usual).

The last print item we needed to get together prior to the web site design was our Advertiser’s Info spec sheet. The goal of this sheet was to provide information to interested advertisers in an easily digestible format – one sheet, easily viewable online or printed. The end result was a three-column design, set in Gotham & Gotham Narrow, that shares elements of the business card while maintaining the overall branding ethos. This was laid out in Illustrator and PDF’ed to send to potential advertisers/print shops.

Finally, we were ready to move on to the website design. As the website formed, essentially, the entire business, a lot of time was spent perfecting it. As Chorus is an online magazine, we needed to present the text in a manner that invites the reader to stay awhile and read posts of length. As well, we wanted the posts to be shown in excerpts so readers could quickly scan the multitude of content and find what they wanted to. Finally, we included a Featured slider, showcasing the best articles of the month using a horizontal jQuery-powered sliding effect. Here’s a couple screenshots:

You can see what I mean about the excerpts and allowing readers to scan to find what they’re interested in. Other items to note include:

• Thumbnail image is auto-generated from the first image in the post
• Included a set block of space for advertisers on the right hand side
• Posts are grouped by categories such as “Touring”, “Recording” and so on.
• Links to other posts with the same tags are automatically pulled and shown at the bottom of each article
• Author information is automatically generated and shown at the bottom of their articles
• @font-face is used – the headers are League Gothic and the body type is Cartogothic Std.
• Drop caps are auto generating, only being applied to the first letter of the first word in the post.

When a reader clicks through to the actual article, the formatting changes slightly – the look and feel is the same, but the overall article is more readable. Here is an example:

Throughout the whole site, we made sure to focus on the content and not let the design “get in the way”. The Chorus red is used as a highlight and link color, while various tones of grey make up the backgrounds and text. This provides enough contrast to comfortably read, but also tones it down a bit so the reader’s eyes aren’t getting blasted by stark white and black.

This website was designed and sliced in Photoshop, then developed locally using Dreamweaver, TextMate, and MAMP.

Overall, I’m happy with how the whole process turned out. Looking down the line from logo, to print material, to web, there is definite unity and complementing styles used. Of course, it’s always easier when you’re the boss and you’re designing for yourself – there isn’t any client asking you to put in some Geocities-style blinking & falling stars, etc.

If I learned one thing from this whole process, it’s the importance of doing projects every once in a while for yourself. It can be really easy to always put client work first – they pay the bills – but throwing in a project where you’re the boss can really revive your love for design. It allows you to try new things and fall in love with design again (if you ever were falling out of love with it). So don’t always put yourself last, as a revived designer is going to put out more inspired work than one that’s bogged down.

Anyway, that’s a brief rundown of the logo/branding/web design process for Chorus Magazine. What do you think? Love it? Hate it? What would you have done differently?

Nowadays, the combo of Photoshop and CSS3 makes up a huge toolbox for web designers; it allows us to achieve website designs that weren’t possible back in the early days of the internet. We can add depth to our design; we can simulate paper or other textures; we can using lighting or 3D effects and more. These elements, when used properly and subtly, can add up to the difference between a so-so web design and a great web design. With that in mind, I’ll be sharing some of my favorite and most-used Photoshop and CSS tricks when it comes to web design.

1. Gradients

Gradients can add subtle depth and lighting effects to your web design. If you’re stuck on a flat design, all you might need to add is the most subtle of gradients. That being said, please don’t use any super harsh gradients; in my opinion, the best gradients use tints or shades of the same color (ie. no pink to yellow gradients, please). Of course, each design is unique. Gradients can be achieved two ways: in Photoshop and CSS3.

Photoshop Gradients

Photoshop’s gradient tool allows you complete control over your gradient – it’s easy to use and can make your designs really shine.

To use Photoshop’s gradient tool, simply do the following:

1. Click the icon shown in the bottom left corner of the above image.

2. Select subtle colors in your color swatches (bottom right corner) – these will make up your gradient.

3. At the top of the page, choose either linear or radial for your gradient, set the mode to Normal, and adjust the opacity to your liking.

4. Click and drag the gradient tool on the layer you wish, in the direction you want the gradient to move.

That’s it! Looking at the above image, it’s important to note that subtle colors are used (bottom right). Some examples of gradients being used in web design can be seen here & here.

CSS3 Gradients

CSS3 gradients are really cool – the more you can do in-browser, the better – but keep in mind that not everyone uses a CSS3-compatible browser, so not everyone will be able to see your gradients if you only use CSS3. That aside, here is a handy CSS3 gradient generator (scroll down the page bit). It allows you to use hex codes and generates the proper CSS code for you. Booya!

Hit the jump for the whole article!

2. One Pixel Lines

If your web design isn’t looking quite as sharp/crisp as you’d like, look at adding a subtle one-pixel line or border on the edges of some of your design elements. Make the line a slightly darker shade of the color you’re using, or a slightly lighter tint. Adding this one pixel line can be used to simulate lighting effects (the edges of a box being hit by light from above will have a highlight on the top, and a darker bottom edge), or it can be used to sharpen the edges of a design element. Again, this can be done in Photoshop or CSS.

Photoshop Lines

Photoshop’s line tool is easy to use and customize exactly to your liking. It’s great for client mockups; however, I recommend using CSS whenever possible in an actual website.

To use Photoshop’s line tool, simply

1. Click the icon shown in the bottom left corner of the image above

2. Select your desired color from the color palette

3. Set your settings at the top of the Photoshop window as desired

4. Click and drag to create the line.

In the above image, note how subtle the line is that appears at the bottom of the red bar. Barely noticeable, but it gives the design a nice, sharp edge.

CSS Lines

To create the same effect in CSS, all we would do is add a “border-bottom” element to the red div. For example:

border-bottom: solid 1px #700000;

That’s it!

3. Letterpress Text Effect

The letterpress text effect is a newer design technique that you’ll see in quite a few modern website designs. This style mimics the look of the letterpress printing technique, and when done correctly, it looks great. Once more, this can be done in Photoshop or CSS3.

Photoshop Letterpress Text Effect

A combination of layer effects makes up the letterpress text effect in Photoshop. Below are a series of images with separate dialogue boxes which made up the sample text effect. All you have to do is double click your text layer to open up this dialogue box, and pump in the following numbers.

Please note the drop shadow settings: Blend mode set to screen, color is white at 27% opacity, angle is 88 degrees (90 ideally; apparently I was rushing), distance 1px and everything else zeroed out. This gives you the nice white highlight.

Please note the inner shadow settings: Blend mode set to multiply, color is a navy blue at 44% opacity, 90 degree angle, distance of 2px and size of 1px. This gives you the “pressed-into-the-page” look.

Please note the gradient overlay settings: we chose colors similar to the background color (two shades of blue), blend mode is set to normal, opacity 100%, style is linear, angle is 90 degrees and scale is 150. This gives a nice lighting effect from the top, which complements the white highlight we did first.

Using all three of these effects subtly & together allows for a classy letterpress text effect, created all in Photoshop!

CSS3 Letterpress Text Effect

You can replicate this effect in CSS3, which is ideal as it can be applied to live text (as opposed to slicing the Photoshop text and using it as an image). However, as we stated earlier, not everyone has CSS3-compatible browsers, so be conscious of this when you make your decision on which to use.

Instead of reinventing the wheel, allow me to point you to a great tutorial by Chris Spooner over at Line25 showcasing, step-by-step, how to achieve this effect using only CSS3.

4. Subtle Textures

Textures are going to be huge in 2010 web designs, but I don’t mean the heavy grunge texturing of websites from a few years ago. I’m talking light, light texturing that almost simulates fine paper. The best way to do this is in Photoshop – allow me to explain, but first have a look at this example:

It might be a little tough to see at that size, but the blue bar has a light texture effect applied to it. Click the image to go to the live site and see what I mean.

In order to do this, first you need to either make a pattern yourself or get a nice noisy/grainy texture pack from the internet. Here’s a handy one right here! (instructions to install are on the site). Then select the layer you want to apply the texture to, double-click it in the layers menu to bring up the dialog box, and play with the settings. Here’s a standard grouping of settings I use, below.

If you can’t read that, we’re in the Pattern Overlay style with our desired pattern selected, blend mode is multiply, opacity is 11% and scale is at 50%.

In order to apply this to your live site, you’ll have to make a very careful slice and repeat the image along the x & y axes. As of now, there is no way to replicate texture in CSS3 to my knowledge.

5. Drop Shadows

Drop shadows, like every other element in this list, need to be used very lightly and sparingly. Please do not make your element look as if it’s being hit by the world’s harshest light while it’s floating 5 feet off of the page. Keep it subtle and your designs will flourish. Drop shadows can be achieved in either Photoshop or CSS3. For an example of a great site design using CSS3 drop shadows, look no further than Chris Coyier’s CSS-Tricks.com:

Click through to view the live site. Chris uses drop shadows very subtly, and in an interactive fashion – a great example of using drop shadows in web design.

Photoshop Drop Shadows Using Outer Glow

Lately I’ve been using Photoshop’s Outer Glow layer style as opposed to its Drop Shadow style when it comes to drop shadows on the web. Why? Because I mockup the designs in Photoshop, but then use CSS3 to generate the drop shadow on the actual website – and Photoshop’s Outer Glow looks a lot more like a CSS3 drop shadow in the manner I use it. However, the Photoshop Drop Shadow layer style is just fine depending on the elements of your web design. For this example, though, I’ll be using the Outer Glow layer style.

Note, again, how subtle the effect is. To use this effect, double click on the layer in the layer menu to bring up the dialog box. Click Outer Glow, and play with the settings to get what you want. For this example, my settings were as follows: Blend mode to Multiply, color is a navy blue at 40% opacity, size at 9px. The rest of the settings weren’t touched, and voila! We have a nice, even and subtle drop shadow.

CSS3 Drop Shadows

Instead of slicing around the image and capturing the shadow, why not replicate this effect using CSS3? In order to do so, you’ll need two lines of CSS code in order to have the effect work in all modern browsers:

-webkit-box-shadow: 1px 4px 10px #ccc;

-moz-box-shadow: 1px 4px 10px #ccc;

Where the first number is the horizontal distance from the div element; the second is the vertical distance from the div element; the third is the radius (blur) of the shadow; and the final is, of course, the color of the drop shadow.

There you go! 5 of my favorite Photoshop/CSS tricks when designing a website. Please keep in mind that any good design should use only one or a couple of these elements, and use them lightly. Do not combine everything together, or you risk overdesigning and having visual elements that make no sense together.

This list aside, what other design tricks do you use in your web designs?