#process304

[rgrantwylie]

Finding An ‘Extinct’ New Zealand Bird

View the website here

The website is finally finished and is now online to view. It was an interesting experience designing something for a body of work such as the takahe essay. Thinking of an idea for how to present the information was without doubt the biggest challenge throughout the work and learning what you’re doing right, wrong or could do better was valuable.Perhaps in hindsight I could’ve used more imagery and in terms of the styling ensure that everything was naturally aligned, which was the biggest headache when coding out the website; but these are part of the learning curve and things to bear in mind for future projects. Overall I am satisfied with the final piece in terms of the experience I had beforehand and with that in mind I feel I have done well.

[rgrantwylie]

Takahe Website: Responsiveness

The problem when designing a horizontal website is how it will work on smaller screens. Luckily this website wasn’t so wacky that it would be rendered useless on such devices. Media queries alone didn’t solve this. Removing z-index’s and working with margins were key to getting this to work on smaller screens. This was the last big issue to be resolved on the website and I’m glad it was achievable.

[rgrantwylie]

Takahe Website: Image

I feel similar about this as I do with the map, to an extent. It sticks out a little, and plus it’s the fact it’s the only picture. I made it look like it was hanging down to try and keep it within the forest-styled theme. I knew it was important to have a picture in there somewhere and then felt like the appropriate time to do so. Perhaps I could’ve illustrated something out but I feel it gives a bit of a visual break. I altered the file size slightly to ensure it doesn’t look particularly pixelated.

[rgrantwylie]

Takahe Website: Performance Optimisation

Continuing with the performance optimisation theme. When I created the backgrounds for the takahe website, I used SVG as the file type, as the quality remains unchanged regardless of size, so I took advantage of that and created them in a 25x25px Illustrator file. This is massively different to doing them both in one the size of 1920x1080px, and as a result enjoyed a huge size decrease within the files, and doesn’t hinder the performance of the website. I would need to do a similar task (not so seismic in file resolution difference) to maintain the effect.

[rgrantwylie]

Takahe Website: Fast Facts

You could argue that it’s one of the more irrelevant parts of the website, but to maintain the flow of the horizontal page I felt that it deserved to be presented in a more important manner. I essentially displayed it the same way as the rest of the content throughout the site. I feel this is an effective twist to what was meant to be just a list, so overall I am quite satisfied with how the facts were presented in the end.

[rgrantwylie]

Takahe Website: Map

To start off, I’m not particularly happy with the map. I don’t feel it blends in particularly well with the rest of the site and for this I am disappointed. I had to obtain an API key in order to be able to put the map on the webpage. The JavaScript was the main part alongside the API key which got the map working. Google has a set piece of JavaScript which you insert into your website. For the map to show a relevant destination, I found a site which focuses on the longitude & latitude which directs the point of the map to a certain location in the world. In hindsight maybe I should’ve gone with another map such as Leaflet.JS which would’ve meant more styling capabilities than the ones of Google Maps.

[rgrantwylie]

Takahe Website: Table

Having semantically coded the table during the markdown exercise, the hard work of coding the layout was already done. It was mainly about doing the styling which was the main thing at this point. Working on the padding and colours were ultimately what needed to be worked on the most. Using the lighter blue of the takahe and a transparent background I felt helped blend the table with the rest of the site but also still easily visible.

[rgrantwylie]

Takahe Website: Titles & Quotes

I went with a style of using a square using the colours of the takahe (every colour on the site is), with it very loosely being inspired by the National Geographic look. For the quote I used the same border but had it not showing the bottom line to show variety. I’m a little wary about the fact it’s a gradient colour but overall I feel it’s not bad.