ANALYSIS OF A WEBSITE
Task: Examine and define the flow of any chosen website, and any tools in its interface. Reveal 'complexity in simplicity' or 'simplicity in complexity'.
FLOW
The site that I chose was doodl.es, an interactive web gallery displaying various pieces of code-generated art by different artists.
Codedoodl.es landing screen.
After examining the website itself, I created a map of the 'flow' of the website, meaning how the user will travel between pages on the site.
Though it seems quite complex, it is quite simple in reality, as often different links will lead to the same page. Navigation needs no knowledge at all on GUI as links are often presented as text rather than simple, so what you see is what you get: there is simplicity in complexity in this aspect.
Mapped out flow.
TOOLS
The circle icons on the landing page are an type of preview for each specific work they represent. Hovering over any one of the circles will generate an animation that changes shape and colour.
Hovering over circular icons.
With this action, the text underneath also shifts. When the user actually clicks the circular icons, it will link to the page where the piece is displayed.
This rotates on its own, without user interaction, but the user can click and drag to move it around and get a 360° view.
As one can see on the sides of the screen, there is text: 'codedoodl.es' which links to the homepage, 'close' which also links to the homepage, and 'info' which links to a page with information on the piece and the artist. Simply hovering on the text will display an animation with a shifting effectct. The arrow links to the next artwork in the collection.
When looking at the mobile version of this site, one can see that the layout is similar, but simplified to fit the smaller screen.
Homepage on a mobile device.
Diagram of main differences in layout between desktop and mobile display.
REFERENCES
codedoodl.es, n.d. codedoodl.es. [online] Available at: http://codedoodl.es/ [Accessed 8 March 2016].