7 Skills a Print Designer Needs To Become A Good Web Designer

by Stephanie Hamilton

Last updated on February 27th, 2018

The demand for web designers has surged.

Whether you are a print designer looking to get into web design or someone looking to ensure that the designer you hire has web design skills, this article is for you.

Many that trained in traditional print design are trying to make the transition over to the web to keep up with the competitive design landscape. For some, this is as easy as picking up a book on HTML & CSS.  For others, it may mean shifting their perceptions of how to design altogether.

After all, the experience of viewing and interacting with a website is entirely different than reading a full page spread in a newspaper. In this article I’ll present 7 crucial skills a print designer needs to acquire to become a good web designer.

1. XHTML/HTML

XHTML is the foundation of the web. Learning this language allows you to build simple, text-based websites. Best of all you only need a notepad or text editor to start building basic websites.

Tools on the W3Schools.com website allow you to try your hand at learning HTML, such as in the above simulation.

2. CSS

CSS, or Cascading Style Sheets, allows you to alter the appearance of your XHTML document by attaching a separate CSS style sheet to it. Combine this with XHTML and you’ll have a simple, good-looking site.

CSS is used on this website for an executive coach to provide hierarchy. This simple, yet effective text-based site uses headlines and one color to highlight important information.

Goliath Sportswear uses a clean, retro look on their CSS-based site. Hover states can also be indicated, which is utilized in the navigation.

3. Web Typography

While the print designer can relish at the array of typefaces available at their disposable to communicate a message, web designers must stay abreast of challenges some fonts face.  These challenges include on screen readability and compatability between browsers and operating systems.

Adding the nuances of web typography to your existing knowledge of font families, appropriate use of line-height, kerning and tracking for clean, readable web typography will be necessary.

Services such as Typekit allow the designer to explore alternate type styles that were only relegated to print design a few years ago.

 

Text shadows, outlines, transitions, and even text gradients are effects achieved using CSS3. Doesn’t this example look like it was created in Photoshop?

Here is an example of how CSS3 can be used to create 3D text.

CSS3 has seen wide adoption from the major broswers and is a skill worth learning. You can achieve unique and compelling effects not only to typography but to the design of the site in whole through the use of drop shadows, gradients, borders, etc.

4. Images

There’s generally more room for error in terms of images on the web as opposed to print. However, you should still have a solid understanding of the nuances pertaining to images on the web.

Here are some quick details:

  • RGB – This is the color space used for the web.
  • Image Compression – Image compression is 72dpi on the web. It’s also recommended to use JPEG (set to “high” quality, usually level 8 or 9) or PNG format for your image files.

 

5. How Design Effects Search Engine Optimization

Customers and employers are looking for web designers that understand the marketing side of web design.  Part of being a good web designer, is understanding on-page SEO.

As opposed to off-page SEO, on-page SEO involves elements on the site you are designing.

It is likely that the SEO or Internet marketing person involved in the website redesign project will want to be involved in the early stages of the design process.  This is because they want to ensure that the site will be accessible by search engines.

A search engine spider, such as GoogleBot, is a program that visits websites, reads the content and stores it in Google’s index.  There are many design elements that can create speed bumps for search engine spiders or outright block them from reading the content on a site.

These include:

  • Excessive use of Flash
  • Building text into images
  • Use of iFrames to display content.

6. Social Networking

Social networking is a skill relevant to anyone looking to promote themselves or their client’s services in today’s marketplace.

Clients will often come to web designers to not only build them a web presence but extend their brands onto social networks such as Facebook and Twitter.

Web designers are often asked to do things like:

  • Design branding and imagery for a Facebook page
  • Lay out and design a Twitter background
  • Tweak the colors, fonts, etc on a YouTube channel

7. The Ability to Adapt to Change

It’s important as a designer to stay on top of industry changes and keep your skill set up to date. This means learning the latest technologies and coding languages so you don’t fall behind.

Plenty of industry blogs are available to aide in this process, including Smashing Magazine, Six Revisions, and Onextrapixel. Also join and be active on Twitter, as this networking tool is often a hot-spot for the latest developments in the industry.

Countless doors will open as a result of acquiring web design skills.

Being fluent in web design means more opportunity for multiple income streams while making you more attractive to potential employers or customers who are looking for versatile designers.

You can do this.  Don’t be afraid,  believe me, your design skills are in high demand on the web.

14 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.

14 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Visnja Zeljeznjak says:
    March 31, 2012 at 5:18 pm

    I would add that mastering JavaScript is essential and should be placed right after HTML and CSS. I hope I don’t discourage any fledging web designers by saying that web designers of the future are actually masterful JavaScript front-end developers.

    A skill that is also usually never on a list such as this, is knowing how a website sells online. Too many web designers focus on the visualities and technicalities of web design, and too few focus on what design really is: presenting content in a way that accomplishes business objectives.

    I know, this is too much for a single person to master. Mastering all this TLAs (three-letter-acronyms), programming skills, SEO, and now online sales? I must be kidding, right? Well, this is the fact – I’ve been running a web development agency for 10+ years – designing a web is either a job for a team of skilled professionals, or be prepared to wear multiple hats.

    • Russ Henneberry says:
      April 1, 2012 at 9:34 pm

      @Visnja — Great stuff! Thanks for adding these pearls of wisdom!

  2. Stacey says:
    February 14, 2012 at 3:20 pm

    Nice article. However, it is not recommended that beginners use w3schools.com as their information is out of date and poorly represented (see http://www.w3fools.com if you want more info – or, heck, right click and view the source of their page, it’s hideous).

    Some great resources for learning HTML and CSS include:
    Google Code Education
    Treehouse
    CSS Tricks
    Tuts Plus Network

    • Russ Henneberry says:
      February 15, 2012 at 11:20 pm

      @Stacey — Thanks for these resources Stacey!

  3. sudo says:
    February 13, 2012 at 4:27 pm

    “CSS3 is the latest programming language worth learning in becoming a well-rounded web designer.”

    CSS has never, isn’t, and will never be a programming language. It is in fact a script. Just as HTML isn’t a “programming” language, it is XML.

    • Russ Henneberry says:
      February 13, 2012 at 5:07 pm

      Apologies for the semantic misrepresentation sudo, I have updated the post. Thanks for pointing this out!

      • sudo says:
        February 13, 2012 at 7:15 pm

        No worries. Otherwise, it’s a good post. Very relevant to the print designers.

  4. Abraham Gonzalez says:
    February 13, 2012 at 3:23 pm

    I really enjoyed this article! Great tips. I am starting web designer, taking current classes with Dreamweaver, so reading information like this is awesome! Makes me more aware of the world of web designing. I currently work as an SEO and SMO Specialist, so reading the section about SEO is highly important when designing a page and Social Media as well, made me realize I am in the right track so far. Will bookmark this! Thanks!

    • Russ Henneberry says:
      February 13, 2012 at 3:32 pm

      @Abraham — I would also add to Stephanie”s sage advice here that you should learn at least one popular CMS. Learning something like WordPress, Expression Engine, Adobe Business Catalyst, Drupal. Squarespace, etc can make you much more marketable today than knowing DreamWeaver.

      • Abraham Gonzalez says:
        February 14, 2012 at 2:17 pm

        Thank you Russ for the reply. I will definitely look into CMS. I’m fairly new at this so I appreciate the advice!

  5. Matt says:
    February 13, 2012 at 11:07 am

    You should have also included the ability to design using a grid scale (960.gs for instance). I’ve noticed many print designers have a hard time adjusting to this and as a front-end developer, we have to sometimes adjust the original artwork to fit.

    • Russ Henneberry says:
      February 13, 2012 at 12:13 pm

      @Matt — Excellent suggestion Matt!

  6. Matt says:
    February 13, 2012 at 10:13 am

    Hopefully I don’t come across as arrogant here, but I would have to point out an errata regarding calling CSS3 as a “programming language”. HTML and CSS are simply not programming languages, and it’s important to differentiate between their applications and usages.

    As well, referring to “dpi” as image compression is incorrect. That is the ideal resolution for bitmap images.

    That being said, I will be referring our print designer(s) to this article directly. Thanks! 🙂

    • Russ Henneberry says:
      February 13, 2012 at 12:13 pm

      @Matt — thanks for the feedback Matt!

Show Me My Heatmap

Click tracking, heat maps, and no spreadsheet? Yes, please. @CrazyEgg is one solution. bit.ly/1HQ20nf

Mequoda

@mequoda

What makes people leave your website?