Client:Meeting3: Designs

The main focus of today's meeting with my client Robin Pounder, was to present some design ideas for the Wild and Wilder vintage clothing website.

Idea1-Standardised Layout with fabric textures and sewing patterns.

I presented this idea to Robin as an alternative and to my more inventive designs. The main reason behind this was to gauge his reaction and ensure my understanding of his needs were correct.The nature of the brand lends itself nicely to a slightly wakey design and Robin pretty much discarded this without any discussion. This was the reaction I was hoping for as I want to create a website that challenges both my technical capabilities and design skills.

Idea2-Vintage Magazine Layout

Robin though that although it is an interesting idea, it is quite complicated. I agree with this, it is a idea that needs considerable development.

Idea3-Map

A map from Wild to Wilder, with models on the streets wearing clothing from the brands and landmarks such as broadway cinema, the council house etc along the way. Robin thought that although it was interesting idea, it might be a bit confusing to someone who didn't know Nottingham well as the maps simplistic style doesn't convey distance or direction.

Idea4-interactive shop front

This is Robins (and my) preferred design idea. Navigation is much simpler than the others and

Client: Vintage Magazine Design Idea

The homepage would be designed similar to a front cover of a magazine with a key image and main articles(the more important pages of the site). The other pages will be shown as double page spreads, taking the format of magazine pages. The site can be navigated through sequentially as you would read through a magazine, as well as a standard navigation bar.

Simulated Client : Re-Design

From both user testing feedback and also my personal growing dislike of my previous design, I have started to redesign my anti piracy website. It is perhaps a bit late in the day for this change of heart but as I have already coded the site it will simply be a matter of changing the CSS and shouldn't take too much time.

I started looking at PSDtuts+ website for some hints and came across the image to the left. Unfortunately the tutorial was only accessible to members but I have used it for inspiration. I have noticed a lot of use of the texture on the ladies face, and the use of collaged photographs goes along the same theme of my previous design, as well as being a common trend at the moment.

Below are some of my initial designs.

Simulated Client:Website Layouts

Here are some layout designs for my Anti-Piracy website. These first two images show a slightly different compositions of the elements. I'm not sure why the blue text is so fuzzy but the second image is my preferred design.

The way the Piano keys are positioned almost acts as an arrow attracting your eye to the word "Pirates", which is a more logical way of reading.

The way I have positioned the magpie on the microphone suggests that we want to hear the pirates views, which is the direction i am taking this sight in.
Personally I think the imagery and word 'Pirates' is enough to explain the site's purpose. However I will find out through user testing to see if this is the case. If not I will add a short statement explaining its purpose on this page.

This 'Take Part' section will be my interative element. The user will be able to post their comments concerning piracy and previous comments. You won't have to become a member to take part as it is an uneccessary procedure and could deter people from posting if the have to fill in a form before hand.

The posts will display in time order and I might include a 'name' field.

The section at the side containing the navigation menu and strap-line will be fixed, so when you scroll down to view other peoples comments they are always at hand.


At the moment the information pages will follow a similar format. I will try and keep this information concise and unbiased. I do not want this site to make the user feel like they are being nagged but rather informed. In the same way, if this site was to go live I would only remove comments if they are offensive. By giving people free rein to say what they feel and perhaps suggest methods of addressing piracy, a lot could be learned.

Although I think the strap line it is ok, could be improved and will try to work on this. I am either going to try a pirate-linked pun or try to work with song lyrics...

Simulated Client : Design

I have decided to focus on piracy in the music industry. The reason for this being that it seems that there are not many websites addressing this angle of piracy and personally I think this is the main sector that is affected by peer to peer file sharing. Maybe not financially, because the music industry have other avenues whereby they recieve funds: concert ticket sales and through royalties. However, I believe a larger quantity of songs are downloaded compared to film, mainly due to being smaller files.

These images illustrate the style I want to go for with my website. The slogan needs a bit of work but I think the general aesthetics are on target for my audience. I am going to work on a clever twist of lyrics, from an easily recognisable song. Queen, Abba, Michael Jackson, Elton John,Tina Turner etc etc...The images are just from Google searches so obviously if this was for a real client I would have to source my own.

Mary Slessor Foundation

I contacted The Mary Slessor Foundation offering my services as I thought their current website was in need of updating. Gary (their contact in Dundee) agreed and gave me a rough understanding of the charity's work. He liked the slightly quirky navigation I have used on my portfolio site and apart from the Mary Slessor logo they had no current branding.

I did some research of charity websites and took inspiration from the World Wildlife Foundation. Also with my own website in mind, I took images that reflected the website's pages e.g. History and Our Work. The idea is to have a sentence or two appear when the user hovers over each image. This will allow a first time visitor to have an understanding of the charity straight away.






WelcomePage_Design 1










WelcomePage_Design 2






The main site would follow a similar layout to the following images.






I chose horizontal navigation as the vertical created too much wasted space and looks cluttered. I have aligned the navigation to create a balance with the logo, Charity name and strap line on the left-hand-side. The client also had the idea of changing the images on the header to according the the page's content, so I will be taking that idea on board.



The client wanted to incorporate green, as this is the main colour of the Nigerian flag. Although the flag is a 'grassy' green colour, I went for this rather more 'sagey' colour as is suits the design and creates a more serious feel.

The interaction will be followed through using javascript to alternate between pictures.

Golfactory: Nearly there!

We have decided to go along the sketch book style for our Web page. This is influenced by Paul's work and also Shaun encoraging us to break away from the standard formal layouts we are so used to. This is an exhibition website and so we need to reflect the subject matter in the design.

On our last meeting with Paul, we showed him our designs and he was very keen on Vikesh's design so since we have been developing this. One problem that we have encountered has been the fonts. We would've liked a handwriting style, however we are aware not may people will have this font available to their browsers so we have had to replace this with a typewriter font 'Courier' with is much more widely used. This is a shame because I think the previous font did suit the design much better how ever it is a sacrifice we must take.

Homepage: I think this looks a lot more rigid than the other pages but i was trying to combat issues such as introduing the method of navigation. It looked a lot better with the the notepad on the bottom right and the exhibition poster at top left however, I think this way the user will notice the navigation tabs a lot quicker as we read left to right. I am also starting to worry a little about how we are going to code this as divs only allow you to be at right angles. This design would be much easier to convert into Flash. I also think it need something extra; this age doesn't look ery dynamic especially for a homepage...


Artists landing page: The polaroids would act as links to artists that have had the most recent activity and the rest having text links on the notepad. The notepad might have to end up being more square on the page dueto the limitations of HTML and CSS.

Artists Profile Page: This would have a polaroid picture of the artist or an example of their work along side a short bio of the artist. Their work would be view using lightbox. The current site already uses this and it will allow for short captions under each image.
Exhibitions Landing Page: I have started to make things a bit more square on the page. I think this is a shame but maybe we could make a flash version at a later date?? I am also aware of the posters disappearing into the background. This needs to be combatted so they stand out more either using white paper behind or by encorporating the polaroids because i think they work really well.

Tomorrow we are going to have a meeting and finalise a design the send the mock ups to Paul for conformation. In the coming weeks we will focus on the HTML and CSS. Not sure yet how we will section these pages off but we will also discuss this so we can get cracking!

Goldfactory Designs

Make you Mark Screen shots

I came across this image in my scrapbook which gave me the idea to incorporate the rounded window. I think this makes it much easier on the eye, reducing the conflict between the modern font and traditional imagery.

In this screen shot of the new homepage design you can see I converted the map to a black a white image and changed the hue of the comment bubble to match the green in the header. I also repeated the grey in a footer although it is actually a slightly darker than the header, as against different colours you perceive colours differently. I kept the site blurb but positioned it to the right. Although in hind-sight it might be better on the left as we generally read from left to right and as it will be the first thing you see, will apply more importance. I also kept its background white so it isn't distracting for the user.




The login box appears on all pages but only when your logged out, its position distracts the eye as it appears 'out of place' and could encourage login and participation.

Make your Mark

These are some screen shots of my social networking site so far. The index page is predominantly HTML however, the login form is PHP and the comment has been extracted from my database.
The last couple of days I've been quite productive. One user can now log in however the session only runs on the homepage. I have got my 'upload picture' to work and on the profile page, if there is no profile picture in the database the 'upload picture' option appears instead. I have also altered the registration page so that a correct password has to be entered before registration form appears.

All the content on my profile page has been extracted from the database and I've also got dynamic titles for the profile so it displays "'nickame', Make Your Mark". Profile pictures display now too and the these have been set to a width of 200px.

Things to do:

• I still need to work out how to use dynamic CSS to position comments on the map.
• I need to display more than one result from the database as at the moment I can only print to the screen the values associated with the first entry in the database.
• I cannot currently import data into the database through a form, the upload picture only uploads to a file on the server. I know this will be via a Mysql statement and might look into the statements that appear when you do it through the PHPmyadmin tomorrow.
• Invites are also a problem....

Lots to do and not much time!!

Tarn thai Screen shots

drop down menu

Design Layouts

Here I have moved the navigation above the 'About Us' bubble. I think this gives a more sensible layout. The information at the side is still there and I've added a 'Do we Deliver to you' text field where I hope to allow the user to enter their postcode to see if they are applicable for home delivery.
By adding a picture i think a user will instantly recognise the purpose of the site. Eventhough the title of the restaurant explans what they do perfectly well, images provide instant recognision. I also think adding this image has started to make it look more professional.
Here I have changed the text colour to navy and put a pale blue box behind the telephone number.
This mint green is closer to what i want, and i much prefer the number being raised just underneath the links, feels more balanced.

The pink in this designs is far too girly, although pastels often can be used to represent freshness, it still doesn't suit a restaurant.

From Tarn Thai's Contact card I took the logo and also the colour scheme to. I don't think these colours reflect a thai restaurant though. When I think of Thai I think of freshness, tranquility and quality.