GDES2000: Blog Task for Tuesday 29th Nov

As mentioned in the last session, I'm away in Manchester at the UCAS Recruitment Fayre for the University next tuesday so I said that instead we'd build on what you all did this week and get you to create mockup 'home' and 'inner' pages for your chosen GDES2000 brief [Beeline Fest or Museum]. The requirements for this task are as follows:

DELIVERABLES

Mockups Task for Tuesday 29th Nov, 2011

• Create a total of 2x mockups of what your web pages might look like in Photoshop.

• No. 1 must be your anticipated design for how your 'homepage' might look.

• No. 2 will be what your anticipated inner page style might look like.

• Each page in photoshop must be setup as we discussed in the session spec-wise:

- Size: w800 x h600 pixels [landscape].

- Colour format: RGB [for screen not for print so don't do CMYK].

- Document resolution: 72dpi [for screen not for print so don't set it to 300dpi]

TIP: When creating new document in Photoshop set it to 'Web' in the preset drop-down. Then select '800x600' in the size drop-down..

TIP: Think about a simple grid layout as you would a printed page design [i.e. 3 or 4 columns] and then lay this out using Photoshop's rulers. This will help keep your designs clear and well laid-out.

TIP: Look at the 2x 'Bickerton' page mockups I discussed in the last session which are linked on the module's timetable page [here].

Hand-In

• Please simply attach both of these images as a .jpg [make sure you file > save for web in pshop -medium quality- and save as a .jpg] to an e-mail to me.

• [Andy St Group] These e-mails will be timed and dated, to meet the day's deadline this must be in before 6pm on tuesday 29th Nov. I'll be recording who gets work in and when for my assessment notes.

N.B. Andy Sc group - Andy will advise on his wants by mail.

What then?

• Once back from Manchester I'll be uploading each of these on the blog and will comment on each person's work to date.

• I'll also send the blog post and your ideas to date to your clients for further comment too.

Andy Stevenson Group: Made Deadline

 Adam

 [Andy] Useful mockups here Adam, I can see where the various elements would sit in the page as it develops. Clear thinking regards the yellow and grey, good incorporation of typo consids and the Beeline imagery supplied to you.

Jesse

[Andy] Good mocks Jesse - well done.. Again, I can see how you've thought in terms of layouts, grids and subtle colours.. Be nice to see this evolve..

Spencer

[Andy] Simplistic layout at this moment Spencer. I can only really see where their basic elements are - we need these to be more of the graphical standard that either Stephen, Adam or Jesse has supplied really at this stage.. Do supply again and I'll replace this one - make sure that the imagery tallies with the spec above [72dpi, RGB, 800x600 pixels etc].

Matt Maynard

[Matt] Please find enclosed my two mockups of the screens. Still pretty rough but developing them as we speak.

[Andy] I can see where this is going Matt and like the use of textured backgrounds and illustrations of characters etc.. Seems to hold much potential - good.. To refine further suggest that you show where picture elements might be and where multimedia elements might sit - just helps with our understanding of how it would work..

Kirsty

[Andy] Very, very simplistic Kirsty unfortunately. It doesn't seem that much time has been spent at this stage in creating a layout of the type I discussed in the session.. I'd suggest that this really needs re-supplying to me as a more refined set of inner and outer layouts mockups [along the lines of many shown here such as Adam's, Stephen's and Sophie's]. Additionally you neglected the task requirement for a 72 DPI 800x600 image and supplied this to me at 300dpi..

Kirsty Mk 2

[Andy] These are much better Kirsty.. You've used the imagery much more effectively and I can see better the various elements that you intend to go on pages - text/images etc.. The challenge now is to take one or more of these mockups to DW as we did in session recently with the 'Ducky' page so you can display this at the peer assessment pre christmas.

Peter Lee IOW

  

[Peter] Just a couple of notes about my items...

- This is for the more adult focused pages.
- The text 'Beeline Storytelling festival at the top will be a Marquee perhaps
- The yellow boxes on the gallery will contain images of drawings by the children and photographs
- The home page buttons are the ones attached to the pegs.
- The arrows on the gallery pae!gge will refresh the images in the boxes, not change the page (This will be clarified in the final design).

[Andy] Like the idea of the pegs and the supplied imagery from Piet is seeming well incorporated.. Keep evolving these ideas.. Simple but effective stuff Peter, be a little careful of how the text works on the inner page though - think grids a little more maybe.

Sam

 [Andy] Sam I can't see much more than the very rough layout at the moment - these aren't really of the same nature as the rough mocups I showed in class last session regards the Bickerton site etc. Suggest you revisit those examples [see timetable] and maybe refine this idea a bit more so we can see more of the graphical elements here.. I'll comment again when you've got something more graphical to show..

Simba

[Andy] Heavy use if Piet's imagery Simba.. What I'm not seeing at the moment is those quirky ideas you had regards Shrek characters which I thought had potential too..

Sophie

[Sophie] Here are the basic layouts for my pages. I am going to explore different typefaces to use. Also I need to take the picture for the main navigation which will be created from a picture of the wallpaper in the museum (which I am going to take the picture tomorrow morning). What is your feedback on the design, I am worried it is too formal. I have several other designs i can take further but i preferred this one. 

[Andy] Sophie - really good initial imagery. Love the textured background ideas. Be a little careful though as this sometimes means that the text gets a little lost - a minor issue at this stage but one to bear in mind never the less. Some good early roughs though..

Stephen

[Stephen]

Here are the mock ups you asked for.
These mock ups are subject to change though, as I need to add photos of the museum to make it more attractive, and the colour scheme will also need som work!

[Andy] Some good early visuals Stephen. Like the use of the colour blocks and clear that you've started to think about how your typography might best fit too.. Good consids with the social media links, clear wher the various elements will go and what thye might eventually bee too.. Good.

Alan

[Andy] Like the ref to the sunflower as visual idea - Bees and flowers etc - clear link.. I can see where elements might eventually sit and what they might be too - good. Good thinking with the primary and secondary navigation links too..

Missed deadline but supplied

Rossouw [Wed 30th Nov]

 

[Andy] Good early layout ideas Rossouw.. Clear that you've thought in terms of grids, simple but effective use of supplied Beeline illustrations. Clever use of the 'buzzing around' idea with the bees on the homepage. Good use of simple text hierarchy in the inner page layout.

Heather [Thu 1st Dec]

 [Andy] These roughs show promise.. I like the honey dripping-down idea especially with the checked tablecloth.. the other idea looks less striking though.. There are some minor suggests such as toning-down the intensity of the tablecloth and to put in a consistent main and secondary navigation [as Alan has done] but bar that they show that you've started to think some interesting and appropriate thoughts here..

On the flip side though you've not quite sent them as the spec required as they've arrived to me as quite big photoshop files as opposed to the save for web .jpgs requested..

Some nice potential Heather that you can work up from here - you didn't make the deadline on tuesday [which I'll note for records] but these show potential..

Claire Gee

[Andy] A good start re Photoshop visuals Claire.. The honeycomb idea seems a popular one! I think that you'll need a clear title to back up 'Beeline' too. With luck we can clarify this tues 6th when one or more of the clients come in first thing.. I suspect it will need to read "The Worcester Beeline Storytelling Festival 2012" or similar.. The challenge now will be to start to mimick what we did in session and take these visuals to a DW web page in readiness for the impending peer assessment..

Harriet

[Andy] Simple but effective layouts here Harriet.. This design looks eminently achievable.. You may have a challenge with things like searches but could link to a free search tool like Google or maybe add one in as a javascript option [DW doesn't supply this facility as standard]. The challenge as ever is to try to make clear what will be an image and what multimedia in your final working pages.. Then to crack-on and be building one or more sample pages like we did with the 'Ducky' pages in the last session..

 Irina

[Andy] Good looking early ideas here Irina. A shame they were so late but useful to see never the less.. Simple and effective layout making max use of the yellow and black contrasts. Buttons simple and clear but you might want to use upper and lower text instead of caps as it looks a little formal.. I can see which elements are to be pics and which multimedia which helps too.. UW logo will need to be all white on black though as they won't allow their corp ID to be treated in the way you suggest [very specific how they'll allow usage].. Like the consistent graphical treatment though.. Additionally these were 150dpi [should be 72dpi] and not 800x600px when I checked and CMYK [should be RGB] so I had to resize/rework them to the required spec for the task myself - just so you're aware..

GDES2000: Good Student Rough Workings

BEELINE FEST ROUGH SAMPLES
Adam Southall

Rough Sample 01

Rough sample 02

[Adam S]
1. What were the key thrusts of your thinking with the roughs so far? 

I wanted to focus on simplicity for all of my designs, as the site is mainly aimed at children so it has to be easy to use. By keeping the content to mainly imagery with little amount of text, it would not only appeal more to children it would also be easy for them to navigate around the pages. Colour was also an important consideration for me. Although it was specified to use large amounts of yellow, i felt that this would be quite off-putting so i decided to experiment more with bright colours that might appeal to children. I also looked into layout, and designed my rough sites so that there were elements of a formal layout for the adult users, but more fluid layouts for the children's content.

2. What influences did you use and why did you think these effective/important?

I researched websites that related to the brief, and also quite a few that were irrelevant in terms of the site content, but had interesting designs. I felt this helped greatly as it gave me an insight into what worked well in their designs, and what i could pick up on in my own. I also took influence from further research into children's psychology and how children use computers and the web. This also was effective as it meant my designs could be laid out in a way that children would associate with them.

3. What is your next step?

My next step (which i have already started briefly) is to take my designs further by creating Photoshop prototypes and trying out different aspects of the designs in attempt to piece together a final design that works. I also want to get started on creating a layout template in Dreamweaver so when i have the designs made up in Photoshop i can move them into the templates.

[Andy St]

Some really impressive thinking here Adam, well mapped-out on paper, clear noted thoughts, colour concepts, thumbnail sketches and [crucially] examples of sites that are already influencing your thinking. this level of rough work and thinking is great for us at assessment time Adam because we can see it all down on paper - you've left little or nothing for us to guess about.. Good work.


MUSEUMS ROUGH SAMPLE IDEAS
[Stephen Hall]

Stephen 01

Stephen 02

1. What were the key thrusts of your thinking with the roughs so far?

My rough work is never particularly "rough" looking because I like to be able to see what my ideas would look like as if they were finals. My layouts all followed the same amount of content, but with slight variations in their sizes, to see how different sidings would affect the usability of the content.

2. What influences did you use and why did you think these effective/important?

Basically, I wanted to try an incorporate parts of existing websites into the currently straightforward site that represents Worcester museum and art gallery, such as the minimalist layout of the Herbert in Coventry and the welcoming colour scheme employed in BMAG's website.

3. What is your next step?

My next step is to create a couple of extra wire frame drawings for each page so that I can add more colour to them, but the colour schemes are probably going to differ through the project as I'm likely to change my mind!

[David Nash - Worcester Museums]

Looks great Steven,

 

We have moved a lot of the museums content to the new site at: 

 

www.museumsworcestershire.org.uk.  We have to stick to the WCC access and layout on the main website while we are hosted there, so I don’t get to be as creative as some of the things I can see here.

 

We update our social media if you are looking for ideas based around current themes or want to feedback:

 

http://www.facebook.com/pages/Worcester-City-Museum-Art-Gallery/246098319494

 

http://twitter.com/#!/worcestermuseum

 

http://researchworcestershire.wordpress.com/

 

David Nash,  Museums Officer, Worcester City Museum.

Beeline Brief: Ref Pictures

Please find a .zip archive of related imagery [for style refs] to the beeline brief below:


[Click on the image below to download the .zip archive]

Final Choice of Brief - Tell Us More..

You've all had chance to go to one or more of the client meetings/discussions associated with this year's briefs. We'd like you to tell us a little more about your final chosen brief. To do so please answer these following questions:

1. What brief did you finally choose and did you go to the client meet for this?

2. Tell us two reasons why you thought this the best choice for you [for example it might be 'I thought it the most challenging or inspiring' etc].

3. In your initial thinking or research have you found an example of a similar site that you think is effective? If 'yes' then what site is this?

Please answer as a 'comment' below this post. If you've already got a Google ID then you can log in as that and put down the comment or you can put your comments as 'anonymous' in the drop-down menu below the comment box.

Please prefix your answers just the once with [your name] and [which tutor]

Questions For Clients [Either Gdes2000 Brief]

This is a post that we'll keep up and visible for the duration of the module. It can be a platform to try and pose questions about the way you personally will tackle your chosen brief. When posing a question here please do so in the following format:

1. Your name and [your tutor's name]


2. The title of the brief the question relates to.


3. Your question[s].

We'll try to get the various clients to keep pace with any questions that are then raised here.