Report MA 07 Information Design http://agnesdesigns.online/BergenBicycleMap/.html Agnes Sylthe INTRODUCTION

INTERPRETATION OF THE TASK

In this assignment we were to make an A3 poster for cycling trips in Bergen, as well as a website for these cycling routs. The routs are:- Landås route route Fyllingsdals route Laksevåg route

Each route also had to have information about: Distances Estimated time Type of road (bicycle lane, coubbled, busy road Intersections and junctions on the roads

We were free to design the poster as we wanted it. But all the routes had to be included on it.

On the website we had to include all the information I listed further up. The website also had to have some sort of interactive menu.

STRATEGIC DESIGN I have designed a poster and website that shows 4 different hiking areas in Bergen, all starting from Bergen city center. What I wanted with this website was to entice residents of Bergen, but also tourists to take a bike ride to experience and see the areas instead of driving a car.

My target group is parents with small and young children, couples without children who likes to exercise, and active seniors. And for all those who want to let go of the busy life and just enjoy nature. RESEARCH AND WORK PROCESS

CREATIVE METHODES

I started by doing a little research on bicycle logos, although this was not something we had to create. I felt the website needed a logo to make it look more professional. I chose to call my website «Bergen Bicycle Map», as it says specifically what this website is. I drew some ideas based on the inspirations images I looked at. I also wanted to make it very simple so the you can easily recouping it.

After the logo was finished, I started on the map poster. I was not quite sure how I wanted it. I had looked at some posters online that I liked and wanted to try to start from. I drew some sketches, which I later made in photoshop. I was not happy with my first drafts, as it was a screenshot and not something I had made, so I tried to do something completely different. This time I was more satisfied, I made each of the different parts in Bergen with different colors. Landås got a color, Dana got a color, and so on. I put them together with each other where they belonged. Made some space between them for the sake of design, and for it to rake up more space on the poster.

I made the website in the end. Looked for inspiration for layouts, on existing bike pages and on bike blogs. But in the end I just had to come up with something of my own, because I got lost in all the sides I tried to get inspiration from. I wanted the website to be inspiring and fun to be on. I sketched both lowtec and hightec sketches with Balsamiq Wireframes. Then I set up my page in Dreamweaver, it was difficult to create a page with interactive menus. But I got it in the end.

INSPIRATION METHODES To find inspiration, I used google and Pinterest. ANALYSIS When it came to the websites I looked for inspiration, there were a lot to take. I choose two that were very different from each other to get my inspiration. The first is very dark in expression, and it happens to much on the page, you get a little lost confused by what to watch and what to read. The other website is very empty and cold, not so much inviting. The rest of this page is simply boring. I wanted to try to create a website that was a balance between these two website.

As I said, I did not spend much time on the logo. But I took inspiration from these two pictures. As I mentioned, I wanted it to be simple and memorable. The first picture is perhaps most similar to my logo, the way the person is sitting on the bike and the way the wheels are made. From the second picture I drew inspiration from drawing most of the logo in a connected line.

When it comes to to the map, I struggled a lot. The first thing I did was to screenshot the map on google maps. But that idea I went away from when I thought I should make the map myself. So I looked for inspiration. The first picture is a map of Bergen municipality. I sketched around the part of the map I needed and deleted the rest. So it is this image that is most similar to what I have made. The second image is a made with 3D Map Generator - Atlas. Which is a extension to photoshop. I wanted to make 3D maps with dotted lines from the center of Bergen to each place. But this project was too advanced, and I had never finished my website. (I have made picture nr. 2).

These two posters were the ones I drew inspiration from. The first one you see most inspiration from in my sketches. The other is seen first and foremost in my website. Have also let me be inspired by the colors from this poster.

SKETCHES – SCANNED IDEA DEVELOPMENT AND DIGITAL SKETCHES

LOGO:

MAP/POSTER:

WEBSITE:

WEBSITE FLIPMENUS: FRONT:

WEBSITE FLIPMENU: BACKSITE:

HTML CSS

MODDBOARDS: LOGO: POSTER: DESIGN STYLE/GENRE

I have chosen to make a poster and website that shows Bergen from its best side. What characterizes Bergen the most is its pure. It is colorful and unique. I wanted to include this in my design. At the same time I would like to point out that cycling is good for the environment. I also wanted my page to be playful and fun to be on. My poster has a simple layout, so that you can easily remember it if you only have a few seconds or minutes to study it. Hopefully it is interesting enough that people will go to the website to read more there.

TYPOGRAPHY LOGO:

The font of the logo has straight lines with serifs. I chose this font because it was clear and easy to read. It also stands in contrast to the logo itself which has rounded shapes, this makes both the logo and the font clear.

The font I used is called: Blade Brotherhood

POSTER AND WEBSITE: I chose to use the same font on the bottom of the poster (the info) used on the poster. The map on the poster has been given a different font, this is to make it stand out. I have chosen to use a a slightly pirate map-like font, but it is still on the readable side. This font can also be seen on the flip card inside the webpage. The text on the page are written with «Gotham, 'Helvetica Neue', Helvetica, Arial, ‘sans-serif» italic, in Dreamweaver. I wanted this text to be as readable as possible, since this is info most people wants to read.

The font I used is called: Blade Brotherhood regular Casablanca Noir Personal Use regular

The font selection on the maps in my website gives my page a playful expression.

COLORS LOGO:

I tried out several different color choices on the logo before I landed on a blue gradient color. It goes from the color dark blue to a very light blue. I chose this color as a slightly humorous touch to the assignment. Most people in call Bergen the wettest city in Norway, since it rains so much there. But I also chose the color blue because Bergen has quite a lot of coastline. The color of the font is black, so that it is clear and distinct to read. The background color is orange, this is because I was inspired by the header image I have on my page, where there are many orange boathouses on the pier in Bergen.

POSTER AND WEBSITE:

The poster has the same color as the logo, so that it is easily recognizable. When it comes to the website, I have used several colors. Blu, pink, orange and green. All these colors can be found on my header image. I have made the color sharper and more prominent so they stand out on the map. I have also given each pace its own color, and let this run on the entire page. For example, Dana which I gave the color pin. On the poster you can see that area Fans is in color pink. When you go to the website you will find Fana again with this color, inside the Fana page the «important» info is written in the color pink. This applies to all destinations. The flip menu has a picture of Bergen municipality in the four colors I have used. When you flip the card to the other side, you see that the bike destination you are looking at is darker the the rest of the bike destinations. That’s the way it is on all flip menus. The destination you are looking at is highlighted unlike the others. As we had to put some emphasis on the environment, I chose these four colors, blue, pink, orange and green. I would not go for an obvious solution, which would have been to use only the color green. I wanted to play a little around with the color psychology.

BLU: Research indicates that blue can cause an explosion of creativity in the brain. Furthermore, it has also been proven that blue has a calming effect. That’s why I chose to use the color blue, to inspire people to be creative, so they take the bike instead of of the car.

PINK: Pink is seen as a feminine color and is the most romantic color according to the psychology of colors. It is associated with a sense of peace. It is known ti calm the temper and reduce fear. This is why I chose to use this color. I wanted cupolas to get inspired to take a bike ride together. And I also wanted people with anxiety and take a leisurely bike ride, to get unwind and think of something els.

ORANGE: Orange is an eye-catcher with similar properties to yellow. We often associate the color yellow with the light and heat of the sun. When we surround ourselves with this color, our body releases a neurotransmitter called serotonin, which is related to the feeling of happiness and well-being. That’s is the reason I chose to use the color orange. I wanted people to think about happiness and well-being in connection with a good bike ride.

GREEN: Green is the color of development, renewal and rebirth. It is associated with health, nature, freshness and peace. It helps with problem solving and encourages freedom, healing and peace. Green is a color that helps us relax. These properties are the reason why I chose to use the color green. I want people to feel free and at ease when they are on a bike ride. I also want them to associate with getting better health and that the nature benefits from us cycling instead of us driving a car.

This is the reasons for my color choices. One should not necessarily be aware of all this, but have it in the subconscious.

COMPOSITION, LAYOUT, GRID:

LOGO:

My logo is made on a canvas that is 14x15cm. Everything is centered in relation to each other. The bicycle logo is larger than the text itself so that people will understand that it is cycling or something with a bicycle it is all about. The idea was to make it a PNG so that the background would be transept rant and easier to use in different contexts. It turned out to be quite impossible to use on my website then, so I chose to color the background orange. This made it easier to place on the webpage.

POSTER:

The poster is quite simple in composition. The logo, Bergen center text and the map arrow are centrally located. The map itself is also centrally located but the elements are pulled to the side to create some air. The information at the bottom of the poster is located in relation to where the map ends. So the «URL» is edge in edge with the Fana map, and the «more info» is edge in edge with Laksevåg. This gives a clean and airy expression.

WEBSITE:

At the top of the webpage there is a heather image, with a blue menu line. This menu bar appears from the logo on the page. The logo is placed on the left side of because it was where it fit best. If you go further down the page, you will fid a zig zag menu. Info and a flip menu. All these elements are centered on the the page, except the flip menus, they are one on left side and one on the right side, every second time. At the bottom of the webpage you will find a bottom heather and then «all rights reserved» info. The top and the bottom heather act as a front and back cover of a book. All my pages are built the same way. Inside the map page there is also a top and bottom heather with info in between. Inside these pages there are also some pictures from the cycling area you ca visit. These pictures are placed one to the left, one in the middle and one the right, but also centered on the page.

NB! I made my website on a large computer screen, so something strange happens when it is opened on a smaller computer screen!

SOURCES AND REFERENCES

WEBSITES:

https://www.sykkelbyenbergen.no https://oslobysykkel.no https://snl.no/Bergen http://pinterest.com https://visithumboldt.com/ https://www.w3schools.com/howto/howto_css_flip_card.asp https://www.w3schools.com/howto/howto_css_flip_box.asp https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns https://www.hostinger.com/tutorials/best-html-web-fonts https://itwebtutorials.mga.edu/html/chp2/line-breaks.aspx https://www.google.com/maps/dir/Fyllingsdalen,+Bergen/Sentrum,+Bergen/ Laksev%C3%A5g,+Bergen/Fana,+Bergen/Land%C3%A5s,+Bergen/ @60.2942947,5.3384635,10.69z/am=t/data=!4m32!4m31!1m5!1m1! 1s0x463cfbe85a8dbf59:0xf4de974d64192c22!2m2!1d5.2884298! 2d60.3461034!1m5!1m1!1s0x463cfea43b3317d3:0x583d19ca7af47f9!2m2! 1d5.3333389!2d60.3898141!1m5!1m1! 1s0x463cfb748d7ccc19:0x703f7754aeff5528!2m2!1d5.2593086! 2d60.3810315!1m5!1m1!1s0x463cf7128ce52f91:0x1b881a3251fcdab4!2m2! 1d5.345252!2d60.2630972!1m5!1m1! 1s0x463cf93ba3417e8d:0x1c14e62d40349366!2m2!1d5.3706366! 2d60.3631025!3e1?hl=no

PICTURES: LOGO https://webneel.com/sites/default/files/images/manual/logo-all/1-best-bicycle- logo-design.gif https://cdn2.vectorstock.com/i/1000x1000/56/01/infinity-bike-logo-icon- design-vector-22545601.jpg https://i.fbcd.co/products/original/ 895904c8872f700df7205e65ebd0ed13244e3666f99fb8a0cee964e60daf2b58.jp g https://us.123rf.com/450wm/andyadi/andyadi1806/ andyadi180600203/103254666-stock-vector-abstract-bicycle-icon-or-vector- logo-design-template.jpg?ver=6 https://image.freepik.com/free-vector/collection-bicycle- logos_23-2147677268.jpg https://image.freepik.com/free-vector/collection-modern-bicycle- logos_23-2147675653.jpg https://i.pinimg.com/originals/81/38/2d/ 81382d2de2e0d522d3f3d116a569e69c.jpg https://www.graphicsprings.com/filestorage/stencils/ 36770167b060d03a5afa80d2308fd5dc.png?width=500&height=500 https://images-platform.99static.com/i1BWR94tJDXHXWz9FJrD2NRTVA8=/ 698x0:1400x702/600x600/99designs-contests-attachments/123/123472/ attachment_123472510 https://i.pinimg.com/originals/f7/f7/0f/ f7f70fbd9e94d1c4a997a0fe3067937b.jpg https://images-platform.99static.com//FeiuaFh1XcJs79pE7ZXVn1c7ZUk=/ 163x113:836x786/fit-in/590x590/99designs-contests-attachments/78/78274/ attachment_78274421

WEBSITE PICTURES: https://kirken.no/imageservice/images/e61032dcc3cb40a0860f3abc1e1fe04c/ 8b67fe002df54c33afeea5fd692ae60c.jpg https://garanti.no/files/kontor/bergen_land%C3%A5s.jpg https://mapio.net/images-p/54647894.jpg https://drscdn.500px.org/photo/76412619/m%3D900/v2? sig=2917a89e32fe6171ca35d92e0e83d2128a774b0f3d889961dd42d776fb808 653 https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/ Gamlehaugen_bergen_tunliweb.jpg/800px-Gamlehaugen_bergen_tunliweb.jpg https://bergenguideservice.no/wp-content/uploads/panoramatur-fantofot- stavkirke.jpg https://media.snl.no/media/42507/standard_compressed_fana.jpg https://cdn.sanity.io/images/u9ed36i9/production/ 5e023dda32b39c4c6563479ec146a3198504b822-5464x3070.jpg? w=1600&q=90 https://kirken.no/imageservice/images/ d564422f3208499ca40be46b05c9bf89/57af246701eb4858b2810ec836f467aa.j pg https://www.bergen.kommune.no/publisering/api/bilder/T540280157? scaleWidth=550&cropX1=0&cropY1=10&cropX2=4032&cropY2=2295 https://premium.vgc.no/v2/images/87ff345e-ae76-45c4-92ab-d33bed2e5af3? fit=crop&h=681&w=1024&s=edead109d48b3da88e28ed88c86dfa6b9a77238b https://photos.smugmug.com/Byer-i-Norge-1/Bilder-fra-Bergen/i-JkBJvZ3/0/ a0a8bea0/M/720_2557-M.jpg https://upload.wikimedia.org/wikipedia/commons/7/72/ Laksev%C3%A5g_kirke_DSC_0222.jpg https://upload.wikimedia.org/wikipedia/commons/1/10/ Bergen_night_view_from_Fl%C3%B8yen_tunliweb.jpg https://www.visitbergen.com/dbimgs/Ulriksbanen-Bergen-Norway.jpg https://s3-eu-west-1.amazonaws.com/styret/public/ 5a4e261beca0c4.32939910.jpg https://cdn.dnt.org/prod/sherpa/fotoweb/8411cc55-4e49-48ee- bf43-27b92b659a95.jpg https://assets.simpleview-europe.com/bergen/imageresizer/? image=%2Fdbimgs%2Ffjords-Bergen-Norway.jpg&action=Background_Overlay https://media.snl.no/media/7172/ standard_compressed_laksev_c3_a5g__e2_80_93_bydel_i_bergen__e2_80_9 3_1_1.jpg