Quark Redesign

  • Category: Web Design 
  • Completed at: Personal Project, 2014
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Balsamiq, Bootstrap 3

I used Quark Xpress for the first time about 10 years ago.  I was on work experience at a local design firm and got saddled with an ancient Mac running OS9.  It was slow but it did the job, which at the time was putting together novelty birthday cards.  Anyway, the other day I wondered what happened to Quark and I checked their website out:

quark-websitequark-website

Pretty dull for a company I thought wanted to sell creative software to creative people.  Adobe might not be revered in the design community, but their site’s better.  New players like Macaw and Affinity Designer do well too.  Of course, Quark’s not the powerhouse they once were and they’ve lost significant market share to InDesign.  But it seems like they’re focusing on something else now; continuing to sell Xpress but moving into the corporate world.  They’re offering a range of solutions for automation across publishing and app design.

I still felt it didn’t do them justice though, and decided that the dated look and lack of a responsive site meant a redesign was in order. 

Kicking things off

quark-devquark-dev

I decided that I wanted to slim down the content and give the site a bigger impact.  It needed to be better organised and easier to navigate. 

Full Size Design

quark-largestquark-largest

After finding a great photo of a library on Unsplash, I felt it’d work well as a background.  The best publications usually end up in a library somewhere, so what better to be a backdrop for a company that helps people publish stuff?  I decided to go with a dark theme to hit harder visually, and this came together nicely with dark blue, green and white.

I stuck the support info in the header, along with a search.  Seemed that the old header area wasn’t being well utilised and I wanted to help people find info as quick as possible.  The internet told me Quark had a history of poor customer relations so this would hopefully help.  

Medium Size Design

quark-mediumquark-medium

This size just required tweaking,  I made columns narrower and gave items slightly more vertical height.  I also scaled the boxed images down a bit, and made intro text and buttons smaller.

Tablet Size Design

This size meant I needed to rearrange the content as well as tweaking element sizes.  This was relatively easy because of the original 3 column layout, so I stacked some items and cascaded others.

I also added a small-screen friendly menu.  Orange seems an odd choice, but I decided that the menu needed to stand out and demand attention.  I didn’t want users getting it confused with the background or other elements.  

Mobile Size Design

The most challenging size meant I needed to stack everything and center it properly to make sure it was consistent.  The menu is now single column.

I’ve also implemented a search overlay, because I felt it was important to focus users into the search tool, rather than replacing content on the page with a large search box, results etc.  This way, if they didn’t find what they wanted, they could easily jump back to the home page.

Summing up

Overall, I think it’s a big improvement.  The site stands out a lot more than it did before, it’s easier to find various sections and it accommodates smaller screened devices too.  It feels to me a lot more like a dynamic company going new places but staying true to roots in publishing software.

I’ll probably revisit this when I get a chance, as the smallest size doesn’t work great in some areas.  The bottom part especially feels a bit cramped and could do with a cleaner layout,  It also might benefit from a closer eye on the content.