19. Crit

Today was our final crit to our four-month project.


I feel the crit went very well as I was able to explain the whole process with the help of my presentation. I was given very positive feedback from my peers, as well as suggestions on possible changes to my prototype. A suggestion I was given was to look at the checkboxes and the way it is positioned. I agreed with is suggestion as I don’t think it worked well.

From the feedback I received from my peers, I decided to change my prototype in order for it work and look better for the user.

Improved Prototype

I have removed the checkbox section and created an overlay on the map. To the checkbox section, I have lowered the opacity to that the map can still be seen through. I wanted the checkboxes to be separated from the map so I decided to add a 1px border around it. I think this has improved the design hugely.

18. Design (7)

During my current stage in the design process, I found it technically challenging especially the code due to my current abilities with using JavaScript. I was using over 1000 lines of code and a large quantity of variables and numbers which I found quite overwhelming and difficult to learn in the time I had remaining.

To resolve this problem, I decided to make a prototype of my final design rather than using code to create it. I hope in the future to create this design using code as I develop more of an understanding with the way it works.


I have used Photoshop to create my prototype. The design will be one page with a scroll bar.

I have chosen to use the name, ‘Golden Hour’ as my main concept works around it and I thought it was an interesting name. From my research a variety of websites were called ‘Sunset & Sunrises’ which I thought was quite dull and lacked creativity. ‘Golden Hour’ combines the photographers need which is getting the correct lighting and time for taking an image and it is a unique way of informing the subject of the website. Alongside the name, I introduced the user by writing a summery on what the website shows. Also, the background image works well as it helps set what type of website it is.

I have used a varied number of images and text within the design as I feel it is easier to understand, this stops a language barrier between people around the world allowing visuals to be the key understanding within the website. Furthermore, I have chosen colours which reflect the tones from the image of a sunset. I have selected different areas and lightened them to work well within the design. I wanted to use warm tone colours as it reflects the whole idea of the Golden Hour and are common colours in a sunset and sunrise.

During my research, I found most websites did not have a clear hierarchy system and they were not very interactive as they only did one function, especially the sunset and sunrise websites. From looking at different maps and focusing on the Apple website, I thought it was important to implement a clear hierarchy and giving the user a better experience, but I wanted to create something minimal and understandable to the user, which I feel I have been able to create in my design.  I wanted to show the most important information, to do this I looked at specific elements within their designs and redesigned it to fit my work.  I felt hierarchy was very important, as I have recently learnt huge amount of information from my CTS essay about how typography affects user experience of a website. I have made sure to keep to a maximum of 1 font, 2 typefaces, 3 point sizes and 3 font colours to stop it from being overwhelming for the user. The website will use buttons, checkboxes and a horizontal scroll for the weather forecast to make it interactive for the user. Finally, with this design I hope to expand the map out of London allowing different locations around the world to be mapped as my original idea was just to focus on central London.

17. Design (6)

Now that I have all the markers and data added to the map, I found it was quite difficult to move around the page and look for each location. To resolve this, I decided to use a select box which allows the user to select an area through a box which will alert the map to move to a specific area and open the info window.

I found this quite difficult to produce on my own so I received help from Oliver.


To begin, I used HTML and created categories for the each for the markers such as ‘Parks’, ‘Galleries’, ‘Bridges’, and ‘Landmarks. Using JavaScript, I added a function which allows the select box to move across markers and open and close automatically.

Screen Shot 2017-05-26 at 12.11.45.png

The next stage of creating this website, is to redesign the look of the select box and markers as they do not match the current theme of the website.

This was my coded website so far:

html pic.jpg

16. Design (5)

Today I added the sunset and sunrise API to my code with the help of Oliver as I was unsure how to do this correctly.

To add the API, I used a variable from SunCalc (source of api), that allows the user to get the time from every new date that used the latitude and longitude of each marker from the coordinates I added.

Screen Shot 2017-05-18 at 18.42.39

To add the data to the marker, I used the developer tool in Chrome to see if the variable had been successful with connecting to it. I used Google’s Developer tool which allowed me to copy the code that I wanted to add to my work, such as ‘sunrise’ ‘sunriseEnd’, ‘sunset’, ‘sunsetStart’ ‘goldenHour’ and ‘goldenHourEnd’.


Once understanding how each line of code worked, I was able to add the code to every marker I created previously, however, this process was very long and time consuming due to the number of markers I had to map.

Screen Shot 2017-05-18 at 18.49.02
Applying calculations the code

It had worked successfully, giving live data to each marker.


Also, I went back through the code and edited the way the data looked as it was placed in one paragraph which was difficult to understand. I used a series of ‘<p>’ ‘</p>’ to separate them.

15. Design (4)

I have been successful with collecting the longitude and latitudes of the locations in London. The next stage is to add them into the map using code. To do this I will be using Atom and Google Maps documentation section, shown on their website, to help me input the code correctly.

To create a marker, I had to name each location, such as ‘ParlimentMarker’. As I had to do this for every location, I found it was a very long process due to the input of longitude and latitude for every place, but I was able to finish this successfully.

14. Design (3)

The next stage was to design the map so that I could add markers of each landmark and inform the user of the sunset, sunrise and golden hour.

To design the map, I used Google’s Styling Wizard which allowed me to manipulate the look of Google Maps interface. I wanted to keep it quite simple, allowing the markers being the main purpose of the map rather than it being crowded with information, such as roads which are not needed in my design. I also increased the saturation of the sea.

For this to work correctly, I had to copy the JavaScript and place it into my code, giving me my own modified version of Google Maps.

Screen Shot 2017-05-25 at 00.54.42.png
Google Maps Styling Wizard

13. Design (2)

Today I started to code.

To display the map , I needed to collect the locations I wanted to map. I have chosen to gather the longitude and latitude of famous landmarks in London as it would take very long time to collect the coordinates of every place in the world. To pick the locations, I conducted research to find what places people travel to the most within London. I was able to collect data from various websites, such as TripAdvisor, Timeout and Google Maps own system. Between all three websites, I was a able to collect over 30 markers of places in London. This included things such as, parks, galleries, bridges and attractions.

Popular London Locations

Once I had collected the locations, I gathered the longitude and latitude of each location using Googles Maps URL and located on the page the coordinates. I was able to get every area.

Some Landmarks I will be Marking