Akwan Responsive WordPress Website Design & Development

Akwan contacted us to create a responsive portfolio website to showcase their awesome video animation work. This project actually came about as a referral from the very kind Thamer Al-Tassan, after we worked on his photography portfolio.

akwan-responsive-wordpress-design

Planning / Research

After our usual information gathering stage (typically in the form of a questionnaire and then follow-up questions) the first thing we created was a moodboard in Photoshop.

The client had expressed a desire to keep the site simple, clean and use black, white and one accent colour, so we wanted to experiment quickly with a couple of colour combinations and also typefaces, to see what would work well together. moodboard-styletile This mood boarding exercise really helped get the creative juices and ideas flowing when we got to thinking about laying out the various main pages of the site!

Wireframes

This was the first project where we tried a radical new approach to wireframing. If you’ve read a few of our other case studies you’ll see that we usually produce wireframes using Omnigraffle, which is a bit of a visual mind mapping tool that allows you to draw shapes, lines, write text and more via a drag drop interface that’s essentially like Photoshop, but without the ability to add detail. However, now that we’re building responsive websites, we felt using Omnigraffle wasn’t best suited to our workflow anymore, so we looked at a new way to speed things up. So for Akwan (and now for most responsive web projects, where we’re doing the development) we wireframe in code. There are quite a few advantages to this, but the main two are: 1) The client can view the wireframes on mobile devices, as well as on their PC / Mac and actually see how we propose to alter the layout on these devices. It gives them something to play with early on. 2) It means we have a framework to kick-start the development stage from, as the foundation for the code has already been written when creating the wireframes. Therefore saving a little bit of time and cost during that stage of the project. Here’s a look at those wireframes. 

akwan-homepage-wireframe

Design

Our client quickly signed off on the proposed layouts, and we moved onto the design, producing design concepts for the following pages:

  • Home
  • About
  • Work
  • Project
  • Blog

As previously mentioned, we wanted to create a look and feel that was neutral in it’s color scheme and used a single accent colour, which we originally picked as yellow. On reviewing this with Akwan though, they requested that we remove it, and just go with black and white, using the screenshots of their work and the company logo as the only colourful elements on the page. We think this actually works really well.  Whilst creating the homepage design concept, we also switched up the layout the the header slightly, moving the logo to be centered with the navigation beneath it. Here’s a look at the homepage design: akwan-homepage-design The project page was another crucial page to get right. Akwan wanted to have a little text to talk about the project, and then show loads of stills, moodboards and credits from the production.

akwan-projectpage-design

Responsive Development

As usual we developed the site on WordPress, ensuring that it was responsive using the Skeleton framework. Here are a selection of how some of the pages look when viewed on mobile devices. akwan-responsive-wordpress-examples2 We created “custom post types” for the work section of the site to make it super easy for Akwan to manage their portfolio of work. This was then combined with the brilliant Advanced Custom Fields plugin, to allow for the creation of the stills and moodboard galleries and the credits area for each production. akwan-custom-fields Something we think is very important when we build content managed websites is to ensure updating a website is as easy (and also as logical) as possible in the back-end for the client. That’s why we opt to create custom post types, so content that isn’t news/blog entries doesn’t get mixed up together. Instead, there are clear separate places to go to edit those bits of content.

What the client said…

Akwan was a great site to work on, and we learn’t a fair bit about responsive development on this project. It’s also a bit of a mile marker in terms of our internal project process, as this was the first project that saw us produce wireframes in code. Something we are continuing to do where we can. We think it’s really important to try new workflows. Here’s a short, but sweet, testimonial from Ala’a Mctoom, Founder of Akwan.

“You can’t believe how proud we are of our website. You guys did an amazing job!”

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?