Website Analysis: Hailey Winstone Illustration

As part of course requirements to employ the use of social media toward stimulating discussion around relevant topics pertaining to information architecture, my classmate, Wayne Stainrook shared this tweet:

The website belongs to Hailey Winstone Illustration.

Upon clicking the link, I am greeted by the site’s visually-centered homepage. In the background, I see a sample of the illustrator’s work which appears as a faded-watermark. At a glance, the artwork embodies a metaphor that represents elements of the internal (a human brain and eye–thus creativity) and the external (a planet and surrounding outer-space–our world). An affordance of the way the illustrator features her work here is that it draws me in, yet it is not distracting; I also find it meaningful in multiple ways. The navigational interface is placed directly at the center of the screen; it reads concisely with the logo at the top (whose typeface has a customized feel) and directly below are two content boxes which mirror each other in design. The navigation option on the left dares the user: ‘crazy version’ here (enlarged) and just below (in smaller typeface), ‘if you & your machine can handle it…’ the option to the right accommodates: ‘lazy version’ here… for slower computers and connections.’The homepage emotes an interesting sense duality–as its aesthetic is of a bizarre, whimsical nature, juxtaposed by a navigational interface that conveys acuteness in its attention to precision. A win, in terms of design, is that the image and the text do not compete with each other–instead they work to complement the work as a whole.

As author, illustrator and scholar, Edward Tufte asserts, in Beautiful Evidence, most techniques for displaying evidence are inherently multimodal, bringing verbal, visual, and quantitative elements together (83). All components are treated as ‘colleagues in explanation.’

Additionally, I find the initial options to be constructed in such a way that I am directed with visual ease to the offerings. In terms of an effective visual representation, or mapping of the information, the designer maximized the use of color and typography in a way that serves to embody a sense of graphic consistency, yet adds a layer of interest. Specifically, through use of a single color (white) for navigation, the text is crisply highlighted and flows in smooth contrast with the background image. The text (again, all white) is featured in two typefaces–the logo is highly stylized but balanced by navigational text in a classical, yet stylized serif typeface.

So far, so good. I decide to enter the site choosing the ‘crazy version’ option. What happens next is that the background image transforms into a full-color image, (as opposed to the very faded version on the homepage) and as I scroll over the image I discover that the drawing has become interactive. Although not all ‘interactive parts’ of the artwork function as navigation, I enjoy it as an ‘ imaginative experience of discovery,’ and feel that the designer’s intent is to provide an interactive experience for the user, where anything can happen–as there certainly seems to be a sense of the ‘unexpected.’ The user interaction that occurs on this level also serves to reinforce the brand and identity of Hailey Winstone. As I scroll over ‘the eye,’ white ‘click to enter‘ text appears; the eye then looks to the left at a menu offering links for: Paintings, Pen & Ink, Portraits, and Other. Each link (text) is accompanied by a white, graphic (image) that is iconic of what it represents–for example, a classical-looking paint brush graphic is paired with the Paintings link. Thus, the result is quality of resonance as the text and image complement and reinforce one another.

I venture into the Paintings section of the site; there appear 3 rows, each containing 5 thumbnail scroll-shaped images. The first row and (majority) of the second contain illustrations for the book, Mother Holle, by the Brothers Grimm. As you scroll over each thumbnail image, a small bit of descriptive text appears above it. As Tufte asserts, nearly always, the words closely follow the images–and the images closely follow the words…(90).

A strong, consistent theme that the designer employs is the accompaniment of  text to bring specificity, context, and definition to the image-based content. This serves to connect the illustrative subject matter with a specific literary genre–thus giving the illustrations a sense of credibility by connecting them with their market niche. On the bottom row, I thought the relationship between the image and supporting text was of particular interest; the thumbnail depicts a close-up portion of a human face–with fangs. The illustration category is: Christmas Cards, with the description: a Christmas card featuring a scary Santa, and finally the caption: He’s coming for you. As a point of visual connection and associative meaning-making, just left of this image is a thumbnail featuring a classic-looking Santa–therefore, you can form a fairly accurate educated guess as to what the ‘scary Santa’ image is–without actually scrolling it to reveal the supporting text. In sum, I feel that the informational ‘mapping’ of this site exemplifies Tufte’s theory that, mappings help tell why the image matters (45).

Categories: #IAMondays | Tags: , , , , , , , , , , | 3 Comments

Post navigation

3 thoughts on “Website Analysis: Hailey Winstone Illustration

  1. What I found most effective was how the icons “inside the eye” were informative in multiple ways. First they have an image on each button that shows a thumbnail of what the picture itself looks like. Second, the buttons raise up and brighten when you mouse-over them. Third, the title and a short description of the image appear above the icons, letting you know in more detail what you’ll see when you click on it. The combination of words and images is extremely useful; sometimes I find other sites rely too heavily on one or the other. For example, I recently downloaded the app for my smartphone, and the “Add new post” button had no words at all. It only had an image of a pushpin. I had to stop and think about it to figure out if that was the correct button. If a website or app needs you to stop and think in order to figure out how to navigate it, something is wrong. This site is much more intuitive and never got me lost.

  2. I think this website is a great example of exciting web design. The design is deceptively simple, the navigation is simple. But compared to the other website we looked at, we can see how fresh this one is. In web design, we should collude simple with boring. There is a lot going on in the background of the site, but I think it is more visually appealing than anything. I’m intrigued by the site, even if it does “appear” busy. I want to explore the site. This isn’t something I felt with the last site discussed on the blog. Finding the navigation, and the different clickable animations make the experience more participatory.

  3. Devon

    I am on the fence as to whether I find this design simple. I think the idea behind the design is simple–images as metaphorical representations that are clickable and linked to things like portfolios, images, etc. I am admittedly being critical, or playing devil’s advocate, because I think the artwork and metaphorical representations are not straightforward enough, though. The homepage is busy. There is a lot going on and I am immediately distracted by the artwork, the little houses, the strange swirling nebulae behind the center image. The design is a bit creepy and a bit uninviting. (Remember, devil’s advocate here). Were I am fan of Winston, or were I researching her work, this might be a perfect example of her style of art. But I am just someone browsing the internet. The idea of clicking on an eyeball is not exactly enticing. I want to know why all of this art is growing out in a tumor-like fashion, but I don’t want to know enough to keep browsing. I also think the thumbnails are a bit too small. Lastly, what really strikes me is how this would be translated to a web-reader for people who are visually impaired. I guess it would read the “lazy version” because it is simpler, but would it all translate well, or would it end up being a mess? –These are the things I thought of when trying to see it from a different side. Truthfully I think this website is fun, albeit a bit creepy.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: