Swissa Creative Inc. website design

Branding and web design for a Chicago-based video production company

Brief

Design an exciting new clean and beautiful website for a creative agency.

Content

What needs to be on the site and how best to display it

I started initial research by looking at the websites of similar creative organizations and listing their shared features and benefits. By comparing these with the clients’ own requirements I was able to come up with a list of pages to be included and a subsequent map of the entire site.

Most of the sites reviewed in the background research utilised full screen image or video home pages and this is something that the client was very interested in, as it would allow them to instantly display a snippet of their work. I took this idea and also applied it to several other pages, including ‘Our Work’ to create a beautiful featured video page that showcases the clients’ latest work and sits above the entire portfolio section.

The next step was to create a unified static element that would appear on all pages. This took the form of a top navigation bar which appeared transparent/white text on image backgrounds and white/black text on scrolling backgrounds. The decision was made to include a burger bar icon that reveals a slide out search box and links to featured projects, social media accounts and a quick message button.

Site map and top navigation bar schematic

Wireframing

Creating a basic visual representation

Several wireframes were created for each page, some more than others. Particular difficulties included trying to figure out how best to present the ‘featured project’ page in a way that was simple and beautiful but also practical and informative of how to navigate to the clients’ full portfolio.

Without clear indication, the user would struggle to navigate to the portfolio, yet each page was to be constructed with a ‘clean and beautiful’ backbone. This was achieved after several wireframing attempts by including a small but clear bouncing arrow at the bottom of the screen to indicate that more content was available below — upon scrolling the user is brought to an ‘auto-scroll’ full page portfolio section displaying clickable thumbnails of all portfolio items.

The decision was made to also include a link to the portfolio on the home page, and was achieved through a call to action button on the company description section. The button was placed underneath ‘We provide creativity on a LARGE SCALE (larger typeface)’ in the center of the page, which instantly draws the user’s attention to it and also maintains coherence to the ‘clean’ concept.

low fidelity wireframes of home page and portfolio section

Detailed wireframing

Bringing a sketch to life

To give a greater indication of the feel of the website and how it would look with colour/image/video backgrounds, I began to mock up the initial wireframes using Sketch. This gave me a much greater understanding of how to scale certain elements and which typefaces or styles to use.

Home page secondary wireframes
Portfolio section wireframes
Clients page wireframe and slide out side menu

The slide-out menu elements were finalised in the secondary wireframes in Sketch as it allowed me to best see how the featured projects section would look at proper resolution. I decided to include 6 featured projects (3x2) as it was just below the limit of being able to distinguish clearly between each thumbnail. The search box was deemed of primary importance and therefore placed at the top of the menu and the burger bars were replaced with a cross to represent closure of the menu.


Final product

The website was finally brought to life by researching and choosing a very flexible and customizable WordPress theme and heavily editing it to match the design of the mockups. The theme that was selected was Struck largely due to its full-screen video capability, but also because several of its smaller UI elements matched the design (burger bars-cross; top navigation bar layout). I really enjoyed customizing an existing theme to match an original design and the “development” side of things as a whole.


Home page first section (full screen video)
Home page scrolling project aim section
Our Work ‘featured project’ section
Our Work ‘portfolio’ section
Project example page
Contact page and slide out menu

I am very pleased with the final result, which can be seen at swissacreative.com. I really enjoyed designing this site and overcoming the difficulties that came with it, particularly creating an intuitive and informative visual-rich website whilst maintaining a ‘clean and beautiful’ aesthetic.

For any questions or feedback, please don’t hesitate to get in touch at jimmyleslie93@gmail.com.

Thanks!