SCREENDESIGNPROJECTIoanna Papakosta Jarkko Harjumaa34041

Elianne Ruijter34586

INDEX

2

Overview Project Goals Target Group Layout Wireframes MoodboardStyling Color Palette AccessibilityTypography FontsNavigation Horizontal Menu Environment Browser Operating System Screen Resolution FrameworksScreens

KEY333344788899

1010111111111112

OVERVIEW

3

For this project we wanted to make something that reflected our time here in Stuttgart. That’s why we decided to make a tourist guide for the city. A website with the best restaurants and bars, the nicest activities and a guide how to get around. When we arrived here we knew nothing and tourist must feel even more lost.

THE PROJECT

Business goals:This page is purely for thise course.So we don’t desire to make a business out of it. We are doing this so that we can improve our skills.

GOALSUser goals: - Help tourists navigate the city - Help tourists find out what’s happening in Stuttgart. Both during the day and during the night.

Our project is targeted at English speaking tourists who are visiting Stuttgart and are between 18 and 35 years old. We want to focus on this agegroup because this younger group of people look usually go to the internet first to get what they need instead of a tourist office. Also the content in the nightlife and sightseeing section are aimed to this agegroup. The three of us are also in this agegroup, which means we know what content we would like to see. Because we’re all from different parts of Europe we have a culturally diverse perspective on this.

TARGET GROUP

LAYOUT

4

WIREFRAMESWe decided to make every section look a little bit different. In that way we can experiment with more layouts. This way the visitors also easily recognize thatt they have arrived to a new section. We also wanted to make it look visually more appealing by changing it up every section.

First section: we started with some experimenting on the first page. At first we wanted to make a button that would enter you onto the page but we decided to make a one pager so that would be unecessary. Our final page looks quite different from the wireframes because when we were designing the pages, it did not look quite right.

LAYOUT

5

WIREFRAMESFor the second section we wanted to make it very visual so that the users get the atmosphere of the places we picked.

For the third section we did not know what to do so we just wrote the content in the wireframe and decided on the design when we were experimenting in Illustrator.

LAYOUT

6

WIREFRAMESThe third section needed to be informative and simple. We made three columns that each contain different information.

LAYOUT

7

MOODBOARD

Our moodboard was inspired by the Stuttgart coat of arms. We wanted to work with the silhouette that’s in it and include this into our design with the silhouette of a skyline. We didn’t want to add more colours because we wanted to keep it very clean and recognizable.

LAYOUT

7

MOODBOARD

Our moodboard was inspired by the Stuttgart coat of arms. We wanted to work with the silhouette that’s in it and include this into our design with the silhouette of a skyline. We didn’t want to add more colours because we wanted to keep it very clean and recognizable.

STYLING

8

COLOR PALETTEBecause we are making a tourist guide for Stuttgart, we decided to choose the colors of the Stuttgart coat of arms. A yellow combined with black and white. We didn’t add more colors because we wanted to keep it very clean and recognizable.

# fcdb00 # 000000 # ffffff

The colours we chose should work for people that are color blind because the contrasts are high. We also made our site accessble for blind users, since we use the alt attribute in our image tags. This way a person who is using a ‘screen reader’ can still figure out what the images resemble.

ACCESSIBILITY

TYPOGRAPHY

9

FONTSThe fonts we’re using are ‘Impact’ for the titles and ‘Arial for the body texts. Together they look like this:

TITLEIquis idus inulluptusam volor a volenti voluptas esto quibus, quaspient.Tem faciassunti aliquias dolupta sequatium ab ipsa consequibus enissequam haruptin rem nos eum dolesecabo. Et velest est quassi bearum fugia que dita-quias ant officte cabore verspero dolupta tempori aecerchictet etur? Quiducia-tist rem ide dolupta tiandandem quam am el et, sunt que rem estis eatio cum hillation coreperis si a ne omnis assi utatur assinve ndaestias ent.Git volorent, sequis nus volore coriat es eos am esti volorem con ea si dis ear-um que officia nduciet velit ut aspellaut re doles dolore molupta turibus tempo-ra corem net laudia dolorep elignientiam dolorum soloruptatur sapic te natatur, cus endis sim es et endaeru meniti unt exeritati nonem laudae perae omnimus.Olore ea verruptatus si ut autaturita cus aut quo bea volum quibusa seque numqui derchic test, sit, etum ditemquia dolupta sequatur alia quam, ommo-dipsam, iurit latis a explatus, que delis sitae. Ebitisque sa il il etur as et velit quunt magnimil ius.Laborem poreriam eum as dolendaest, quidese prem hit, nisi od et dunt ma s

NAVIGATION

10

HORIZONTAL MENUWhen we had to choose our menu style, we were mostly concerned with what would look the best. We had a couple of options, for example a hamburger menu but also a horizontal or a vertical menu. We decided to choose a hori-zontal menu because we wanted everything to be visible on one page. Also because we’re making a one pager, we needed the menu to stick eather to the top or the bottom of the page. With our design we decided that a horizontal menu looked the best. On the image below you can see how the menu turned out in the end.

ENVIRONMENT

11

BROWSEROur website will be best viewed in Google Chrome.

OPERATING SYSTEMWe all have Windows laptops so naturally that will be our operating system. However there shouldn’t be any problems with showing the site on IOS or Lynux.

SCREEN RESOLUTIONThe screen resolution of the laptop we’re coding the site on is 1366 x 768.

FRAMEWORKSWe did not end up using any frameworks. We coded the page by writing everything ourselves. We used two sourses which are linked in the code through comments

SCREENS

12

SCREENS

13

SCREENS

14