Stockholm_Logo

Step 01 – Gathering Requirements

 

Web-Screens-Isometric-views-Mockup

Must haves:

Clean minimal look and feel ( aka needs to look Swedish :) )

“Lokal List” section which would be a list of local attractions

Blog section for a local writer

Features “Welcome to Sweden” and “Like a Swede” sections for highlighting specific content

Mobile friendly / Responsive

After discussing the main goals for the site, we started to nail down the look and feel. The client provided some sites she liked as well as some mock-ups via Wix. This was extremely helpful, and although they were only meant to be used as inspiration, the direction for the site was made very clear. Since the majority of the content was to essentially be blog based, and the back-end needed to be as simple as possible, we decided to use WordPress.

 

Step 02 – Layout and Functionality

Now that we had a design direction and technology stack, we setup a development environment with a WP install and a minimal theme to start from. Given the nature of the site, and its intentional simplicity, we decided to skip the typical mock-up / feedback stage and decided to jump into the development stage. This is not our typical route, but since the client had a design background and was not scared of seeing “behind the scenes”, we were able to same everyone some time. We tried to not get “bogged down” in the little design details and instead prioritized functionality and general layout.

First we nailed down the header and nav, as they would dictate the layout and flow of the page. After a few revisions it was determined that the logo was a bit too much visually and we we simplified it from a crest to wording (which actually ended up looking better… ). This cleaned up the top of the page and gave us room to work.  We eventually determined the best layout for the menu items and came up with a clever way to keep the menu intact in the fixed header as the user scrolled down. ( We used the first word of the logo and matched it to the “Lokal List” menu item ).

 

Stockholm Lokal Wonderful City – SlideShow_menu Stockholm Lokal Stay_Scrolled

 

 

 

 

 

 

 

 

Next came the Local List. The Lokal List is the heart of the site and the usability had to be simple and elegant. We decided on grid with templated elements, which provided uniformity as well as an easy process for adding List items.

Stockholm Lokal Stay

 

After the list we put together templates for the Blog type sections. This included a grid based “Category” page and a few different options for individual post pages. Once again we kept it simple and clean.

Stockholm Lokal Welcome To SwedenStockholm Lokal Wonderful City – SlideShow

 

 

Step 3 – Detailed Design

This step was very important to the client, and given the strong design culture in Stockholm we could see why. We now had a general layout as well as general direction, however we were still missing some key design elements to aesthetically tie the site together.  During a phone call, we finally decided on an underlying theme / inspiration. It came up when the client was describing how much she liked the street signs around Stockholm. After looking up some pictures, it was clear that the font was the key to the design. A few minutes later we found that Sweden has its own font “Sweden-Sans,” and everything fell into place. The font was clean and strong and tied everything together. We then styled some headers and other small elements to match the street sign motif. Now the final polishing could take place. With some dummy content loaded and a ton of CSS tweaks we cleaned up all the different sections. This was the longest ( as usual ) step since there was so much back and forth communication ( especially given the time-zone difference ).

After cleaning up the other sections we added the standard “About”, “Terms” and “Contact” pages. There was a little bit of flair added to each page to keep things fresh and Swedish :). A full width slider was also added to the homepage to give it a strong initial presence.

Stockholm Lokal Stockholm City Guide Stockholm Lokal Contact Stockholm Lokal About

 

Review

This project was great. It was was technically interesting ( lots of fun little CSS and JS tweaks ). The design was a challenge ( The simpler the site the harder / more important the little details are ). The client was great along the whole process. We didn’t get too bogged down and were able to knock this very professional site out in a matter of a few weeks. Although, I would not use these same tools and processes on another project, they were a perfect fit for this one!