Report MA 07 Information Design http://agnesdesigns.online/BergenBicycleMap/Bergen.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 Fana 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 Norway 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.