How do you transition from print design to web design?
A crash-course in responsive design thinking.
Web design, at some point, used to be a relatively static thing. HTML tables were used often: OG Photoshop let you export them with slices.
Image maps were crafted from pictures to spice things up. Web-rings reigned supreme. Sister sites were the realness.
Back in the wild wild west of the web, Geocities monstrosities abounded, and nobody really cared if content got cut off via our monitors.
We all had the same fugly monitors anyways, and we also didn’t have web-ready mobile phones.
Queue the mid ‘00s, and enter web design hell:
Devices of all sizes flooded the market. Multiple web browsers started to compete. What was once relatively simple — make it pretty, make it work — became complicated.
It became: make it pretty on 15 different-sized devices, and make it work on several browsers that render things differently.
It became: make it pretty for the very few people who will not let Internet Explorer writhe in agony and die like it deserves to.
So much became complicated, but so much was also unlocked…
For front-end designers like myself, who were thrust into the challenge of responsive design by way of Startup Hell, we had to adapt.
And we did adapt.
We learned responsive design, which means percentages, mobile-first, and understanding when something can be solved with CSS/HTML, and when JS needs to lend a hand.
We learned responsive design, which means trying our best to write code that gracefully degrades as browsers shift goalposts.
We learned how to think of design as a fluid creature, because designing websites for many different devices meant treating it as exactly that.
We were broken free of the shackles of exact sizes. Now, as CSS started to mature, we could tailor-make our websites for a larger group of people.
But not only that, we front-end designers could experiment:
We could layer transparent PNGs on top of other PNGs, and use CSS to animate them. We could make games like the one above (Cardcaptor Sakura! Ahh!) with JS, HTML, CSS and a whole lot of love.
If we were feeling very adventurous, we could poke around Google Sheets, make an API talk to some PHP, and forge a somewhat functional app in an afternoon, just because. Because, we wanted to.
The world wild web was broken the world wide open.
For front-end designers like myself who still really love trying to break the limits, web design’s evolution felt like a beautiful thrill.
But for those who are very attached to the static nature of pre-’00s Web Design, and static Print, web design must now not seem very thrilling.
This is your crash-course in reframing the static, to the dynamic. Get ready.
Web Design is full of things that are unspecified. Print design is all about being specific.
Enter a graphic designer’s dilemma: if Photoshop tells me the document is sized A4, I know if I print it, the image will print the size I want it to.
I may have to tell Photoshop what’s going on, or communicate to the printer what the margins are doing, but it’s fairly straightforward.
And yet, web design cannot, will not, and does not operate on static sizes like A4. Never in the history of responsive design will this ever be a thing.
And why is that?
Responsive Design Is Fluid.
How about another example: say I’ve laid out print for a very sparse, basic flyer. The graphics are solid, the font-weight is on-fleek, the letter spacing is boss, and because I used InDesign, the text is flush on both sides.
Bellissimo, chef’s kiss.
I can print this, and barring color profile issues or the printer being possessed (it happens), it looks lovely.
And yet, web design cannot, will not, and does not operate on these principles.
One can mimic justified alignment with jQuery, and text-spacing in various insane ways, but the fact of the matter is that web design doesn’t speak the same language as print does, in terms of text.
But why?
Responsive Design Is Variable.
Contemporary websites are built, not solely designed, though they are often designed at first. They’re built, using hypertext markup language and cascading style sheets, to adapt fluidly across different sized devices.
Not only that, but if you’re being smart about font sizes, those will now adapt too, with REM/EM instead of PX or PTs.
Mobile phones need bigger fonts, often. They also may need smaller fonts, depending on how much text exists in a headline, for example.
That requires CSS to come to the rescue, which before all that, requires someone who is designing the User Interface to take into consideration the fluid nature of Responsive.
How do you transition from Static Print Design to Responsive Web Design, exactly?
Gently, loosely, full of feelings, and being open to change:
Forget the coding for a moment. Forget the 900 frameworks. Forget whatever Jim John McProductHunt ThoughtLeaderGuy is telling you to work in. Just make peace with one simple thing, right now:
You cannot control everything. Least of all the actions of people engaging with a design that moves and shifts at the whim of a device or a button-click.
This is why UX Professionals are important.
They do the high-level, psychological, soft-touch mental work to make sure the design doesn’t go off the rails when it’s used by actual people.
However, try as web designers might to stymie the glaring character flaw, there will still be that one stubborn person who has Internet Explorer 1, who refuses to use anything else.
Inevitably, the website is going to look like absolute dog shit because of it.
What if someone is using some 5000px by 1000px landscape monitor from hell because they’re a RealGamer ™, and basically any website will try to spread itself across the screen to the point of absurdity?
You can account for it, but you cannot control it.
You cannot control the behaviors of the user. So, what can you do?
Go Gently, Go Loosely.
When I say “Go Gently” I mean, think design modules, not absolutes. I mean, think about how we treat the parts of a web design piece, and then be gentle about it.
Responsive design asks: will the act of what it looks like, marry keenly with what it’s actually doing, which is being used by people with different browsers, settings, accessibility requirements, and devices?
To “Go Gently” with Responsive Design, ask “what it’s doing”:
Think about graceful image resizing/quality for a moment.
Sure, Insert Brand Here has a complex logo with delicate features.
In print design, the logo is very cute. However, because websites will expand and shrink logos based on the viewport, the logo now looks like diarrhea on mobile.
We need an SVG now. We need something simpler, maybe. We possibly need a square format. We might need a light and dark format, too.
This creates a responsive design challenge, even if the style guide provided fails to address it.
Sometimes, what is best for people using a website is not what designers, or stakeholders, or the brand, all have in mind.
If making 900 UI screens is not in the cards, Responsive Design thinking still asks you to account for mucho flexibility.
Then, Responsive Design asks you to measure your metrics with heatmaps, data, and user feedback, to make sure you’re doing a good job.
Going Gently is the way to do that.
Be Full of Feelings:
How is this website meant to feel for users? Is it meant to be bright, spry, and cheerful, or is it meant to be bold, formal, and authoritative?
Is this website meant to guide users on a journey, and possibly could benefit from CSS animations for this aim?
What does the website feel like, for users? What is the website meant to do?
Does what we want the website to look like address what it functionally will be doing and does, and does it do that for as many human people as possible, in an interactive manner?
Will this design feel good to explore, for people with mobile phones? Consider how people hold their phones in their sweaty hands.
Will people who view it on a desktop computer think it feels right? Consider gigantic screens for uber-nerds.
Will this page-layout choice feel good for people with tablets? Consider landscape and portrait views.
Will this design, for this website, feel good, for people?
Print Design asks viewers to look at something, and that’s it.
How viewers feel is still important, but it’s not the same, because a flyer isn’t navigated with a keyboard and mouse.
Responsive Design asks brands to consider user needs, first.
Responsive Design is about how things feel to use, not just how they look. This requires being open to change.
Be Open To Change.
Websites, as digital objects that engage in the framework of responsive, fluid design methodologies, are used and navigated by real humans.
Print doesn’t tend to get changed by the user once it’s put in place on a sign. It doesn’t tend to shrink or expand, save inclement weather conditions.
One is moved through. The other is stared at. One changes, the other doesn’t. One is unalterable once produced into reality.
The other breathes. Websites are alive.
They live.
Websites are meant to be engaged with as a living thing that performs actions, and are tended to by other living things, who constantly change it to perform those actions better, hopefully based on data.
In responsive design, everything, everything changes. It changes from mobile-sizing, to tablet, to desktop, and more.
It changes based on how big someone has their zoom maxed-out to. It changes based on how slow someone’s internet speed is.
Print Design, once processed and put up, does not change.
To transition your mind from Print Design to Responsive Web Design, one must be open to change.
It’s the nature of the beast.
Transitioning to Responsive Web Design Thinking requires only that you know what it means to Respond.
To know responsive web design, and to create and engage with responsive design projects, one must know what responsive design actually is.
It isn’t coding. Coding comes later, you can learn it for free, on YouTube, in a class, via a bootcamp — doesn’t matter.
You can learn all the HTML/CSS/JS/jQuery you want, you can gorge yourself on the principles of flexible design, and still not know how to build a website for humans to use.
Responsive design is a reply.
It’s a dance. It’s an effort at an action, one that you must be thinking about and guide a hypothetical user towards with a Gentle hand.
You must hold Loosely to where the dance is taking you, intercept where you think your probable dance-partner is going to go, and make the steps to compensate or address.
Responsive design is alive. It is Change. Change, that you must be open to, because just as Print is Static, Responsive is Alive, and the Web is an orchestra of movements.
“Responsive” means “to Answer.” “Print” means to “Show.”
Responsive Design is a dance of change, touch, and anticipation. This is the difference between Print and Web design.
And now that you know, you can break free.
Go Gently, be Full of Feelings, and Change to best address user needs.
Good luck. It’s a whole lot of fun, just like dancing!😊
Kira Leigh is a snarky marketing nerd, anime writer, and artist. See her work here and send her a message if you want to work together.
Special thanks to Renato P. dos Santos for his continued support.
