Group 11 Analyzing Bogdan Bele Bianca Bogdan Francesco Brignani Jess Tierney Simona Grigalauskyte Matt Skea Nevena Dobreva

Composition 1/2  Genre/style: o Restaurant promotional.  Decoration, information, navigation: o Decoration is plain o Lack of style o Navigation is clear o 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 page o 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  Form o Certain images are pixelated, others are Hi- res  Placement and Orientation o Everything is laid out in a table format centered in the middle of the webpage  Size o Images are different sizes o Border sizes vary  Strength o The links are unreadable because of the strength on certain pages

Contrast 2/2  Color o 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 different o 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-Up Computer Touch Pad MobileWatch

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.