19. Crit

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

screen-shot-2017-05-24-at-15-17-101.png
Presentation

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.

update
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.

golden-hour-master1-e1495793378707.jpg
Prototype

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
Website

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
Variable

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’.

screen-shot-2017-05-26-at-10-40-28.png
Testing

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.

screen-shot-2017-05-26-at-10-52-58.png

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.

screen-shot-2017-05-25-at-00-21-07-e1495668240421.png
Some Landmarks I will be Marking

12. Research (6)

The brainstorm from our previous lesson helped me develop my idea as well as think about how I could combine different elements within the subject of sunrises and sunsets. I decided to look at API’s specifically for my project as I knew I would need it to gather live data.

I looked at various websites such as ProgrammableWeb, and GitHub as well as did my own research into specific API’s I wanted to use.

Screen Shot 2017-05-27 at 11.28.08.png
ProgrammableWeb

To my webpage, I wanted to add a sunrise and sunset API as my webpage revolves around this data especially on a map and it is the concept of this project.  Instead, I found a JavaScript library that used code and calculations that only needed the longitude and latitude of a location rather than a API. I found this from SunCalc via GitHub. From this I can gather various calculations such as, sunrise, sunset, golden hour, dawn, dusk, night and nautical dusk. I only needed sunrise, sunset and golden hour.

Also, I wanted to add a weather forecast as I thought it would be important for Photographers to know what the weather would on that specific day.  This will help schedule what places they wanted visit and what time to go.

I initially wanted to get an API from the Met Office Datapoint, but I found it difficult to locate it. Then I found a 16-day weather forecast.  However, I found out later that there was a large fee to use the API.

After further research, I eventually, found a 10-day forecast and without a fee from APIXU. I chose to look at a 10-day forecast instead as they were either free or had a lower fee compared to a 16-day weather forecast.

Screen Shot 2017-05-27 at 22.16.04.png

11. Design (1)

Whilst working with Google Maps during our coding lesson, I came up with some initial designs which uses a map to tell the user the time of a sunrise and sunset of every capital city in the world. Also, it will display various images of famous landmarks of each city.

This map uses both 3D and 2D animations. As you open the map, the world will begin spinning. Using a search bar, the user will be able to transition though the world to the country they want to visit. Once selecting the area you want to visit within the country you are able to view the sunset and sunrise of the landmark.

Initial design 1 pic.jpg
Initial Design 1
Untitled-3,1.jpg
Initial Design 2

As you click on a marker a circle info window will appear and information will be shown alongside an image.

Untitled-3 5.jpg
Initial Design 3

Once the user select the marker they want to view, information will appear on the left of the webpage as well as images taken at sunset and sunrise on the right.

I feel there are elements that I could improve on such as removing the images as I do not feel they are necessary.  This was also a suggestion during our crit. However, are many more features which could be added to create more of an interactive experience for the user.

10. Research (5)

I want to create simple website that is minimalistic and easy to understand as well as more interactive to the user. A website that I feel has been able to deliver this is Apple.

I decided to analyse Apple’s website to see how it meets the user’s needs but still gives a level of functionally, a good design and interaction and with the user.

spu-ea68c8-ogi2-3cwn3bmfojjlb56e.jpeg
Apple’s Homepage

Apple is one of the biggest companies in the world, this means their website must meet the standards at which their products are at.

From analysing their website, I find it welcoming, modern and simple which allows the user to navigate through the webpage easily. The website is not designed to find out further information about Apple, it’s about the products. The space they have used works well with the continuation of the webpage, encouraging the user to look at the products.

Each section uses both text, images and icons which makes it interesting for the user and gives more context to what is being shown. Furthermore, neutral colours and a light san serif typeface are used which gives it a professional feel. The website uses a black header which has the Apple logo in the top left hand corner to replicate the layout of their laptops, this is another way they have linked their design to their products. The use of white text creates hierarchy between each section which makes it easier for the user to understand how the webpage works.

This has helped a lot as it will not only give me information that I can put into my own design but think about layouts and the structure of webpages for future projects too.

9. Research (4)

During our lesson, Gwyn, Xavier, Elliot and I had a tutorial with John on our current project, Geolocations. During our tutorial, we did a brainstorm based on each of our ideas.

Untitled-1
Brainstorm

My peers suggested things like: sundials, clocks, sunrise, sunset, shadows ect.

This process helped me during this stage of finding a specific topic and ideas for sunrises and sunsets.

8. Research (3)

Today I looked at the “Golden Hour” as it could help me in this project. I think is a very important element in this project.

The golden hour is the first hour of light after sunrise and the last hour of light before the sunset, however this can vary during seasons. This is thought to be the best time of day to take a photo as it gives you the best lighting. During that time, the sun is position low in the sky producing, calm light which is better than the strong light during mid-day. This stops you from losing any quality of image, giving it added warmth, texture and depth. Golden hour can be used on any type of outdoor photography and is especially good for landscapes, city scenes and still images.