Friday 21 November 2014

OUGD504 Studio Brief 03 A Brief History Of... Final Designs and Interactive Mock Ups


I am really pleased with the way the exterior gallery has worked out. I had been struggling for some time with how to make some aspect or another interactive or allow some feedback from people who have gone on the walks. Pinterest is perfect for this because people can add to the search tag and even the board its self. This creates a community sense to the venture that generally makes the whole brans more likeable and accessible. It also means that people can get to the website through pinterest as well as the usual search engines. 


The transfer of the design to a mobile format website went really well and the simple icon usage really seems to be fitted to this function because they are just the right size to be tapped by a finger accurately. Once again the connection to pinterest  works in the mobile website context because the app for pinterest is particularly visually effective. 


I am happy with the general look of my website and quite surprised that I managed to keep it simple and clean and get the balance of earthy warmth that the subject matter deserves. I do feel that perhaps the hand rendered type could have been done a bit better but this is always the nature of hand rendered type, especially when I am still learning. The layout seems simple but when I started looking into coding I found that I would actually need a responsive design coded so that the thirds of the screen could shrink and grow and still remain proportionally correct. This would also be the case for the icon strands, they would always need to be in proportional thirds. This is imperative because the images need to be full bleed to have the impact that I desire.
General layout- like it but fully responsive coding would have to be used to do this properly (full bleed images)



The use of lower opacities rather than translucent overlays of colour or even flat colour saves me from using web safe colours which I am very thankful for as I have not found one yet that I really like. The differences in opacity are easily achieved through the use of PNG files, as introduced in our one and only coding workshop, so this aesthetic is achievable and functional.

One problem that I did encounter was the way the lightness of the sky sometimes got in the way of the icons being fully recognisable. I got around this problem by inverting translucent squares of a dark blue with a soft gradient down to transparency where the sky connects with the land. By putting tis bend the icon string it brings the white into contrast and makes them much more noticeable. This can be seen more clearly in the gifs below.
-sky has proved difficult

using all images communicate the beauty of the landscape.

Something that was mentioned in the earlier crits was the fact tat images of a place make you want to visit it and are important in convincing people to go there. I have acted on this idea by using photos as the lynch pin of the entire website and I think this has worked quite well. Apart from the obvious difficulties that full bleed images on a responsibly coded website, this is a website that would definitely make me want to visit these places.

At the beginning of this brief I decided that I wanted the feel of this website to be warm and welcoming, have the raw earthy feel of the places being referenced and be quite clean and minimal, so as to appeal to a yuppie sensibility. I think this has worked surprisingly well. The white type could have been too cold and clean but the usage of hand drawn type mediates this, making it ever so slightly imperfect in a very human way. The neat way that the information is tucked away mean that the first screen you see is very appealing without and clutter and the information in each page is accessible and useful. I have had a good look around at websites that do similar things and they just do not bring all of the resources into one place the way mine does, there is definitely a gap in the market.

The opacity of the squares framing the text is the only thing that was brought up in the final crit and I have experimented with increasing the opacity but just found that this felt too blocky and heavy on the page. Although at first glance it may interrupt the readability of the text, the light and airy effect of the reduced opacity is worth this slight compromise.

Overall I am happy with what I have managed to design. I have enjoyed the process of transferring my very tactile and illustrative style into a fully digital format and I think that it has worked really well. However, if there was one thing I would have changed, it would have been to do more coding and push what I could have made real. Of course this was predominantly because the tutor that specialises in coding was away on maternity leave but I do think that I should have made the effort to start coding sooner. Then again I also feel what made this design good is the way that it is not very aware of the limitations of coding and that these thoughts did not inter fear in the design process. So, it is both something i would and wouldn't change if I were to do tis brief again.

No comments:

Post a Comment