CREATIVE CULTURE GETS A RESPONSIVE REFRESH
Creative Culture - the digital marketing agency that I owned and operated, desperately required a re-design. The older version was flash based, littered with drop shadows, and had a colour palette more reminiscent of a gothic horror movie from the 80’s. In other words, it was very 2012! And how times (and design trends) have changed. When Steve Jobs passed, so did the obsession with skeumorphism. Responsive design also became an absolute necessity. So I wanted the sites re-design to reflect my growth as a designer by reflecting more modern visual trends and an updated design process - which included a mobile first focus.
I've begun with the desktop design elements. Even though my process for this project was mobile first, it’s easier to showcase the re-design with larger desktop examples. Towards the end of the project, I will include mobile elements, to show how they finally came together. I’ll also take you through the key design elements that were created, and show you how I finally cracked the major visual communication problems that tormented me late at night. Is this font big enough, is that the right shade of grey? Apparently there are 50. You’ll also see my near Shakespearian ability to craft copy - that humans find engaging and web bots informative. In the end, I think the new site design is now far more enticing, enchanting and most importantly, engaging!
CREATIVE CULTURE WEBSITE IN 2012
Much like Psy's Gangnam Style that year, this design rocked in 2012.
WEB DESIGN WORKFLOW
FINAL SITE ELEMENTS
Design trends have evolved. And more importantly so has my design style. A few years is also a lifetime in the cycle of a website. And a lot has happened in the last few years. Shadows went out. Flat came in. Google released material design, and introduced an amazing colour palette, which brought the "spring" back into design elements. All of these formed the main inspiration for the re-design and it's initial concept.
Based on that, I knew I also wanted to include the following concepts:
• Large hero header images – I’ve always loved these and have always wanted to use them in my design work.
• Beautiful, relevant imagery – Images that communicated a concept in an appropriate yet abstract way.
• A clean and minimalist user interface – This stems from my personal design philosophy, which comes from the great saying,”Communicate. Don’t decorate.”
• Creative copy, that converts – Here again, the aim is to attract, not distract.
• Bright spaces – I deliberately moved away from the dark colour scheme that the 2012 site had and wanted to lead users into bright open spaces.
• An intuitive user experience – I attempted to anticipate who my users were, what they would want to know, and what would make them hire us.
• The inclusion of only the most relevant information – According to the stats, you only have between 10 – 15 seconds to impress and convert your site visitors before they leave. Why waste it on irrelevant info?
Once my concept and design principles are put in place, I start sketching out wireframes for the site. This typically involves:
• Choosing a Grid System – I’m not a huge fan of the popular 960 system. I feel that it’s far too small for desktops and you can’t fit as much content into it. Though it is responsive, one would still have to go back and optimise for mobile anyway! I prefer the 1000 pixel grid system. As that leaves enough room on either side for even the smallest laptops like Apple’s new Macbook etc. and can accommodate more content.
• Information Architecture – After setting up my grid I move on to laying out the information architecture of the page. My concept already dictates that I will use large hero images, so I work that into my page architecture, and start to think about the Menu bar and layout etc.
Home & Services Page
This process then lead me to formulate the site’s colour palette. As you can see, there are very classic colours used for the background and text. In stark contrast to the buttons, which I felt needed to have a splash of colour, giving the site some personality. The palette for the buttons is inspired by Google's material design, which I'm a huge fan of.
Being a big fan of type (which designer isn't) I've always been partial to thin, lightweight, modern web fonts. These sans serif fonts add a feeling of sophistication to a design. And I believe that I’ve struck the perfect balance, in considering, look, legibility and size.
Here are some of the issues that popped up when choosing a font:
Weight - Font's can’t be anexoric, because they tend to break up and pixelate on screen. Conversely, they can't be too thick either, because then it makes the copy look heavy and the design clumsy. I also find that with thicker weighted fonts, it becomes harder to highlight certain key words, such as call-to-actions, and to invite a users attention to certain focal points in a paragraph. So I settled on a weight that was thin enough, too stay classy, as Ron Burgundy would’ve put it, but thick enough so that it would not break up and could be read easily.
Size - Fonts obviously cannot be too small either. But the tricky part here, is that text that is too large, makes a site look incredibly amateurish. I managed to settle on a size that balance the two quite well. I’ll also resist the urge to make any penis references. Oops.
So for these reasons, I settled on (drum roll) Open Sans Light, which looks great on the web (on desktops and mobile), at a display size of 16 pixels and a line height of 30 pixels. This was used throughout the site for most of the content in headings and body copy. I chose Raleway for the header image text and District Pro for a the footer. I then paired these with a Serif font - Georgia Italics, to add some emphasis and variety. Overall, all 4 dovetail pretty well.
THE FUTURE OF TYPE:
Moving forward, these issues will no longer be factors that designers will have to worry about. All screens, on mobile and desktop, will eventually become retina displays. We’re already seeing this trend on desktops, with Apple releasing the 5K retina iMac, and PC makers have a plethora of 4K displays already available. The proliferation of these high-end screen resolutions mean that the edges of your type will no longer become pixelated and break up, which often happen to very thin fonts such as Raleway and Helvetica Ultra Light. These thin fonts can now easily be read on these high-end devices, and will retain their sharpness. As these screens become more commonplace, these fonts should also become more popular, as they become more practical. Designers will then just have to consider size, style and pairing. This applies equally, if not more importantly, to mobile screens.
FINAL SITE DESIGNS
Breakpoint: 2550 - 1024 pixel width
The rest of the site pages below, contain the same elements and concepts. Elements such as clever copy and clean visuals etc. have all been repeated. This was done to ensure consistency across the site for users and as such no further explanation is needed.
404 ERROR PAGE
REPORT LINK POP UP
FINAL SITE DESIGNS
Breakpoint: Activated at 1024 pixel width + Media query used to detect device
FINAL SITE MOCK UPS
MOBILE + TABLET LANDSCAPE
Breakpoint: Activated at 768 pixel width and below + Media query used to detect device
The pages and process above detail the specifics primarily for the desktop site. This site, as you can see, has also been optimised responsively for mobile and tablet devices. I felt that the focus should be on explaining the design process behind the desktop version, as the larger images offer an easier way to explain and elaborate on my design process. For now, this is where I'll sign off!
Thank you for taking the time to view this project.