Close
Type at least 1 character to search
Back to top
[movedo_title heading_tag=”h1″ heading=”h1″ el_class=”project-title”]

Faces, what do they do?

[/movedo_title]

[movedo_single_image image=”1225″]
[movedo_empty_space]
[movedo_empty_space][movedo_title heading_tag=”h2″ heading=”h2″]The challenge.[/movedo_title][movedo_empty_space]

In this project, we curated a collection of thematic images, videos, sounds and gifs that conveyed a humorous or a satirical concept. We were encouraged to think of ourselves as artists, curators and web designer for a digital exhibition. Let me tell you how it started.

[movedo_empty_space]
[movedo_empty_space height_multiplier=”3x”][movedo_title heading_tag=”h2″ heading=”h1″]Playing by the rules.[/movedo_title][movedo_empty_space]

The content had to include self-created work and gathered content found online, and had to live on a Cargo website. The final collection/website also had to feature:

  • A narrative sequence
  • Multiple pages
  • Hyperlinks used in and across pages
  • Minimum 20 assets in the collection (mixture of images, sounds, gifs and videos)
[movedo_title heading_tag=”h2″ heading=”h1″]

Coming up with a concept.

[/movedo_title][movedo_empty_space]

My initial concept was personal growth and the different forms it can take. I envisioned humorous, relatable content illustrating what one might feel across these different forms, along with short, uplifting and inspiring bits. I aimed for it to be a positive companion for whoever is conscious or curious about their personal growth process. One they’d feel seen, heard, accompanied, and uplifted in. I intended to enforce cohesion using tone, a consistent message (yes to realness, no to negative dwellings), and visual harmony.

I planned it to be a collaborative, visual collection of the forms personal growth can take (e.g. trusting, accepting, loving). Each “form” would constitute a “feed” of relevant graphics.

Our first critique made me think reconsider this first choice: it might be tricky to make it feel humorous and light-hearted. So I decided to pick a new, simple, versatile concept: faces.

[movedo_single_image image=”1424″]
[movedo_title heading_tag=”h2″ heading=”h2″]

Pivoting on my concept.

[/movedo_title][movedo_empty_space]

[movedo_empty_space]

In this second phase, we had to be able to show a working draft website to be critiqued for feedback. At that point, all content (images, videos, gifs, sounds) was to be gathered and ready to share in class.

I had been collecting lots of content, and my initial website draft felt like an Ali-baba cavern – no particular logic as to the order the content was displayed. During critique, I was advised to build more of a narrative in my website structure and in the way the pieces of content related to each other.

[movedo_single_image image=”1423″]
[movedo_single_image image=”1422″]

This quest for a “story” got me thinking about what we use our faces for. I did a brain-dump of my initial ideas (e.g. smiling, talking, recognizing, etc.), and what the content I had gathered made me think of.

I then grouped them in categories. I came up with four key things that faces do: connect, express, interact, and identify. I decided to make a page for each and make that sub-theme reflect in both the content, but also the way you navigate through the page.

Below are early mocks of how I planned to structure the website around these things faces do (homepage and category page).

[movedo_single_image image=”1416″]
[movedo_single_image image=”1417″]
[movedo_title heading_tag=”h2″ heading=”h2″]

Delivering the final website.

[/movedo_title][movedo_empty_space]

At this point, the final website was due. I created an about page to explain the concept of the website without shoving it in a viewer’s face right from the get-go. I refined my key pages, especially the way they were structured. I opted for:

[movedo_empty_space]
  • Linking the content in “connect” by a visual thread and a basic, playful storyline using copy
  • Making the “express” page super bright
  • Having interactive elements in “interact” (e.g. different versions of a similar image in an interactive slider)
  • Having “identify” as a page where you view a selection of faces (real or fictitious, uniquely recognizable or conveying universally applicable concept) one-by-one, same as when you’re visually identifying someone

Below are snippets of the final look and feel. The live website is available here.

[movedo_single_image image=”1418″]
[movedo_single_image image=”1420″]
[movedo_single_image image=”1419″]
[movedo_title heading_tag=”h2″ heading=”h1″ el_class=”next-project”]

Next project Volunteering doesn’t have to be one-size-fits-all

[/movedo_title]