Business Cards

Screen Based Design

This is the evolution of my business card design. I decided to use the shapes from the pattern on the cv instead of the pattern itself as I thought this might not show up well small scale. I placed them around the logo. My first designs used larger scale versions of one of the shapes on the edges, however I then thought this crowded the back and drew attention away from the information. I then changed the front by adding a box around the logo, this was an effort to make the logo more visible and the card stand out. I proceeded to change the font to all the same instead of using the thinner body text from the CV as I wasn’t sure this would show up in print. I tried out a final few designs switching around the type placement and the colours until I was happy with my final design. I will look into getting this card printed to put on display with my work at the end of year show. This will help start exposure of my work and a possible client base.

B-Card1B-Card2B-Card1B-Card3B-Card1B-Card4B-Card5B-Card6B-Card5B-Card7B-Card8FinalB-Card9Final

Balsamiq: Interactive Design

Screen Based Design

I used Balsamiq to complete the interactive design element of the brief. This website lets you create wireframes of your app and link the pages together, this then works in the same way the app would work.

Once this had been tested, the feedback was that the user couldn’t navigate backwards without having to use the side menu and start over. However, if this app were going to final completion to go back and forwards again a swiping action would be used, but to display this through Balsamiq, I have added in a back button.

The interactive wireframe for Herb!t can be found here:

Herb!t Interactive Wireframe

Final Poster Design for Herb!t

Screen Based Design

This is the final poster design for the Herb!t app. This covers the non-interactive part of the brief. The fonts used in the poster are the same that were used within the app to make it continuous, this font is Raleway ExtraLight, it is sans serif and is a font family so where needed bold and italics can be used too. It was used to portray a medicinal and modern atmosphere to both the application and the poster.

herbtposter-01

Social Final Designs

Screen Based Design

Final designs for the ‘Social’ page:

start

This profile page is where the social button opens out onto, it shows the users profile; picture, posts, shares. It also shows the notifications icon in the top right corner that turns full colour when there has been activity in relation to the user.

The three icons under the profile picture are (left to right) ‘Add New Post’, ‘News feed’ and ‘Friends’.

social1

This is an example of a users News Feed, filled with shares and posts from friends. The user will be able to ‘Comment’, ‘Share’ and ‘Favourite’ on friends posts by using the icons on the top right of each post.

social2

When the ‘Share’ icon is clicked, the options for links to Twitter, Facebook and Pinterest come in to the foreground, blurring out the back.

social3

Favourites Final Design

Screen Based Design

This page holds all the information the user has favourited within the app, this could be searches/recipes/remedies found in the Ailment, Anatomy or Plant sections or posts from the Social section.

anat0

The main Favourites page

fave1

An example of the ‘Favourite Posts’ section, it starts with most recent favourites and continues with the date the item was favourited. This is the same engineering for each of the favourites sections.

fave00-01

Anatomy Final Designs

Screen Based Design

The final designs for the anatomy page.

anat0

The select anatomy page is the first page of the anatomy string, it works in a way that narrows down the searches for the user by clicking on an anatomy.

anat1

Once the anatomy has been selected, the user is shown a dial in the same design as the A-Z menu, showing body parts that the user can select.

anat2anat3

The dial opens up similarly to the A-Z menu and the user keeps selecting until they continue to a list menu like after the ailment pages where remedies are shown.