➝Designing

Megan&Kimmy : 10 sketches

IDEA: don't make it too complicated for yourself, choose a section of "gender, lgbti+, body, " from artoffice and design an interface to navigate through this part of the collection

OR pick and create a small collection out of works of the artists in these categories

10 sketches

overal visual mood board and colour palettes

visual keys:
- contrasting and slightly desaturated colours
- riso print
- handcrafted feel
- almost comic book vibe (for leaflet)
- overlays

visual keys (leaflet):
- almost like a zine vibe (visuals: scanned, handwritten)
- overlays!
- polaroids!

visual keys (website):
- photos one after another, tile structure
- overlays
- different typefaces mixed

perhaps NOT all?

click me !

1st concept sketch (leaflet)

Typography excercise:
- choosing typefaces & fonts
- refining colour palettes + trying out colour combos
- mirrored excercise

l
l
l
l
l
l
l
l
l

sketches of the website,
features, placement,
elements

1st prototype

2nd prototype - ready to send to test users

slide

slide

slide

slide

slide

slide

l
l
l
l
l
l
l
l
l
l
l
l
l
l

l
l

"X" - previous page

time to test !

contains:
- intro & project description
- link to the adobe xd prototype
- 6 questions (yes-no, scale and written answer)

#1

#2

round 1

round 2

problems with smoothness, sliding not working properly

"?" button on the homepage not communicating well enough, mistaken for "help" option

ver.1

ver.1

ver.1

resize the text on home page, so it fits better

+ gallery view resized

#5

ver.3

round 3

ver.2

ver.3

< didn't notice the "about" button

ver.4

overall user count: 2

overall user count: 4

overall user count: 5

overall user count: 8

#6

ver.4

#7

ver.4

round 4

< problems with readibility ; fixed (drop down menu)

< comment section added

users #6 & #8 didnt click the "about" button

user #7 struggled with the sliding

ver.4

#8

STEP 1: SKETCHING OUT IDEAS

HOW? : create a leaflet with a QR code, which will take you to a showcase/exhibition website (content: works of Aubane Berthomme Martinez)

choice of dominant colours - reds and pinks are associated with eroticism, I want them to be leading colours of the interface, but with a more subtle feel (desaturated colours)

choice of visual keys ; handcrafted, zine, polaroid - during the research phase my group found out, that polaroids were a popular way to take erotic pictures, they have a secretive, intimate and rebellious feel to them. I also thought about zines and handcrafted feel in relation to that.

testing the colour pallette, overall aesthetics etc., to see if I like it

I've decided to scrap the leaflet idea, and to create a standalone exhibition website

mapping of the (desired) user experience of the 2nd prototype (sent to users)

STEP 2: MOODBOARDING AND REFINING THE CONCEPT

STEP 3: CHOOSING FONTS, EXACT COLOUR PALETTES ETC.

excel sheet updated after every round

choice of visuals: I want the website to be an exhibition, and I like the tile structure of the websites I showed here (the works chosen by me would be stacked one next to another)

________________________________________________________________________________________________________________________________________________________________________

________________________________________________________________________________________________________________________________________________________________________

________________________________________________________________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________

the end of user testings

HOME PAGE

border

final design !

before adding the "spiced up" mode, the website lacked some character and something that would indicate that it's for my user group - the dominatrix and fetish community

Added improvements (after user testing and feedbacks):

- added a start-end date of the exhibition - indicating that this website could change after time, to host other artists' collections

- sliding gallery improved, smooth sliding

- colours in "toned down" version corrected (unreadable text > standing out from the background, )

- artist's name written with capital letters on home page (wasn't clear that it's a name when it was written without them)

- comment section sized down, changed layout

- artworks on the main page sized up

- ability to zoom in on the artworks in the "gallery view" tab

-

Final Interface clickthrough (how it looks like on a mobile phone) :

DARK MODE / "SPICED UP"

breakdown of some visual elements of dark mode:

neon signs - associated with the nightlife culture

latex texture - associated with dominatrix

darker colour scheme, to fit the overall mood of the dark mode

some easter eggs

the icon of switching modes is a whip

the artworks look like polaroids - link to research, polaroids having an intimate and erotic feel

Detailed description of the interface: