MA 07– Information Design

Report – Andreas Tveiten

http://andreasdtveiten.siteandreasdtveiten.site/
(Not a typo)
 Research & Workprocess
I started my research process, by going to google.com and looking at Bergen
on the map. Trying to see where the different routes for Landås, Laksevåg,
Fyllingsdalen and Fana would go. I found relevant information that gave me
an accurate estimation of the route, it's distance and the time it would take to
travel it. Some questions I had to ask myself as a designer were -

Regarding the project -

1) Colours I should use?

2) What typeface?

3) Style choices?

4) Solve the issue of displaying separate routes?

5) Information I choose to display on the map, or leave to website text?

Answering the questions -

What colours I should use?

I ended up on these colours, as they worked flawlessly together in my eyes,

and really caught eyes when I showed the combination to friends & family. It
also has high visibility which is great, if you wish to use it for an ad-space.
What typeface?

For the typeface I went with two well-known fonts, which I have bought.
Futura, and Helvetica. You can see a sample of them below.

Futura - Realigned equestrian fez bewilders picky monarch.

Helvetica - Realigned equestrian fez bewilders picky monarch.

Style choices?

For the style, I wanted to keep it simple as I am someone who very much
enjoys the minimalistic, fill in the blanks, clean edges designs of modern day.
That was accomplished by having the map vectorized, with clean edges with
a bright colour onto a duller background. The dull background makes the text,
and the landmass portion of the map stand out, it also functions to display
«ocean» on the map.
Solve the issue of displaying separate routes?

For displaying several routes, there wasn't really another way than making a
separate map for each route, although the workload can be streamlined by
using the same assets for all versions of the map used on the separate routes
on the website. For redundancy, here they are -
Information I choose to display on the map, or leave to website text?

I chose to display no information on the map itself, on the website, but leave
the information to the text box, talking about the route on the website right
side. Of course, the map still displays the route itself, it's starting point and
the ending point in Bergen. I feel as it is now, it does what it should and
explains it quite well.

How should it flow from route to route?

I found the best way to make it flow perfectly, without making a custom
interactive map, which I found was too hard, was to have equal placement of
the maps of all four routes. That way, I could separate them as image files,
and have them fade out, when the button is pressed for a new map, and
having the new one fade in, in place of the old. That way you give the illusion
of only the route on the map changing, when in fact it's a whole new file all
together.

Research & Workprocess pt 2

I found that I wanted a simple website, that wouldn't take away from the maps
themselves with a crazy design. I originally toyed with the idea of having a
google map insert, on the website, but found it cluttered things up and made it
redundant when I had designed my own maps. I knew for the sake of
interactivity, where you had to have map change on a rollover or a click, that I
couldn't do my original idea of having a simple scroll for the map, so I decided
to place them separate.

I made some mockups of the website, I like to keep the mockups simple, and
did black boxes with text designated to show what is what. I found that none
of the first few designs really flowed, in the way I got the last one to.

For the website design and code, I spent a long time perusing websites such
as reddit.com/r/HTML, and w3schools.com, trying to figure out the basics of
the coding as it is not my strong side, and I found the way to code for me was
to look at open source code, that had a Creative Commons license on other
websites, templates and forums to spaghetti code something I could
customize and edit on via stylesheets. I found this was a true learning
experience for me, and I feel more confident in HTML and CSS than I ever
have before. I found CSS to be great fun to work with, due to the sheer
customizability of it and how you could get everything to flow so perfectly.
While I was on reddit, I was able to find a person that guided me trough how
to animate the website text bars the way I wanted them to pop in, and out. I
kept the whole webpage static in the form that, it has no scroll function or
doesn't change, only the objects change. I used relevant background images,
I've bought on Adobe Stock and Pexels.com to fill in the blank space, and
give the website some more style.

All in all, it was a good experience, and I feel I ended up with a great result.
Although I know now HTML and website design in general is not my strong
side.

Here are the two mock-ups, and the final design that ended up going online,
with the link to it at the end of this paper.

Mockups
Live site
 The maps
For the bike route A3 map, I wanted to do something simple, recognizable yet
very eyecatching and «huge». I decided on a minimalist, illustration style
featuring a bright & warm red/pink colour, on a muted black/gray background.
I made the text and routes white to separate them from the rest of the image
and to make it pop out more. I made the routes true to the scale they are on
regular maps such as Google's and Bing. I also wanted to add some
information regarding the routes on the map, that wasn't only on the website.
I didn't want to crown the poster too much, and to make it something that
wouldn't look out of place in a ad-roll placed on subway/train stations.

I vector drew the map with the pen tool in Photoshop, by hand, comparing to
the shapes of Google's map. I wanted to keep the routes simple, so it's a line
signifying the route accurately, and a dot to symbolize the location of the
start/end.

These are my third revisions of the Bergen map. I chose to include my

previous versions of the as well, to show the improvements made to the maps
and how the idea of them evolved along the way.
First version of the map -
Second revision of the map -
Third and final revision, the one I went with -
 Website link -

ANDREASDTVEITEN.

SITE

Sources and references

Lynda.com
Reddit.com/r/HTML
Reddit.com/r/learnprogramming
W3schools.com
Google.com
Html.com
Codecademy.com
Forums.adobe.com
Dreamweaverclub.com
Diskusjon.no
Pexels.com
learn.shayhowe.com
Noroff.com