Web Design for Print Designers
- Started
- Last post
- 41 Responses
- 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
- Salarrue0
I don't know what age range you are talking about, but to anyone in his mid 40's who used to used QuarkXPress, sent/received files in zip drives and worked only in print I would suggest the following:
Learn to share knowledge and collaborate, I used to work with very secretive designers at printshops, only they knew how to prepare the file to be printed and they never share any template making the process longer, they used to see everyone as rivals.
Also not to be afraid to try and error. In print production mistakes sometimes are followed by colossal financial losses. Webdesign allows you to work in a sandbox, but even if a server goes down for a live site, or any error in code will have a solution, as an old friend used to say: type the error in Google because somewhere in the world, someone had the same problem before.
- vaxorcist0
I for one love the links above... thanks....
This is probably an old experience... but .... I worked years ago with a print designer who said his mind was blown with the idea of semantic (meaning or function organisation) rather than visual - (purely for looks organisation principle) ...
...yes, he had used stylesheets in Quark and Indesign, but he was previously all about make 'this part bigger' rather than 'set all headlines to the following font metrics' ...
He was actually quite helpful in preventing a design by committee, especially once he was on the techie's side, and one client person kept saying 'he wanted it to look the same on all devices' and it seemed to take a former print designer to have a conversation with this person ...
- 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.
- SlashPeckham0
Get them out of their Adobe software if you want to work in a totally a new way. I’ve recently walked some print designers through these videos and it seemed to work:
https://www.switchtosketchapp.co…
- 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.
- 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
- Daithi0
One thing that I'd recommend teaching (or asking them to consider) is how people consume information on screen - not broken up in pages like print or instances like advertisements, but in a much more fluid flow. Understanding their own work as a reaction to this more loose structure is an important distinction for me.
Print and other real-world formats have more implicit function tied to and dictated by how and where they are seen: books are for reading; posters are for announcements etc. The web typically requires more explicit signposting for intended use, and for all uses there are established paradigms that can be used or subverted. Once they get their head around that distinction, I've seen these ideas fall into place for colleagues who are attempting to cross over, as yours are.
- 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
- spot130
Sometimes the basics have been hard to get across, stuff like RGB vs CMYK & Pantone and DPI, PPI and just basics around screen resolution has been a struggle for me to communicate to print folks.
- 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
- oey_oey0
sounds interesting from the start plus all great suggestions so far.
- mg332
You guys rule. This is all incredibly helpful!
- shapesalad0
The nuances of getting things to look right across all browsers on all devices.
- 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.
- 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
- microkorg0
Text. Not images of text.
- Hayoth-4
How CSS works, h1 > h5, styles, etc.
How to hand files off to developers
- AKA semantics, content structure and why it matters.evilpeacock
- 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