Color, images, icons, lines, grids... this week we are starting with the design: taking everything we have from the earlier weeks and combining that information into something that speaks to people is certainly not an easy task!
If you want to read about the information I am talking about, check out the previous three blogposts.
- part 1 - Building a website A - Z
- part 2 - Colors, fonts and wires, creating the outlines
- part 3 - Mockups, wireframes and data
Visual aspects
Now onwards to the design. As I've been thinking about the visual aspect of the website for a few weeks now, I can spend some free time into research a bit more. With this, I mean finding websites that inspire me and that would fit the platform we are looking to build.
I came up with a few websites that I think might hit the right spot in what we are looking for. I am talking about Airbnb, the Fancy and Couchsurfing.
Airbnb
Let me go a bit into detail here. First off, I love how airbnb.com handles the search. When you land on the homepage, that is the first thing see. Also, the way they set it up is in question form: straight and to the point; ask people where they want to go and provide them with results. That is what I am looking for as well.
What I don't like about it is that you can toggle through the background images. It doesn't add any value other than pretty images; I feel that auto rotation would have worked just fine.
The Fancy
Next up is The Fancy. The main inspiration here is the clean layout and the navigation. A static-positioned navigation is very important, in my opinion. A user should always be able to return to the homepage, his profile or other important items. Next, is the way the Fancy uses drop down menus: very clean and simple. (please don't mind the Skype logo, it is in there for placeholder purposes).
Couchsurfing
Couchsurfing is an inspiration for almost everybody within OlinData. Again, using search like a question 'Where would you like to go?' is a very good way of telling people how to use the search. At this moment, you don't really see any inspiration from the Couchsurfing website in the design, but once we get to user profiles and user relations we will see a lot more of that.
Design the blocks
As is tradition for a long time in the design world (for some reason and not always the best way to start with designing a website), I started with the homepage. For one, I need to define the 'blocks' we are going to use. I need default navigation and I need a default layout; objects I can later re-use on other pages. So that is the reason I started with designing a homepage.
Another thing that is important to me is that I don't want the website to depend on a 960px wide grid layout. We have been doing this for years and it is time to make everything more fluid. This will add a layer of complexity though, but that is something I will not address in the design phase. Everything you see right now is more or less 'free hand design' (with help of a grid to at least be able to 'see' the boundaries).
Be fluid
With 'fluidity' in the back of our heads, we can think in a wider range of what we can show to the user. We have more space to fill up with content (beware though, this is not always a good thing, people need the whitespace to be able to read the content), but we can decide to expand the width of some blocks to 100% (as I've done with the example below). This way, you create a section that draws a bit more attention and you get rid of some whitespace.
This concludes part 4 of the series 'Building a website A - Z'. The design phase will take probably 2 more sessions before I move on to actually installing the Drupal core and start building. The upcoming design articles will be very interesting though because we are going to focus on detail pages, users, icons and much more! So tune back in next week and thank you for your time!