Web Design for Print Designers
- Started
- Last post
- 41 Responses
- zarkonite7
I don't necessarily agree that a print designer should learn about CSS/HTML/techology "X", those are the developer's problems. There's lots of ways of building websites and the dev's job is to wresttle the technology to make it work for the design. Besides, with the amount of frameworks out there there's no way to keep up, there's enough on the design front already.
I would focus on things that don't exist in print like the user experience, or prototyping. Making a website is closer to making a movie or doing industrial design than a print piece, and that can be a mindfuck for print designers. You design a story that will be experienced by clicking through content and that's a totally different thing than designing a print piece. We design flows, not pages.
And prototyping allows you to test out your designs, it's a nice visual anchor that you can refer to to speak with all the stakeholders. IE: You can share the early iterations with the dev team and avoid bad surprises or you can play around with responsive designs to test how to the screen sizes affect the content. And to mono's point, THIS is the software you'll be using to design your site... Figma, Sketch, Framer, XD, etc. so introducing that concept will put them in the right frame of mind, the faster you start defining the experience the better IMHO.
- yeah but there is a lot of stuff that gets overly complicated in development and that shit eats budgets.mekk
- Correct. This is more about the user experience, and helping these team members efficiently design for a medium that is new for them.mg33
- It's important to learn basics of any medium you are designing for. Print designers have to learn a bit about different press types, standard paper sizes, etcakiersky
- Videographers learn about framerates and cameras. It's really no different. There's levels of specialization, but you've got to understand the limitationsakiersky
- Web design is no different, knowing how a page is laid out with html is important to see when you are breaking the rules and making things more difficultakiersky
- Those are basic concepts, some people are advocating for designers to learn to code and that's just a terrible idea. You may know about framerates but you don'tzarkonite
- need to understand the mechanics of a shutter, much less how to make a lens.zarkonite
- and speaking of those limitations, focus on making a prototype and sharing it early in the process and the devs will be able to take care of the tech problems.zarkonite
- imbecile3
print is a "look at me" discipline whereas web is a "navigate me" discipline. print is used primarily to inform, where web should predict and facilitate engagement.
web design is meant to enhance the journey through copy on through to the visual, it is much more difficult. a web presence should not be presented as visual art, but a means to serve visual arts and text in a manner that is complementary to the subject being presented.
consider the ideal form of a website to be the psychological expectation of the visitors, curated in an intelligent fashion, quickly navigable with engaging colors.
- Well said.aslip
- Yep - well said. This is critical to understand as we're getting our hands in more engaging immersive content design.mg33
- Sellies
- Interestingly, some of the best websites are designed like magazines.monoboy
- It's editorial, with an interface that you don't notice when it's done well.monoboy
- But the form follows function of course.monoboy
- mekk1
I'm sick of explaining my job to people that did not learn anything new in the last 15 years just so they can keep up with my work.
- imagine how they feel hearing that website builders care more about code than the design sidemonospaced
- imagine hearing from print designers that they still haven't taken a look into digital design in 2020mekk
- imagine all the peopleimbecile
- It isn’t hard to do.monospaced
- I do agree with this. I'd question any designer (print or otherwise) who hasn't had the curiosity to at least dabble in the web over the past 20 yearsBaskerviIle
- Question what exactly? Surely not their design expertise.monospaced
- I'd want to know why they haven't been curious about the web, I don't see how someone could be good at their craft without exploration and experimentation andzarkonite
- if you haven't been curious about that then what else have you been too lazy to explore? is this how they work, repeat old formulas all the time?zarkonite
- Exactly, if you work in print (and I used to back in the day), you will have noticed more and more of your work and your live moving to digital.BaskerviIle
- I would hope that any designer was curious about the world around them, especially as print skills translate easily to web...it's all just layout and hierarchyBaskerviIle
- yeah I didn't mean if your job doesn't require any digital then that's different, I totally agree with you on seeing your work slip away.zarkonite
- Look. Of course I’ve done digital work and I’ve been curious and explored. I’m not “lazy.” But the web side only asks for certain assets not the skill to develomonospaced
- If my job wasn’t already insanely demanding I might have taken time to totally learn a skill I don’t need. But that isn’t the case. I’m a seasoned designer stilmonospaced
- When faced with threads like this, a traditional designer sees terms CSS and html and it never seems clear. What software. Where to start?monospaced
- Hey mono I wasn't calling you lazy, sorry man, I was thinking of my experiences with print people that don't want to do any digital.zarkonite
- I hear ya. I'm sensitive because I'm a print guy who never had to do web, and never learned it. I would rather focus on the visual system than technical stuffmonospaced
- What's lacking on the web side is designers with good fundamentals so I personally like onboarding print people into digital... there's things to know of coursezarkonite
- but no one needs to go in depth with the technical stuff. It's not like knowing how to make your own ink makes you a better pring designer.zarkonite
- agreedmonospaced
- Nairn3
Encourage them to learn to give up on the idea that what they want to see exactly is exactly what they'll see.
- It was hard for me to understand the flexibility of a responsive grid at first. Then you also have a dev team that fucks with your design.Chimp
- The idea you can't get what you designed must be the most frustrating thing for a traditional designer. Web fucking sucks.monospaced
- It's a wholly different medium. Nowadays I find the idea of "Things Need to be Exactly How I want on screen" quite ridiculous and antithetical to the web.Nairn
- To me, the ridiculous part is that after 30+ years, we still can't get it exactly as we want. I agree, the web is antithetical to design ideals ...monospaced
- ... which is not the designer's fault.monospaced
- Eh? How should a medium be subserviant to a design presumption? The medium dictates the message. The myriad of digital outputs is not a printed page.Nairn
- So if a designer doesn't understand the limitations - and potentials - of the medium they're working in, then it is absolutely their fault if they choose.Nairn
- You can still deliver a flat PNG file if you want some conceit of exactness on a medium far beyond that, but fuck if that's basically useless.Nairn
- Or, an SVG file. At least that has readable elements. Still stupid.Nairn
- I spent the first few years of my professional life trying to ensure that client's brands translated exactly across browsers. Stupid. Short-sighted.Nairn
- utopian3
That logo in the upper left menu...can always be bigger.
- mg332
zarkonite,
Good points. It's truly overwhelming, even to someone like myself who has been doing stuff on the web for 20 years now.
If I can get these traditional print teammates to understand responsive grids, fluid and fixed layouts, box model, accessibility standards for color and type, and basic motion to help them think through designing for interactivity, I'll be successful.
- Keep us posted.monospaced
- That's a lot to cover! Maybe you could put them through a series of tutorials on how to use Figma to do all those things so they'd learn practical skills too.zarkonite
- nb2
Make sure to teach them that they’ll get paid a lot more
- not where we workmonospaced
- You’re being paid less to work in web than in print? Go back to print, then?!nb
- You working in digital for the love of it??!nb
- whatthefunk0
- Design Systems
- UX Writing
- Templates
- Information Architecture
- SEO (alt text, etc.)
- Prototyping
- Accessibility (contrast, low/no vision, font size, etc.)
- Responsive breakpoints (how to omit content for mobile)
- micro-interactions & animations- This seems more about coding programming and almost nothing to do with design. Maybe I'm wrong.monospaced
- Definitely more in depth. Maybe for a web team, but may be a little much for the designers.umbee54
- Responsive Design system - Yes!umbee54
- All of this has to do with digital design for newbs imho. I love when marketing designers make a design with cta copy that's a full sentence...hence UX writingwhatthefunk
- imbecile2
copywriting
- SEO copywriting: The ultimate guide
https://yoast.com/co…imbecile - Amazon books
https://www.amazon.c…imbecile - How to Write Content For People and Optimize For Google
https://neilpatel.co…imbecile
- SEO copywriting: The ultimate guide
- umbee542
image optimization - load speeds - the google.
- BaskerviIle2
Show them this:
https://start.uxdesign.cc/
- aslip0
Need a client course for understanding responsive design before we even start the project. Got a client now that's literally doing everything we warned them not to do when we were in the design phase. Now they're passing the beta site around their company and it's becoming re-design by committee.
- mg332
You guys rule. This is all incredibly helpful!
- aliastime2
Definitely an overview of user experience and empathy
UI basics — when to use radio buttons vs checkboxes vs drop-downs
Consistent use of color — what's clickable, what's not
Interactive element states — buttons, inputs, cards, etc.
Design systems — already mentioned, but important
WCAG accessibility guidelines
- cherub0
I come from a photography background not a design background, fair warning. Imho a color science refresher wouldn't hurt. Reorient towards the mixing of RGB for a mobile screen via additive color rather than the mixing of CMYK over a white surface via subtractive color. Examine the color and luminance limitations of the viewing devices themselves, with the intent to stay within the boundaries when designing so it looks correct on the average of all devices.
- mg330
Thanks for the suggestions everyone, this is really helpful. Some of these are a bit more than what I want to teach the print people I work with. It’s really just more to help them understand how to design appropriately to the things that I am creating on the UX side. Even if I can get people to simply understand a 12 column grid and the concept of mobile first, that will be a huge win.
- I’d have thought grids would be an easy pickup for print designers, unless you got a team of Carsons to deal with : )MrT
- http://gridcalculato…utopian
- mg330
Back with another request.
I'm going to put together a survey for our creative team to gauge their overall understanding of web design and responsive design in particular.
Are any of you aware of any surveys or questions that are basic and would provide good feedback that could lead to learning opportunities for them, skills assessment, etc.? What would you ask in this scenario?
- Rather than a quiz, consider having them each design a one-page marketing site for some product. Then have them walk you through how they did it.monNom
- Some will get the job done with squarespace, some with notepad. You might discover skills you had no idea were in your roster.monNom
- ...the final product will tell you what quality they can achieve. I've never tried it, but just a thought since there are so many ways to skin a cat in web.monNom
- raf0
Whoa, I had to ensure this was a new thread, not a bump from the past.
I've said for some 15 years there was room on the market for a "Web Design For The Print Guy" book. Actually, over the years I suggested the topic to some people here who had web dev teaching or public speaking experience and presumably would be able to write and promote it well.
TBF I wondered recently if the niche still existed... Interesting to see it's still just as much of a problem.
- microkorg0
Text. Not images of text.
- mekk1
Adding to my somewhat destructive comment before, I'd teach them the concept of fluid layouts. Don't talk in widhts and heights, talk in aspect ratios with a recommended minimum width.
And the whole dpi topic.. It takes ages for some to "get" that web design isn't about sending a jpg in 6000x6000px with 72dpi.