KeySpark Website Redesign

10 June 2016 | Web Design

Background

KeySpark, a web design firm from Ontario Canada

Keyspark has been a great company to work for. Redesigning their site was the first thing I was tasked to do as a new addition to their team. Based off of spec work, they wanted to have a site that comes from a part of the team.

We worked together building a site aesthetic first and went from there.

Tools used: Adobe Illustrator, Adobe Photoshop, Sketching

Goals

  • Refresh the current branding of KS
  • Utilize the new pictures and brand assets
  • Create pages for Home, About, Blog, Products, and contact
  • Everything needs to be mobile friendly

Research

The site had been designed once before and it took a different approach to the company’s direction. This was towards the beginning of KeySpark and their decision to market themselves to game developers. Their original idea wasn’t very mobile friendly so I decided to start the design from the bottom size to the largest.

Where to start?

I updated the graphics and styles of the brand to bring the logo and website under one design system.

The original didn’t have a clear direction or unified look to it.

Before the update

So taking the logo work and brand style guide, I took to creating a visual style of the website that could be seen as more unified but also focused on interest.

Development

There were a few pages that needed to be added to the project. When talking with Tyrel, we needed to focus on the first few (Home, About, Contact)

I moved on to create some working prototypes of the site design.

At the end of the branding part of the project I went back and laid out all of the icons again to be sure I could say they sit within the correct visual style. We moved into putting the pieces together on the page.

Icon set

Final Concept

Once the final brand assets were in place we went to production with the styles.

Images

desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com desktop image of the for the final concept of darianrosebrook.com

Let's Get in Contact

* All Fields Required

Thank you!

I'll review the responses here and respond to you as soon as I can. Thanks!