An Apple iMac computer displaying a colorful conference program with a purple to orange gradient background and black text.

Theorizing The Web

A landing page/poster for an event.

RESPONSIBILITIES

Front-end design

UX Design

ROLE

UX Designer

Theorizing The Web

A landing page/poster for an event.

Team:

Solo

Role:

Front-end design, UX design, visual design, web design, content design

Software:

HTML, CSS, JS, Adobe XD

Duration:

1 week

Project Brief

Design and code a landing page for an announcement of an event.

Before creating the landing page, I designed a custom typeface in CSS for the poster. And then proceeded to create the landing page.

 

Research/ Context

Primary target users - people who are scholars, journalists, artists, activists, and technology practitioners to think conceptually and critically about the interrelationships between the web and society.

Goals

The goal was to portray the message in a manner that was visually appealing as well as easy to read and navigate.

  1. Intrigue- draws the user in.

  2. Answer these questions clearly:

    1. what is the page for? what is the event about?

    2. when is the event?

    3. where does it take place?

    4. why should I care?

  3. clear hierarchy to separate content.

Typeface

👉🏽 View Typeface

Inspiration

After looking through various mood boards and spending an obscene amount of time on Pinterest- the images I was drawn to the juxtaposition of geometric lines created between shapes and forms especially within fonts.

Mood Board

Rough Sketches of my ideas:

Process

Landing Page

To reach the goals I posed at the beginning, I wanted to create a distinct hierarchy and organize the content clearly in the design.

Inspiration

I browsed through artwork and typographic posters for inspiration. The first thing that drew my eyes was an image with bright oranges and pinks- I was inspired by the retro 90’s era for the colour scheme which I thought would tie well with the content of the event.

Mood Board

A collage of images with a retro, vaporwave aesthetic. Contains digital art of a sun setting over animated water, a person standing in a cave opening with a colorful sky, a poster with abstract shapes and text, vintage computer monitors with colorful visual effects, a soda can with a pixelated window saying "Start", and a person typing on a keyboard with a screen that reads "Connecting to the Internet".

Process

Conference program for 'Theorizing the Web 2018', held April 27-28 at the Museum of the Moving Image in Astoria, Queens, with vibrant digital art graphics and detailed schedule information.

Initially, I was going to place all the content on one page - but as I grouped the content together, I realized it would be too crowded.

so I referred back to my goals and organized the content in a way that clearly answered the questions I posed at the beginning.

Intrigue- draws the user in.

  1. Answer these questions clearly:

    1. what is the page for? what is the event about?

    2. when is the event?

    3. where does it take place?

    4. why should I care?

  2. clear hierarchy to separate content.

Close-up of an art exhibition flyer displaying the title 'THE IMAGE' in stylized text, with event dates April 27-28, 2018, and location at the Museum of the Moving Image in Astoria, Queens.
Conference schedule for Friday, April 27, with sessions in different studios, including details about speakers, topics, and timing, on a white background with red grid lines and black text.

The left vertical heading is an overarching heading framing the two respective pages, while the hierarchy within through text sizing and colour also creates additional grouping.

Finished product

A sleek Apple iMac computer displaying a colorful conference poster with event details and session information on the screen.
Screen Shot 2021-09-10 at 11.56.18 AM.png
Screen Shot 2021-09-10 at 11.56.58 AM.png

Reflection

Overall, I learned an immense amount throughout this project. I found it rigorous due to the time frame but it was a fun challenge.

Coding the project gave me further perspective on how the design process works in tandem with the development. Having this knowledge gives me insight into the limitations and time constraints of working with code.

What would I do differently?

Due to time constraints, I didn't get a chance to conduct a lot of research. If I were to go back, I would do more user research.

Previous: Consumer Protection of Ontario