How I Become A Multidisciplinary Designer: From Print to Screen

As I started off as primarily in print design and then moved into screen design, there are a bunch of differences between print and screen.

uxmarker
Published in
8 min readJun 19, 2017

--

The day when I went to the bookstore with my father about 15 years ago still clinging inside my mind. I remembered, I was stunned by many stacks of comic book which was neatly stacked up on the bookshelves. I was unable to control myself, since some of the books there was plastic wrapped, my curiosity led me to find out more, then I randomly grabbed one comic book from the piles.

I loved the weight of a book in my palms, the texture, sizzle, and the smell of the pages that fragrant in every fold, I was astounded by the draws and how the illustrator made all the characters came to life with his amazing illustrations.

Cr : Fabien Mense

Since then I enjoyed drawing and illustrating. Like many people said, do something you love and pursue your dream. Fortunately, now I work on many projects that require my skill in it.

As I started off as primarily in print design and then moved into screen design for web and mobile application, there are a bunch of differences between print and screen, and many designers struggle with these differences. And one of the biggest challenges when I started doing more web and mobile application design was changing the way I thought about designs.

Here’s how I translate my print design skills to screen design:

Moving my Print into the Screen

Moving from designing for print to designing for screen, particularly for the web and mobile application, can be frustrating, since I really love a rich and complicated design illustration. It feels like everything should be straightforward, easy, and simple. Put away my ego and go with user need.

My “Complicated & Rich” Design — i have created this for submission in Gender Equality Poster Challenge by United Nation Women Asia Pacific 2017

One of the biggest differences between print and screen designs is how people view them. Holding something physical in your hand like a piece of paper or a book, is much different experience than viewing something on a desktop or mobile screen.

When you put your hands drawing for print such as poster, newspaper or magazine, you don’t need to visualize where will people start to read, or what parts are the most significant, and so on. Everything is already clear.

Meanwhile websites are viewed in a range of different applications and on many different devices. As a someone who started as a print designer, I can expect my designs to look exactly how they planned, but as a web designer I have to make sure my work is suitable for a various devices and setups.

Switching from White Paper to Black Screen

As a print designer before, I always have same problem over and over, as “Why are the colors on my computer screen different from the colors on the printed piece?”

Dealing with colors can be very tricky in both print and web design. It is important to understand each of the color models and spaces. Because color displays very differently printed on a piece of paper versus viewed on screen. Print designers work in CMYK (Cyan, Magenta, Yellow and Key) . Meanwhile digital design is based in RGB (Red, Green and Blue) color.

Icon Design for Mobile Apps

As color is really important for your viewers, adjusting from white paper setting to screen setting is critical task. It can play a pivotal role in all our visual experience. The easiest way to make sure colors appear consistent in different deliverables is to use Pantone Matching System, so it’ll be easy for designers and clients to collaborate and ensure that the final product looks as intended.

I Say DPI You Say PPI

Resolution referred using two terms: PPI (pixels per inch) or DPI (dots per inch). Many people often mistakenly use these interchangeably, but they’re really two different things.

I was not really understand and unaware about these terms until I switched into screen design. But there’s no shame in feeling lost on the this subject; since the world seems to have conspired to make it as confusing as humanly imaginable. There is no other way to explain this but to get a little technical, bear with me.

DPI comes into play in the printing process, it’s the density of the dots of ink printed on a printing surface. That’s how many droplets of liquid squeeze into an inch of your printed paper.

PPI involves the number of pixels of a digital image displayed in an inch of screen space. That’s how many points of light live on an inch of screen. So the more pixels per inch, the higher quality an image will be.

Onboarding for Quran ID Project

Now that I switched from print to screen, which actually I still do both of ’em — it’s important to understand the basics of resolution for both print and screen, since resolution determines image quality of how good the graphics look in your final design.

From Static to Interactive

Good Designer is about balancing all the elements required

When I worked as print designer before, all I have was a fixed canvas size to work in. Unfortunately, thing seems to be different as working on web design, since I don’t have any fixed canvas. Designing for the web is now about embracing that flexibility and the unknown of screen size.

Back then once my design went to the printer, it was not going to change, because it would costs me time and money to re-design and re-print it, which was not ideal at all for business. However, web design is completely different, it can be tweaked, changed, or completely redesigned at any time, they’re created to change.

In print design, I was trying to get my audience to stay on a specific page long enough to get a message across. But I was often faced with a limited area in which to achieve this mission, such as a one-page magazine ad.

Meanwhile on the web design, the number of pages to work with can be unlimited, so I can present the audience with snippets of content to entice them into clicking further into the website. Buttons, animation, sound, and interactivity all come into play.

Print can dazzle the reader with high-impact visualization, but the online medium is able to create better user engagement that is made possible by non-static design elements.

From Fabien Mense to Ethan Marcotte

Personally, I found that the guidance of mentor can be really important. Since I still really young when I decided to delve into design field. I realized that I needed to learn many things to make my design skill better.

Cr : Fabien Mense

Finding a mentor, guide, role model or whatever you choose to call it who’s been-there-before is one of the best things I ever did for my career. When I made the decision to transition from print to screen design, from the famous illustrator Fabien Mense to the one of the best web designer Ethan Marcotte. These person really helped me understand the path ahead and the value of the path I’d live.

Responsive Web Design

Lucky I live in a creative environment that always give me an access to meet great people on its field. While studying at Institut Seni Indonesia, Yogyakarta, I meet many people who have a great talent whether in print design or screen design. There are bunch of great design studios in here, like Sebo Studio, Omnicreativora, Paperpillar, and uxmarker, that already in the game for long time. Joining one of those studio was already in my career plan.

Long short story, then I got a chance to join uxmarker, a digital product design advisory, and get involved in many design projects for startups and enterprises. Considering my little experience in it, I am really honored and excited joining such a great team.

Crafting Cohesive and Fluid User Experience in uxmarker

Lastly, as a print designer, the final piece will be delivered to the printer, so you must make the final print appears as intended. But as a web designer, you must keep in mind that you’ll deliver your design to a programmer who will prepare it for the web.

Edited, translated and enhanced: Angga Pradikta

uxmarker was founded with one mission mind: creating the best and most reliable user-centered design for our clients. Here in our HQ, we deal with a wide range of design avenues on every product platform. To ensure a satisfying product experience, our dedicated team generate data from curated user research methods and analyze them to find and fix various design obstacles. With our ingenious ideas and tested skill, we believe we can help make your products a pleasure to work with.

Facebook | Instagram | Twitter | Dribbble | Contact Us

--

--

uxmarker

i am 6 years experienced illustrator happily life in Indonesia