19 Mar

Portfolio Project: Flat Design

I quickly put together the following mood board to reflect the feel of my chosen ‘fish & chips’ restaurant (part of the group showcase portfolio project).

fishandchipsmoodboard

I then created the following designs in Adobe Illustrator, using the wireframes as a basis for the layout. They are all very flat, vector images. All three ‘restaurants’ will be designed in the same style, each with their unique colour palettes and atmospheres.

D&DHomepage Design-01

D&DFish and Chips Design-01

D&DMenu Design-01

 

Please follow and like:
18 Mar

Portfolio Project: Group Showcase

As part of the portfolio project, we’re creating a group showcase on the wonderful Edge Animate.

The application will include a restaurant theme, showing each of our three ‘dining experiences’. I created the following logo to encompass the group theme – a mix of food and coding/design.

Screen Shot 2015-02-13 at 17.45.21

The initial wireframes can be seen below.

mockupA4

Please follow and like:
13 Jan

Web Dev: Clickable Wireframe

I used my wireframes, created using Balsamiq, to make a clickable prototype on InVision. I showed this to some testers, who found the navigation simple and easy to use, but had some suggestions regarding the page headings.

It was highlighted to me that it could be beneficial to the user if the links were more specific to the end goals. As a runner, it could be confusing if they are trying to find a buddy to run with. Would they click on Events? Would they click on Members?

I need to refine the navigation to help people who know what they are trying to find.

I decided to go back to my research, and have a look again at what users really want. I also need to make sure some of the functions of the site are less hidden. For example, on the prototype above, it doesn’t show that you can find a running buddy if you sign up/in as a member. The semantics clearly need to be improved.

I want the find a running buddy section to be more prominent on the main navigation.

I redesigned the menu to look like this:

boshMenu

It has a lot more running-specific terms to reflect the feedback I received and elements of my research. I created this menu by looking back on my user journeys and realised that if the user didn’t search/land on the page they wanted straight away, they would have to use the navigation instead. My user wanted to find a particular topic in the forum, “running tips”, so as well as having a Forum link under the Members tab, I also added it as a specific category in the Blog.

The difference between the blog and the forum is: the blog contains blog posts and articles written by specific, pre-approved members. The forum, however, allows any BOSH registered member to post or reply to a thread. Having both the filtered (blog) section and the unfiltered (forum) on the same site, means that they can be linked to and discussed easily.

I then added to the navigation diagram, to show extra pages/functions that I would also need to design. These can be seen below, added in black.

 

Scan 20 Jan 2015 19_43

The website I’ve designed has a huge emphasis on community, on the BOSH running membership, and on members using each other for motivation. One thing I got from looking at BOSH posts on Facebook, and that I didn’t get from other running clubs, was their sense of camaraderie. I want to add special features that show events that other BOSH members will be attending, because my research showed that this is a big bonus for BOSH.

Please follow and like:
06 Jan

Web Dev: Mood Board & Wireframes

To begin my visual/prototyping phase, I put together a mood board. I tried to encapsulate the spirit of BOSH, and running in general. The branding of BOSH is blue, so obviously this features very heavily in the mood board, but I’m very happy that I managed to convey the intended emotion of the new website.

The key things I want to try and represent through the design are: achievement, community, freedom, motivation and inspiration.

BOSH mood board by Ashley Nye

InitialSketch

My initial thought is to use WordPress, as it will be a great content management system, easy for the site owner to use and update. The current BOSH website is a WordPress site.

I have a sitemap, and a requirements list, so I know what I need to include in the site and how I am going to organise it. I started by sketching out some 5-minute ideas of how I expect the elements of each page to be arranged. It is important to keep to some design conventions, because the user will expect certain elements to be in certain places, and this aids navigation and makes the site easy to use. I came up with some initial wireframes using Balsamiq Mockups which can be seen below. I started with the Home page and the Events page. I would like the header image to be a slider, with various inspiring images to scroll across the top. I want the site to be quite clean looking and minimalist in design, because it has a lot of content to include and I don’t want it to look overcrowded and therefore less professional.

BOSH wireframe

Please follow and like: