olliejday-blog - Tumblr blog

[olliejday-blog]

I now gathered some free stock videos from pixabay.com to produce my final website design.

These really improved the look and feel of the web outcome. I played around with HTML and CSS elements to achieve a dual video display, with two clickable areas of title. I think the videos are both clearer and more engaging than the icons I had before. The text is simple and effective, the button style is clearly clickable such that the user might be interested in finding out more.

The buttons then link onto pages with info about their data, and best practices or alternatively about vulnerabilities. The info here is quite simple and could even link to further pages in a real webpage in order to keep each page clean and simple. To develop further I would definitely work here, adding more pages and information. 

But overall, I think it achieves a clean feeling website that engages the audience and conveys the message in an important way. Fittingly for the project, I have made a website about internet (web) safety..... 

.... the medium is the message! 

[olliejday-blog]

I liked playing with the police data, but wanted to resolve the internet security start of my project. Here I played with some elements that I had produced to make some different website designs to convey the message about risks and awareness of internet privacy and security.

I started with the basic icon arrangement, but found it was too basic and some elements were not clear - there was a lot of missing info.

So I next added some text to help clarify the immediate process which could then link to detailed info on the parts of the site. I liked how this diagram conveys simply the system of the internet. But as a front web design it is too complex, not simple and immediately attention grabbing and visually appealing enough. 

So next I tried a diagonal timeline of some key icons: computer of user, router and then the web server. This keeps the key steps whilst also allowing a more aesthetic experience. I also included one of the statistics from my research and added questions to grab the audience and encourage to click through.

Continuing the idea above, I fully removed the icons, and opted for a textual design. I also stepped away further, swapping the black and white for a background of black with white text. I liked the play this inverted colour gives, but the new quote is too long, not snappy enough, and again we don’t need all that info on the front page. However, I do like the style of clear text areas to explain what this site is about, as icons are not clear and too much text is overwhelming.

Finally, I tested using the icons, in play with the white/black contrast. I used perspective in the classic manner to display the narrative of the story, where the deeper, further back layers depict the further steps from the user/ their computer. In contrast the “dark side” (bit cliche) has the hackers. I thought this worked well, as it drew attention to the main points which are how to use the internet safely, but also has the aspects of awareness and detail in showing the processes and vulnerabilities, as the user could click the icons to find out more.

Overall, I like the white text on black, and think taking a simple text element along with the idea of comparing the good practices and usage to the side about vulnerabilities will be effective. I think to make it more visually appealing it would be interesting to try some video, or animation elements as they are more engaging.

[olliejday-blog]

Stage 2 Evaluation

Having already applied for Computer Science, Stage 2 was a chance to enjoy Graphics with a different perspective. We started with the Quote Project, which was a chance to explore typography, a key element of Graphic and Print Design. After developing a pixel style typeface, I continued to look at ideas of money and happiness. This was my interpretation on the William Arthur Ward quote which I chose: “Happiness is an inside job”. As part of this project, I really enjoyed the screen printing workshop, which complemented my more digital working style.

 Next, was the book project, which built on the textual studies of the last project in a more commercial setting. The use and design of typography was applied to the covers and descriptions of the book, alongside small graphic sketches and colours. My chosen book was “Lord of The Flies” by William Golding. After looking at the key themes in the book and some example covers, I started looking at O’Reilly books which are quite technical books that use etchings of animals to help bring the otherwise quite dry books to life. A boar is a major symbol in the book so I focused on this element. As filters and manipulations in Photoshop and Illustrator proved unsuccessful in achieving the effect I desired, I drew the boar with a graphics tablet. This resulted in my first book cover. I then looked at African and Aboriginal tribal art to convey the primitive aspect of the novel. This led to look at Cubism, particularly its links to African statues and masks, focusing on Picasso’s African Period such as “Les Demoiselle d'Avignon”. With this inspiration, I produced two more book covers. I combined elements of these to make some final improvements and a final set of design proposals.

 Our last project was “Medium is the Message”, I spent quite a while deciding on what “message” I wanted to express, deciding finally upon Online Safety and Privacy. I made some original graphic designs based on my understanding of internet protocols and the way the internet works, to highlight vulnerabilities and best practises. During this project I found a really interesting Police data source for the UK, this inspired me to extend my project to more broad ideas of crime, as one of my original thoughts for the project was to look at bike theft which has been quite prevalent in my flats. I plotted information about crimes in Dorset using the Google Maps API and loading in the crime dataset. This visualised the data and promoted awareness, safety and understanding about local crime, and the work of the Police.

 Overall, I feel I have developed from stage 1 and enjoyed stage 2. I look forward to using what I have learned in the final stage 3 project.

[olliejday-blog]

Unit 6 Proforma

Identify your progression route

I am going to go on to study Computer Science G400 at Warwick or Southampton University or Computer Science with Artificial Intelligence GG47 at Edinburgh University. My main interest is Machine Learning, which is a quite theoretical, cutting-edge, exciting field. Not all universities offer a ML course, so at the moment Edinburgh is my favourite as it is more focused on that area, however I will have to visit before I finalise my decision. Warwick and Southampton are great institutions too, and they offer more freedom in which I could focus more on ML in later years.

Why did you choose it?

I chose to do an Art Foundation because I did not know what university course I wanted to do. I enjoyed Art at GCSE and A-Level, so the Art Foundation seemed a great course to help me explore creative areas that I could pursue. Towards the end of my A-Levels, I started to do some introductory programming courses, as I felt computing would be a skill that would be useful whatever field I ended up working in. As I learned and studied more, having never formally studied computing, I found I really enjoyed the concepts and ways of thinking as well as the end programs and applications. I decided to step it up, completing CS50, an intensive 12 week online introduction to Computer Science offered by Harvard. Through this study I got a work experience placement at Ratio Network, a local web and software development company. These two events really helped me develop my skills and understanding. Overall, when it came to making decisions for university, as much as I have enjoyed the Art and Design studies so far at AUB, I felt computing was the natural path for me to take. Following the amount of my spare time I had chosen to spend studying it, I look forward to studying it full time, and with an A* at Maths A-Level, I was able to apply for some competitive places.

What other options did you consider?

Before AUB, I would have likely gone into Architecture or some sort of Art History course. Whilst I would have enjoyed these, I think my change into Computing shows that they may have been the wrong choice for me. I have worked part time at Roche Court, New Arts Centre Salisbury, for over a year, and loved my time there, I also did work experience in Wooley and Wallis Auction House, so alongside my Art History AS-Level, there seemed to be something there. I also did Maths, Physics and Art A-Level so had the basis for an Architecture course

Whilst at AUB. I considered, of course, Graphic Design, and talked to my cousin who changed from Architecture and now studies Graphics at Reading.

Overall, these would have been great, but, for me Computing and particularly Machine Learning ticks all the boxes: enjoyment, exciting, academically stimulating, challenging, broadly applicable, very high pay and good employment opportunities.

 Give examples of how you have presented yourself and your work to others

At the project reviews, I have shown my own work to others, both smaller groups and the whole class, as well as actively engaged in discussions of others’ work. At the end of my work experience, I presented my twitter dashboard project to the team at Ratio. My Art work was part of the A-Level display at the school founders’ day.

[olliejday-blog]

To make the website for the project then, required two major steps:

-Process the data (in an interesting way)

-Display the data (in an interesting way)

As the data set had location data and crime information, it seemed natural that an interactive and interesting way would be to put the crimes on a map. This makes the data more visual and visceral, as most people I showed it to wanted to look at their home/ area and explore the crime there, a great way to improve understanding of the work of and encourage support for local police forces.

1. Process Data

I processed the data using SQLite, as it had an import CSV mode which made the first part easy. I made a table with a column for each column in the data then just loaded it in. Had to remove the heading columns from the originals or it would have added those in as values.

2. Setup map and website

Next I needed a map to display the data on. I opted for Google Maps. It is probably the best free map available and has an easy to use API,it is also a website which was a prerequisite for this project. I used some code from CS50, Harvard’s introduction to Computer Science, as the basis for the web server and map setup. It used Flask, a python web framework to serve the map website. The Google Maps API uses javascript to handle most of the setup, which you basically nest in a massive div container that fill up the webpage.

3. Put it together

So now I had a website and a map, just needed to put the two together. I did this using an add marker function I wrote, which is called on page load, it goes through the whole database and uses the LatLong from the data to position a point and reads in a more human-readable location name and  a description of the crime which is assigned to an info window opened on-cllick. 

Originally I tried to group crimes as it was a mass of markers otherwise, this was quite difficult, even thought LSOA_codes in the data grouped nearby instances, I found it hard to update markers, it also didn’t seem as good in the end as it lost the individual touch of how close specific crimes are to points of interest.

Another thing I tried was originally having only 10 random markers load, but I didn’t like this because it didn’t show the extent of the crime and some interesting or relevant points could be missed out.

Changes I would make are add more functionality, I tried to make a toggle markers button but removed it because of the next improvement, slow loading. Another function that might be nice would be search to find your house or something which could then lead to updates if crimes happen nearby. I could also better link up outcome data so you can select a month or go back and look at different times to compare crimes and see outcomes. There is a lot of markers needing to be added and read from a database, clever indexing could improve the database loadout, but there is always going to be some delay to loading the markers so perhaps loading them more sequentially so at least there is something to look at in the meantime.

Finally, although pleased with the overall result, I would like to make this more unique. It is an interesting use of the data, but it has been done before, in fact the police data I got this from map it themselves!

[olliejday-blog]

At this point in the project, I came across a dataset of UK police data, released under the   Open Government Licence v3.0. This really interested me, as I thought it was a large extension of my initial idea to look at bike theft, which could be used in many interesting ways. To relate it to my project I decided to extend to Crime Awareness in general rather that in the specific internet domain.

It is accessible in the form of a csv (like a spreadsheet) or an API which would return JSON via https://data.police.uk/

I opted for the static csv for ease and as this was just a test I didn’t need to update the data regularly with the API. 

It is a really interesting source of information, very recent, I downloaded Jan-Nov 2016, as this was the latest I could go. I even noticed a bike theft in Nov, that may have been my flat-mate’s report to the Police! 

Lots of data is available, in the hope that openness will drive a fairer, better Police force. You can compare different police forces on 101 call response rate, for example. In the downloads you can get, police street crimes, outcomes of ongoing investigations and stop and search data. I mainly focused on street crimes but to extend the project stop and search and diversity data would be interesting.

[olliejday-blog]

Similarly to the Design Out Crime I looked at before, this was an interesting resource to look at how people have responded to using design to raise awareness of quite subtle and possibly complex crime issues, such as ATM and Credit Card theft.

It employs both effective product design to make crime harder, as well as visuals to raise awareness about safety and best practices.

One of the pieces that stuck with me most was the animation about ATM crime, it used lego characters to demonstrate some vulnerabilities when using an ATM. I thought this worked well to help give me ideas regarding my internet safety project. Both ATMs and the internet are complex machines under the hood, which are well designed for simple use, but do have vulnerabilities if used poorly, ideas of clarifying ideas and threats in this animation were very useful in shaping my response to cyber security and safety, and how I could show this to make the risks and solutions clear and simple.

[olliejday-blog]

Based on the research, I did a pencil sketch mapping the network of different parts of the internet. The internet is a huge and complex system, so I focused on  fundamental parts and generalized the way in which requests and responses are handled across uses: logins, searches etc.

I focused on more basic workings such as HTTP and HTTPS but not SMTP or FTP. I also used ideas related mostly to GET and POST requests.

My sketch made it clearer the areas of vulnerability as well as the working of the internet. In order to use it for web or graphics more generally, I made it up again in illustrator, using vector image icons for phones, computers, servers and hackers. This looked quite clean and showed simply the idea of how packages are moved around the internet.

As will always happen with a simplification, information is lost. I think for a final design I would need clickable areas that provide more information as it is not clear and does not help give an understanding for the actual details of the parts here more just an overview of the whole.

[olliejday-blog]

Based on my idea of Internet security and privacy, I did some research. I started with academic research papers, finding statistics about people’s concerns and understanding of the internet. I then went deeper into concepts and models of the different systems of the internet. I found these protocols and concepts seemed quite abstract when explained in a list of text like that, so I started to visualize networks of servers and computers and demonstrate where the different parts of the internet come into play. I also thought about areas of vulnerability, such as how passwords are encrypted and hashed so they are stored safely. I listed some of the different hacks and attacks that someone could use such as SQL injection and brute force attacks. I thought these would give people an idea about how to better protect themselves and add credibility to practical steps such as use different passwords and use longer passwords, with different character sets.

All this research really helped me get a good understanding of the concepts and safety concerns regarding the internet. I now needed to look at ways to represent this information in an accessible way.

[olliejday-blog]

Mainly talks about, designing products to protect against crime.

Also talks about awareness schemes such as Neighbourhood Watch.

Poster campaigns to deter shoplifters.

Example: Residential Bike Theft

-  2/3 of all bicycles stolen in the UK are taken from people’s homes 

-  17% of cyclists experience bicycle theft. 

         Of these, 24% stop cycling altogether and 66% cycle less often 

- £300 Average price paid for an adult bike. 

- 4 million bicycles sold in the UK in 2010 

- £2.1bn UK market for bicycles and cycling goods. It is expected to pass £3bn by 2015

As a result of this research into one of the areas of my brainstorm (see sketchbook), I felt bike crime was a pertinent issue. It was also personally interesting because there is substantial bike theft from the flats in which I am staying and they have put the responsibility on bike users. The CCTV and Police intervention does not seem to help and whole bikes as well as wheels are taken with the locks cut. I thought a website could be a great way to help the local Police initiatives to raise awareness about care and safety with bikes. It could also help to group cases and find trends that may help lead to new ideas and leads.

However, talking to Mrs. Pugh, it was mentioned that perhaps it was not enough of a major issue. So I though some more, and decided maybe more internet privacy and security would be a more important topic of focus.

[olliejday-blog]

MEDIUM IS THE MESSAGE

[olliejday-blog]

Book Project Evaluation

Lord of the Flies was quite an immediate choice for me when doing a book cover based on a piece of literature. I had studied it at GCSE, so had a good understanding of the work. Furthermore, when he wrote the book, Golding taught at the secondary school that I went to, so I think the parallel of the characters in the book and schoolboys is one which I can relate to. 

Starting with contextual research, I studied elements of the plot, themes, characters and symbols in the novel, which I could return to for inspiration later. Bringing the research to the visual elements, I explored past book covers for LotF. I gathered a large amount of source material from various editions of the book’s print and compared the recurring elements. I found lots of use of greens and natural elements contrasting darker imagery of boars and tribesmen in blacks and reds.

I also found old book covers in, of ‘Alice in Wonderland’ and ‘John Halifax, Gentleman’, which had a nice floral cover and print/etching style respectively.

Using the parts of my research, I did some quick sketches with a graphics tablet. These focused on symbols relating to the novel itself as well as the covers I had seen: Piggy’s spectacles, flies, an island, fire, conch shell and a scar.

O’Reilly books use animal etchings to make their covers more visually appealing as technology books could be quite dry and boring. I liked this idea, and although LotF has a rich visual language, I thought this would be a good starting point. I looked at lots of O’Reilly imagery, and then tried to make an etching style image of a boar. I started using colour halftone on Ps and image trace on Ai to try and achieve this but it was quite a superficial effect. Instead I opted to use the graphics tablet and draw a line image of the boar in the etching/ print style. I then used this and a synopsis from GoodReads to create a full cover. I used a turquoise/ blue/ green colour and a full O’Reilly publishing format to make a full cover. Printing it out, this first cover works well as a template and printed on a book fold card cover. The main change I would have with this, is that it may look too “clean” and formal. The book has quite a rough edge in the chaos, so I think this may not show as well here. Also the colour is not linked to any I found from the LotF books, so perhaps a more red colour would suit.

This boar imagery reminded me of cave paintings so I looked at the Chauvet cave in France, some of the oldest and best preserved prehistoric art. I liked the charcoal and chalk style and thought this would work well as part of a cover based on the tribal/primitive aspect of LotF. I also looked at Aboriginal Bark painting as these are very symbolic and meaningful works which would relate to the symbolic importance of the boars and themes in the book. 

Based on this research, I used a cave texture and charcoal brush to make a digital cave painting style. I thought I would need to use digital techniques to make the book in the end for a professional look so I went straight to the graphics tablet rather than starting with physical chalk or charcoal. 

I then used these images of boars to create a second cover design. I like this one, I think it works well and I will develop it for further designs. The only problem is when printed, the texture looks quite pixelated and the browns have come out quite green, apart from this it works well as a physical book cover. I like the chalky font of the blurb, “Eraser”, and the author and title are my one written lettering.

Moving on from the prehistoric and tribal art, I looked at African art and its influence on Cubism, in particular Picasso. I explore the links and some specific works from Picasso’s African period, including the iconic “Les Demoiselles d’Avignon”. Based on these I did sketches of figures on a graphics tablet in the Cubist style. I liked the more modern aspect these have whilst retaining the instinctive expression.

I made a third cover, with Cubist influence, based with a similar format to the O’Reilly books, but using more of a red and black colour as I thought this suited better. I still think the formal style is ill suited to the content of the book, and I think the modern feel of the Cubist drawings is perhaps a bit out of place too?

Overall, I liked the second book cover best, so working off of this and the strong parts of the other designs, I came to a series of final covers which I think work well to show the book and appeal to the potential buyer.

[olliejday-blog]

I really liked the cave painting style, and I felt the texture worked better than just the colour gradient. However, the precise cave texture that I was using from the internet was printing out a bit green, and pixelated. So I vectorised it in Illustrator for a cleaner print and played around with the imagery. I also tried different mixes of images.

Inspired by my latest (red and black) cover, I manipulated some of the colours and included some Cubist style imagery.

Note: I just realised that I spent the name slightly wrong in all my covers, adding  a “u”, it should be “Golding” not “Goulding”!

How do the colours work together?

Does mono/a-chromatic highlight the oranges too much?

How do the elements play off of each other? One or a group?

[olliejday-blog]

THIRD BOOK COVER

- Included picture of author

- Used the Cubist and tribal images

- Colour scheme based on example book research (reds and blacks)

- Each object is symbolic in work (some are edited version of symbol research imagery I made before)

Does this simple design suit the target feel?

Do the clean lines and text match the chalky, primitive brushes and title?

Picture and bar code work well.

[olliejday-blog]

Based on this I did some sketches copying Picasso works and then applied them to make my own tribal figures based on characters of the books (eg. “Piggy”)

Are the figures too “arty”? Too modern?

Do the more simplistic sketchy figures seem too rushed? 

Is it professional enough?

Do they all relate to the story and style of novel?

[olliejday-blog]