April 13, 2020

How lettering saved my life

Okay, I don’t mean “saved” like “preventing me from ceasing to exist”, but more like “shifting the way I work”.

Now let me go a few years back, just to give this whole story some context.

Quick throwback

After freshly coming out of uni, doing a few years of graphic design and collecting tons of fonts (like I believed a proper designer should do), in the last week of 2017 I decided I wanted to take on a new skill. So my very first salute to 2018 was an otherwise clichéd and clumsy hand-lettered piece. Little did I know that it would mark the beginning of a new epoch in my creative endeavour.

In the following months, I found myself procrastinating from paid work, staying up way past my bedtime and drawing random letters instead, just for funsies. I slowly began to change the nature of the projects I would say yes to, until my portfolio was filled with quirky and colorful letterforms.

Back to the present

Fast forward around 20 months (through all those challenging freelance projects, not so fun day jobs and definitely fun passion projects) and I found myself on my way to a casual interview at this agency my friend has been telling me about for ages now, High Contrast.

The interview went smoothly. The people were friendly and fun, and we seemed to get along nicely. There appeared to be one problem though: High Contrast was actually in need for a web designer and I really, reaaally hated web design. Up to this day, I am wondering why the team would call me back. But they did. In my four-week trial I even produced web design! (A total of 7 layouts that monumentally sucked, one of which contained a contact form with no “submit” button. Ha.)

But what I massively lacked in web design, I made up for in different ways.

How we all got to draw letters together?

In the meantime, my constant rambling about lettering, as the fanatic I am, led me to hosting my first ever lettering workshop at Demisol. It was quite a spontaneous decision taken one morning at the office, after a well-needed nudge from my teammates.

Oh look, we hosted a lettering workshop!

Nonetheless, the event was quite a success and it opened up my appetite for lettering and sharing the knowledge I had gained so far about it even more.

A bunch of awesome humans nerding out over letters.

And as it turns out, being insanely and utterly passionate about something can indeed turn things around for you — and, in my case, made me the one in charge of watering the plants, baking the cookies and designing the logotypes at High Contrast.

When letters take over

Before we go any further, I feel I should explain what this lettering thing is:

  • Lettering is the art of drawing and building custom letters. You don’t draw the whole alphabet, but solely the letters needed to write the given word or sentence.
  • Calligraphy is basically beautiful handwriting. You use your muscle memory to write flawless letters. Think penmanship with an artistic twist.
  • Type design is the process of creating typefaces. Here, you would design a system of letters, making sure they will perfectly work together in all possible combinations.
  • Typesetting refers to working with the previously created typefaces and arranging them in various compositions.

If you say lettering one more time…

I’m going to say this with the risk of sounding like a broken record: lettering is awesome and entertaining and engaging. You could be thoroughly plotting vector points in Illustrator, ecstatically playing with some textured brushes in Procreate or Photoshop or gently pushing your pen on a piece of paper. Yes, letters can exist in many different mediums and in any of these, the fun is guaranteed.

With time, my work started to expand through all these mediums, transforming into something bigger. From mainly exploring the artistic side of it all, a part of my work became more practical. I learned to embrace and got to actually love the technicalities of building letters!

Thanks to the challenges I’m faced with at the agency, I’m constantly immersing myself deeper into this infinite universe of letters. I’m continually figuring out new ways of building proper letterforms and applying them to a variety of mediums and industries, focusing especially on creating logotypes that work.

Need some (proper) tips?

Watching a designer designing letters is like watching an ice machine make ice.

I find this analogy quite accurate. Why? Because the whole process of designing letters is rather tedious — but oh so satisfying!

Here’s my most valued tips I have learnt so far about designing logotypes:

Proper Tip #1: Stating the obvious.

If you’re simply typing the name of a company with a font, you’re not “designing a logotype”. You’re typing. At least apply some tweaks to the letterforms. And for the love of God, please kern!

Got it?

Proper Tip #2: Be a chameleon.

If you have a personal style, that’s awesome! But an agency requires someone who can mould their work to fit the client’s specific needs. Your personal style will still shine through whatever you do, just don’t let that define the work you do at your day job. Don’t suppress your personal style completely. Simply postpone it to when you get home and start your passion projects.

Office work vs. personal work.

Proper Tip #3: Legibility is key.

You could be spending 8 hours on a fancy “a”, but at the end of the day, if it can’t be read as an “a”, you failed. Look at respected designers’ works and observe how they use the shapes. Start analyzing the crap out of all the letters that surround you.

Form a typographic eye and never stop using it.

Proper Tip #4: Watch the proportions.

Be generous with the size of your x-height. It plays a major role in whether a logotype will make sense at small sizes or not. It also influences the white space around the logo. The smaller the difference between the x-height and the descender-/ascender line is, the better. Also, pay attention to the relation of the height and width of a letter. If you have a long word, make the letters condensed. If you have a shorter word, feel free to extend the widths a bit more.

Now you have no excuse for not knowing what an x-height is.

Proper Tip #5: Make sure your logotype is well-fed, but don’t overfeed it.

Staying away from super thin logotypes is generally a smart idea. You want the audience to actually see and feel the logo, not just assume that there should be one. Similarly, having a logotype that’s way too bold will only result in an illegible blob.

Use the squint test: if you can read the logo while squinting your eyes, you can give yourself a high five.

You might overfeed the logo at first,
but eventually you gotta slim it down a bit

Proper Tip #6: Know your type history.

Before you even start thinking about designing logotypes, make sure you know at least some basic things about how letters got to evolve. Sans serif. Serif. Script. Traditional. Humanistic. Transitional. Modern. You should know the characteristics of all these. Feel the letters and what moods they convey. Otherwise, you can end up using letterforms that have quite the opposite emotion to what you are looking to express. Which would make the client confused. And your boss angry. You don’t want any of those.

There’s tons of awesome books on lettering and type and its use in design. Here’s just a few to get you started.

Proper Tip #7: Research.

That brilliant little head of yours suddenly starts filling up with countless possible directions for the logo. Calm. Down. You first have to decipher the brief and then spend multiple hours surfing the internet in order to build a proper moodboard. From logo examples to images and textures, look for anything that might communicate the brand’s tone. Once you’re done researching, you’ll see there’s a much clearer direction to follow.

Gather everything that might have the slightest connection to your project.

Proper Tip #8: Grid it out.

Grids are logotypes’ best friends and you should never design a logotype without one. It’s okay to sketch without grids in the first stages, until you get the overall style settled. Once you do though, grid it all out! Start finding mathematical rules and apply them to the letterforms. Use rectangles and circles. Have the “shift” key pressed at all times to keep those handles straight. It seems intimidating, I know. You’ll manage.

When in doubt, grid it out.

Proper Tip #9: Revise and fix.

You finished the logo. You send it over to your team for feedback and realize that everybody is seeing mistakes that you didn’t even think about. Question your life choices and feel like you really haven’t got the slightest clue of what you’re doing. Snap out of it and fix those mistakes, creating 20 new iterations.

Don’t overthink it though. There’s always room for improvement but at some point you have to stop and move on.

Take your time searching for the perfect letterform. Explore every possibility.

Proper Tip #10: Present, don’t show.

Rather than showing the logo to the client, you have to present it. Don’t assume that others know the ideas and reasons behind your process. Carefully wrap the logo in a presentation that shows your inspiration, the process, the possible use of color as well as a few applications and mockups. Help the client visualize a whole world based on the logo, rather than showing them just a glimpse.

Proper Lettering Tip #11: Teamwork makes the dream work.

Never assume you can do it all by yourself. You might be able to, but there’s just something magical about joining forces with others to create awesome work. Teamwork multiplies the knowledge, skills and experience put into a single project, which makes the end result that more valuable.

The key in collaboration is finding that common ground. Defend your ideas but accept that you might not always be right.

Don’t let your ego run wild. Respect your partners and their ideas, just like they should be respecting yours. Play nice.

Bounce off ideas to your teammates to revise. You’re all in this together.

Make a mess and have fun

The fact that I get to work on my two favorite things at the same time makes me feel like I’m walking in each day into a playground, rather than a job.

Design is nothing but serious play.

The more you play, the better it gets — both the process and the result. Allow yourself to experiment and most importantly, to fail. Don’t be afraid to start over. Not having fun while designing is like forcing yourself to sleep after you just had an enormous cup of coffee. Why would you do that?

The messier the sketchbook, the clearer the end result.

Don’t get used to having it too good

Remember my (basically non-existent) relationship with web design? Well, these sharp-minded individuals I now call my teammates never forgot about it. As soon as the opportunity presented itself, they gave me another chance at proving my worth.

Considering the fact I didn’t have much web design experience and that I genuinely tried to stay as far away from it as possible, it was a pretty fun and rewarding experience. I even got to make friends with this beautiful beast called Figma, that everyone at the agency seemed to praise. Calling it a beast because at first, it seems beyond intimidating and scary, but once you start figuring out its tricks you realize it’s quite beautiful how it accommodates your every move.

I’m still far from throwing panicked cries of help at my deskmate every time I open it, but I’m slowly easing into it.

Need some (not so proper) tips?

When it comes down to getting hired at a cool agency, there’s really not much to teach.

You go in and try to seem super professional. Fail at it. Say some weird things and end up obsessing over them late at night over the next few weeks. (Hopefully) impress everybody anyways because you’re such a delight. Wait for the callback.

You got the callback. Now you have to prove yourself.

For starters, work for 4 weeks straight on a web design trying to impress people doing web design for 20 years now. Get them to laugh out loud when they see your contact form has no “submit” button. Feel like crying. Suck it in and don’t let them see signs of weakness.

Web design 1 - 0 Mukky

Time for plan B.

Think about something that everybody likes. Cookies! Decide to bake peanut butter cookies. Find out that half of the team doesn’t eat sugar. Remove sugar. Find out that the other half of the team survives on sugar. Panic. Find out you have that one teammate who is allergic to nuts. Remove nuts. Remove some more ingredients because everyone seems to be allergic to something. Bake improvised cookies. Get the entire agency to smell like a bakery. Serve the cookies. Get everyone to smile and praise the cookies.

Keep being insanely passionate about that one thing. Be endlessly curious. Never stop learning.

You’re in.

You’re family now.

February 28, 2019

How we fell out of love with Photoshop

Hey, who’s the new girl?

We’re doing graphic design with an accent on digital since 1999 and we’ve been working with Adobe Photoshop for the last 16 years. And we’re pretty good at it. We have a solid creative process that guarantees our clients are happy and proud of their new brand, website or campaign. But how happy is our design team with the tools they are using?

Let’s go back to December 2018. We were really committed to our relationship with Adobe. We knew all our Photoshop hacks, shortcuts and occasional meltdowns. InVision and UxPin were close friends of ours but we still felt that something was missing.

So we ended up thinking: “Is this all? Isn’t there anything beyond Photoshop? Wasn’t our design process too perfect for too long?”. So we decided to spice it up and have a better look at our design tools and see what we can improve or even replace.

When the art boards go over 9000

Fair warning: sometimes, getting used to a tool and letting yourself be completely comfortable with it leads to getting comfortable with its limitations as well. And as our projects became more and more complex, our favorite tools started to show their limitations.

So when did we actually start to see these problems? The first hints started when Artboards appeared as a CC upgrade. The upgrade gave us a better way to view a project fully, not just as separate .psd files. All good for now.

Things got more interesting when libraries appeared and made Photoshop more of a design tool. Just what every creative needs, right? But did all these upgrades make our life easier? What if there are other options out there?

Photoshop didn’t help much with the design — developer relationship either. Developers had to get the information they needed from the tool and most of them didn’t even have an interest in learning it. We can’t really blame them though, can we?

It’s not really a breakup if we still talk

Lately, the options for design software are numerous, so we had to reconsider our tools. Hey, Adobe, it was great while it lasted! We even did a pros and cons list, agreeing that Photoshop is too slow for our fast paced energy and needs and even too bloated with features we didn’t actually need. We didn’t want to change our software just for the sake of changing it. We wanted to update our design process. We didn’t want to follow any trends or short-term solutions and we definitely didn’t want to forget Adobe for good. We just decided to use it for its real purpose — illustration and photo manipulation.

So what options are out there?

Speed, Collaboration, Prototyping, Client design communication and Development hand off. These were the elements that we wanted and needed in a design tool. So we took the winter break to research available options and get away from all the relatives just to create an Excel list with all our options. Sorry, family, our design process is as important as that homemade pie.

Here is our shortlist:

1. Adobe XD — of course, our first option was to stay with the same family we knew. However, Adobe XD still has some performance issues and feels like a lesser upgrade than even Sketch. Again, don’t take it personal, Adobe.

2. Sketch — who doesn’t want to be friends with the cool kid in town? With a larger support of plugins and somewhat a better performance than Adobe XD, Sketch had a fairly big problem: it was compatible only with MacOS. That meant that we also needed the hardware in order to use this software. This didn’t seem like a big issue, if we didn’t feel that Sketch lacks a more modern approach to the design process itself.

3. Figma — with a really friendly free version, less plugins and offering everything we liked in Sketch, the tool proved to be easy to use, performant and with a huge added benefit on real-time collaboration.

And the winner is…

Let’s cut to the chase, we went all in for Figma. Why? Firstly, Figma is a browser based design tool which makes sharing files a breeze. Just send a link to a colleague, client or a friend while you keep working from any computer without having to download the design file and fonts on your device. One creative team happy, checked.

How about prototyping? We can now show the client a much more realistic view of the end result with a real-time and interactive prototype instead of a series of static .png files. One happy client, checked.

What was this all about?

What did Photoshop really lack? The collaboration feature and comment system on which Figma highly relies. After one week of testing Figma, our design team became more in tune than ever. And let’s not forget our development team. Unlike our previous Photoshop system, developers now have the ability to inspect, copy and export any design element straight to their own browser. No more time wasted on exporting elements from the static files or learning Photoshop. One tight creative — dev team, checked.

As expected, it wasn’t an instant love story with Figma neither. As weeks have gone by, we had some reality checks and saw some areas of improvement that we are sure Figma will develop over time. While there is support from the likes of Zeplin, Figma is still very much behind the huge plugin library available for Sketch or even Photoshop. Honestly though, we rarely had a huge need for them so we are still convinced that what Figma lacks in this area it easily makes up in its pros.

The happy end

Let’s not forget an important thing: while having a new awesome toy to play with, what truly improved our design process is the way we do things in High Contrast. We usually pride ourselves as creative early adopters, but we are actually a rational bunch of early adopters: we like to test our options, fall in and out of love with them and make the right decision based on our shared values and styles. In this particular case, we ended up with a more productive design team and a stronger relationship between designers, developers and clients. We might even call it a happy end.

September 7, 2017

A new look for Goodreads

Goodreads' mission is to help readers explore and share books they love. Our mission is to help users enjoy their everyday digital experiences. This project is a visual redesign proposal for the bookaholics’ favorite app.

It's not you, it's us

We are into digital branding for the books industry since 2007 and we like to keep an eye on everything books related: brand identity for libraries, online shops, publishing houses collections and, of course, web and mobile apps.

The new Goodreads - clean and responsive design

From designers to developers and project managers, we are all using Goodreads on a daily basis and we are annoyed by the inconsistent design and the outdated look and feel. Regardless of its amazing functionalities, the navigation on the website or app can be very confusing and tiring.

That’s why we came up with a new visual identity for Goodreads.

First, let's get structured

Our main challenge was to decide if Goodreads is primarily a social experience focused on the community or a personal experience, where the users track their activity and discover new books.  

Crude wireframes - defining the structure

After several discussions and versions, we agreed that we should have both and we defined Goodreads as a shared personal experience.

The next challenge was to create a design that offers both a social experience and a personal one, without overcrowding the interface. So we structured all the features and content according to three main directions:

  • personal space (my books, my recommendations, discovery)
  • content access (lists, deals, blog)
  • community (people, events, quizes).

Wireframes - outlining the three main directions

Smart design for smart people

One major improvement is the new side menu, that helps Goodreads users access all sections at one click away, without navigating through multiple menus.

Homepage navigation on desktop and mobile

Landing page - meet your favorite books

We designed everything closer to the look and feel of a social network, with card based design, familiar icons, section placements and separate community generated content. To encourage users to explore, we gave more importance to the search area, making it the main section of the header.

A new way of exploring and recommending books

Notification panel - a faster acces for all your notifications

A cleaner search system

A new social experience

Chatting with friends on Goodreads is currently based on a mailing system which is a huge impediment for immediate communication. Everyone loves instant messaging, so we designed an easy to access chat system that can be used either with chat boxes or as a full screen for those endless disputes about J.R.R. Tolkien vs George R.R. Martin.

Goodreads chat - communicate directly with your friends

Full screen chat for amazing conversations

Behind the scenes

Spoiler: this is merely a fun project which does not follow the usual creative process used for our clients. 

This is a High Contrast contribution to the community we are proudly part of. Goodreads hasn't hired us (yet), so we couldn’t follow the entire process that we are used to: analysis on real data, user behaviour insights, client discussions and debriefings, focus groups with users and many other. This is a visual redesign proposal based on our personal experience with Goodreads, developed with the following resources:72design hours3creative directions hours8account management hours4copywriting hours 

What’s next?

Are you excited about a better experience on Goodreads? Share this with your friends and let's make it real!

We would love to keep you posted with job openings, party announcements or industry insights once in a while.

By subscribing you agree to our terms and conditions. Don’t worry, we’re too busy to write to you more than once a month.

Copyright © 2002 - 2021 High Contrast. All rights reserved.

Copyright © 2002 - 2021 High Contrast. All rights reserved.

Copyright © 2002 - 2021 High Contrast. All rights reserved.

Copyright © 2002 - 2020 High Contrast. All rights reserved.

Copyright © 2002 - 2020 High Contrast. All rights reserved.

ABOUT COOKIES

We use cookies for website functionality and to give you a personalized experience on High Contrast. By continuing the navigation, you agree.