week7b

Week 7

We’re well into the course now – over half way!

We had presentations again this week. Here I am, chatting about navigation ideas for my comedy app project

Navigation Presentation

Navigation Presentation

In the second half of class, we started looking at Wireframing. We talked about different fidelity level options, and where it would be appropriate to use different types of wireframe. There are lots of different ways to wireframe, from sketches to high fidelity work created in software like Balsamiq.

One girl in my class mentioned how, with her clients, she likes to hold an education session at the start of working together. In this session the client and the agency find out about each other and one of the things they teach clients is to understand what a wireframe is. This helps avoid confusion later, and reduces comments like “why is it so grey?”, “will it be more colourful?” and “what is all this funny lorem something something text?” An education session seems like a really good idea to get to know your client and make sure you’re on the same page.

Usually wireframes are black and white or greyscale. You can use colour though, as long as it is done thoughtfully and the colour helps communicate something.

Another thing you can do is annotate wireframes. This might be helpful to communicate your intentions and could help your designers and developers at a later stage.

We had a go at sketching some wireframes for our own projects. Here are the first ones I drew for my comedy project…

First Wireframes

First Wireframes

All these sketches are ideas for the home page. You can see I started out drawing pretty small with my first attempt in the top left corner, and then the drawings got larger as I went. I had this idea to include an Act of the Week and Gig of the Week and I thought this was pretty cool so in my first few frames, it is quite large… but as I went on I realised this really shouldn’t be the main focus and you can see it get smaller and less prominent as I go on, re-sketching ideas for the same page.

More wireframes

More wireframes

On this second page, I drew a wireframe for a fancy intro page, which would have an image in the background, some enticing intro text and log in/sign up buttons. I crossed it out because I’m not sure this will be the best way to welcome new users to the site. I think users would prefer to immediately start seeing gigs and get an idea of what the site is about. This could be something to test later.

Also on this page, I came up with an idea of putting the search into two tabs, one for acts and one for gigs. Initially I had Acts as the first tab, but actually I think Gigs should probably come first. Here’s a close up of what I’m talking about:

Homepage Wireframe

Homepage Wireframe

I feel like this is a good way to make the search feature prominent. It is kind of similar to how sites like Zoopla manage the two searches for renting and buying. The little up arrow at the bottom of the search area is to indicate that perhaps it could be possible for users to click there to close the search, if they want to concentrate on other areas.

Below the search, would be some feeds about the user’s favourite acts, for example what shows are upcoming. The recommendation section could include Act and Gig of the week, or other things tailored to the user.

As I said before, I decided that perhaps a fancy graphical landing page for new/logged out users isn’t the best option, so I had a go at a homepage for logged out users with more content:

Logged out Wireframe

Logged out Wireframe

This page would have the same search feature as the logged in home page, although with fewer options as it would not be possible to tailor the results to the user’s preferences if they do not have an account. Below the search would be a prominent sign up panel, with simple encouragement. On the right is a panel with Act of the Week and Gig of the Week.

These are all just ideas at this point, homework this week is to continue with our wireframing, so I’ll be doing lots of sketching. Next week in class we have someone coming in from the Guardian to talk us through prototyping, so we will be bringing in lots of wireframes to put into prototypes.