Curated micro-site
By: Andreea N
Tags: Bootcamp, Events, Ironhack, UI Design, UX Design

All of them have clean, minimalistic feel and clear branding, delivering their message to the targeted audience. Their visuals are mostly monochrome. The accent color is mainly used to underline specific features. Photos are displayed on a black background to create focal points.

Having this in mind I’ve looked into the past visual communication of the targeted festival and realized that there is inconsistency and an outdated fell regarding the visuals and branding till 2018 when they started to work with a professional. At this point, I decided to integrate the used Font type- Mono Poster to create consistency in the design.

How? How to promote the event in the language of the users?

Having in mind the year theme — Universal Shakespeare- I choose for the branding attributes the following: Dynamic, Original, Friendly, Exciting and Cool. Next step, the Moodboard. I always found Moodboards a great exploratory research tool used to collect and present ideas at the beginning of any type of design project.

Once the Moodboard was done the visual direction was set I wanted to make the concept clear. Understanding the subject is the key to find the right concept. So how to deliver the message of the event and how to integrate visuals to help with:

Deliver the essential information more directly.

Use an attention-grabbing and more engaging visual element.

Create a lasting impact on the audience.

It was clear that I was going towards a minimalistic direction, choosing to break up pages into clearly defined areas- using black and white areas. The use of colors was only to integrate the thematic graphics or for the micro-interaction. Defining the areas I chose to play with shapes that are mostly used to organize, connect or separate elements and content.

Shapes are among those fundamental components besides colors that have a huge magnitude for grabbing the attention of the audience and also have the prowess to create an emotional effect on the audience.

What? What is the product? What are the stages of the test results?

It was time to work on the structure of the website and do the paper prototype so I could test my ideas and the usability before going to hi-fi. I wanted to keep it as simple as possible and integrate micro-interactions, knowing that these really small moments make a big difference in the way you experience a product.

Moving on to hi-fi I discovered the many options and directions that a minimalistic design can guide you to.

For the main page, I chose to create an organic or biomorphic form that is random and flowing. The function of this shape was to create an effect on the festival’s logo and to build an outstanding impression on the audience. After creating a focal point with this animation, the main challenge was in using the “white space”, to maintain an optimal level of it in the design composition and to create a balance to boost not only UI but also UX of the page. Meaning that I wanted the content in the design to be easily scannable and legible and to help to guide the users through the page and prioritize the focus area.

So here is the result-the video of the desktop prototype:

Given task:

Check events on 3th of May

Select The Tiger Lillies Play and see it’s location

Add a ticket to cart

Delete ticket from cart

After completing the prototype I did the style guide for the web-developers handover…I would have needed more time with this one but this is how a couple of hours of work looks like: