Web Design for Graphic Designers

5 years ago from , Web Developer

Dear DN community,

For the last couple of years, I've been collaborating with many designers on different web projects. Most of them fall into one of these two categories:

  • Web Designer (the one who understand how web/screen works)
  • Graphic Designer forced into web design

The issue I'm often having is time spent introducing Graphic Designers to the web design. Since this is repeating from project to project, I figured I can't be the only one.

If you know any good guide (not a just a short blog post) which could help Graphic Designers to transition into web design, feel free to recommend it. If not, then leave an advice or two which might help Graphic Designers in understanding web/screen design.

An idea could also be to use the tips, structure them and create an online guide with examples. If some of you would like to contribute/collaborate/give an idea - please hit me up on ermin@celikovic.me


  • Dean HaydenDean Hayden, 5 years ago

    Speak their language and start with common themes;

    • Hierarchy
    • Pace
    • Space
    • Ratios
    • Grid
    • Typography
    • Colour
    • Legibility / accessibility

    Highlight what's different

    • Fluid canvas (no fixed size, people scroll)
    • Layout needs to accommodates various devices (responsiveness)
    • Interactions
    • Think journeys rather than pages
    • Being modular

    Learn from others

    • Observe design choices
    • Get them to think about their own online experiences
    • Study design guides and how they're applied

    Just do

    • Apply what they already know
    • Experiment with the bland and the bold
    • Think beyond a flashy landing page, think about long-form content
    • Get them to open flat designs in a browser to see designs in-situ (much like printing a page to see if it visually works and the right choices have been made)
    • Use the tools you want
    • Start to learn the new tools

    Whilst not specific, it's a pretty good list of topics to cover in my opinion.

    2 points
  • Nelson Abalos JrNelson Abalos Jr, 5 years ago

    My wife is a graphic designer who was forced into web design. The main things she was scared about, when it comes to web design is code and not having a one set canvas size.

    I go more into detail about this here: https://www.youtube.com/watch?v=JU7ABB4rAdg

    When it comes to web design, there aren't many tools that produce good, production ready code and designs in real-time. So, it leaves the graphic designer confused when they design something and it doesn't work across all modern browsers and devices.

    Thankfully Webflow is here :) I would strongly suggest telling your graphic designer friends to start here: https://university.webflow.com/article/the-box-model

    It'll help them understand that the web is just a bunch of boxes within boxes (within boxes, etc.) After they understand that concept, they can move on understanding the basics of HTML and CSS: https://university.webflow.com/article/intro-to-html-css

    After that, they'll be ready to try Webflow and see themselves designing a real webpage, without code, in real-time.

    Hope this helps :)

    2 points
  • Tyler Fowler, 5 years ago

    Sometimes skill sets overlap. These days a graphic designer likely is fluent in creating assets for both print and digital spaces. Creating assets has nothing to do with 'web design' other than physical/digital dimensions of an object.

    When possible, I export assets from Illustrator as an svg for the web and this makes sizing issues much easier to manage. A web designer is likely a 'front-end web developer' which may not have excellent graphic design skills (an eye for it, basically) but is fully fluent in being able to manipulate html/css to create the desired effects.

    It would take years of working in both to be extremely competent all-around and most individuals either don't have the eye for design or are bored to death by trying to learn to code - so that is likely the reason you see people fall into one category or the other.

    Graphic designers think visually first, so it's important when learning to be able to quickly see the effects of your changes. Tumblr is a good place to practice.

    W3 Schools is a great resource for all the basics. https://www.w3schools.com/htmL/html_responsive.asp

    1 point
  • Nicholas BurroughsNicholas Burroughs, 5 years ago

    If coding is an aspect of web design which is intimidating to someone more experienced in print design, then that's the first issue—they shouldn't be worrying about code, nor should they think they must learn it. They most likely did not learn printing skills when they first trained as a designer.

    Ermin, are the designers you're working with who are not experienced in web design attempting to code as well, or just design?

    You're a web developer, so I'm assuming they're designing, you're building, but the issue runs into them not having an understanding how of things work, and not necessarily how to make things work.

    1 point
  • Virginia Delgado, 5 years ago

    Hi Ermin, This is such a great idea.

    As a designer, I feel intimidated by the "coding" and "designing for different screens/browsers/etc" topics. Every time I read "web designer" as a job vacancy, I stop looking, 'cause it usually requires html, css, knowledge of wordpress, etc. I have basic knowledge of all that, but... I wouldn't say I'm a web designer. I think it requires more than "web design" - my partner is a UX designer, so I know that understanding the viewer journey is also important when designing a website.

    Nelson has provided some really interesting links, and obviously the most important step is to create a list of topics to discuss. What do you teach Graphic Designers first?

    1 point
  • Julia Maribell, over 1 year ago

    I’m a designer at a leading company and I understand how to create presentations and their design. The company has a lot of demands on me as I create the face of their product, so I get ideas and tools to work at Master Bundles https://masterbundles.com/templates/resume/acting/ . This is a site where I found a lot of modern templates for presentations, fonts and more. With such a site, you can easily create a design of anything.

    0 points
  • Jani Hiltunen, over 2 years ago

    I totally agree with you. Here is a quote from my blog "Graphic artists from print media in particular have a built-in thought process full of patterns that need to be broken, so that their visual skills and creativity could be harnessed in web design."

    Graphic Design terms and principles in Web Design

    0 points