Building Representative Training SKEA 2012-13. STAPLED TO A LARGE ENVELOPE INSIDE OF YOUR BAG…
Group 11 Analyzing Bogdan Bele Bianca Bogdan Francesco Brignani Jess Tierney Simona Grigalauskyte...
-
Upload
neal-newman -
Category
Documents
-
view
213 -
download
0
Transcript of Group 11 Analyzing Bogdan Bele Bianca Bogdan Francesco Brignani Jess Tierney Simona Grigalauskyte...
Group 11Analyzing
http://hajduczek.co.ukBogdan BeleBianca Bogdan Francesco BrignaniJess TierneySimona GrigalauskyteMatt SkeaNevena Dobreva
Composition 1/2
Genre/style:o Restaurant promotional.
Decoration, information, navigation:
o Decoration is plaino Lack of styleo Navigation is clearo Navigation is not global but links page is global
Alignment of objects:o Approximate Horizontal symmetry
Composition 2/2
Placement of objects in design, symmetrical, asymmetrical, radical symmetry, golden ratio:
o The objects are all centered in the pageo When objects are placed next to each other,
they are placed in a approximate horizontal symmetry.
Gestalt laws 1/3 Figure/ground: We lose a lot of affordance with the navigation
bar. The shading and highlights makes it very clear
that the buttons are figures due to its rounded shapes.
The frames and the flag appear to be grounded due to its square shape.
Proximity: There is a close proximity because everything
is compressed together in the middle of the page following a downward flow, leaving the rest of the page empty with a blue column on the left.
Gestalt laws 2/3 Similarity: We have similarity with pictures having
similar frames on the “Our Restaurants” and “Our Dishes” pages.
The local navigation is similar on all the pages but varies from page to page.
Closure: We could find an example of closure in
the navigation menu. The rest of the website has got closure
because the website laid out in tables, which is bad practice.
Gestalt Laws 3/3
Common fate:o No common fate
Past experience:o No past experience
Symmetry:o No symmetry
Continuity: No continuity
Alignment:o Everything is set in up in tables
Contrast 1/2 Formo Certain images are pixelated, others are
Hi-res
Placement and Orientationo Everything is laid out in a table format
centered in the middle of the webpage
Sizeo Images are different sizeso Border sizes vary
Strengtho The links are unreadable because of the
strength on certain pages
Contrast 2/2
Coloro There is color contrast between the flag and
the border, the man and the horse and the background.
o The quote at the bottom of the page has a strong red border with a blue background, which is very unpleasant for eyes. However, the text which is white falls nicely on the background.
Shape o The borders are all differento The spacing between the images is varies
Responsiveness and Navigation: The website is not responsive The website has global navigation on
the menu and local navigation on the menu page
Typography Typography type:o Serif
Fonts being used :o Arial ( whole website )o Courier New ( welcome message )
The following table is not used in the actual code, but rather as an image
The website does not contain any “Impact” fonts
Typography Typestyle: o Regular – Most of the descriptive text
(Display Typography)o Bold – The headings of each webpage is
bold (Display Typography)o Semi-bold / Condensed – The logo font
(Display Typography) o Italics - The links on “Links” page all use
italics and are underlined, the “Special Dishes Page” (Consultation Typography)
Typesetting:o Centered on all pages
Legibility:o The website has no legibility
Typography Anti-aliasing:o The website is aliased, the edges
are sharp
Size:o The font size for “Reading” and
“Descriptive” typographies can be unreadable, with the navigation buttons displayed typography being big enough to be readable
Line Length:o The “Dishes” page contains an
average of 50 character per line, which is close to optimal. (Reading Typography)½
Wireframe
Computer
Tablet Mobile
Mock-UpComputer
Touch Pad
Mobile Watch
Mock-Up Description Logo: we've changed it taking in
consideration the (poor) ideas they had on the original one. We've added the polish flag as a background and changed the font for the restaurant's name. Also the frame is there cause in the original logo they tried to make one.
Background: the original one was white and really boring so in the process of remaking the website's graphic we decided to use a (not too) colourful background image that in our opinion works well with all the other things we have going on.
Colours: we've decided to go with a red and white pattern of colours to recall the polish national flag. In order to make everything work together we then decided to use different colours for the opening hours and the restaurant details, in that way we believe everything pops out as it should
Navigation layout: The original layout was really not something easy to understand or even to watch so we went with a total new layout in which we've deleted some of the older links which wasn't helpful at all (like Our Dishes and Links). We then decided to use a completely different wireframe that allows us to present the website in four different Mock-ups.
Search Bar: instead of using a new link that opens a new page we decided to put the search bar where it's most common for it to be: top left corner. Doing that we avoid to create confusions on the customers which, now, are able to do everything from the home page.