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.