Development 5
- Aria article
> background
> animations + interactions
- main page layout development
- Mia article
ARIA ARTICLE
> Too many elements moving together
> Spent time cutting out the messages with the background and same with pink aria images though, so should use these with additional interactive elements
> Thought about the hover interaction used on Ell's page
> Make pink aria pictures appear if you hover over another image or symbol? eg. finger up pixel cursor art used in aria collage experiments
> Makes more sense to have the messages as hover elements, as the pink aria images create an important visual and if they were not present most of the time until the user interacted with them this would reduce the level of interest in the overall imagery
> Typing message symbol can be used for hover element instead for the story
> This way the user is following the story bit by bit, helping readability
> Also makes them feel like they're in this convo and aria is messaging them as they interact with the typing message symbol
> Typing message symbol hover interaction works well with story messages one by one
> Idea of making a gallery of aria collage experiments for user to interact with could be made in different ways
> Liked this idea of creating a stack of images the user themselves can move around and play with, but what is the purpose? What is it communicating?
> Could use this function for another purpose later on, makes more sense for this section to either use a like button for the user to feel like their on aria's Instagram, link to social media digital presentation, or for a simple gallery slide left and right
> Or what if the user places the images beside a scale of hot or not? Swiping like on a dating app?
> Background so large of aria's face feels like a boring iphone picture, add noise to make it more visually cohesive
> Replaced 'moving of images around by user' with more simple 'gallery of images', as previously planned when designing aria's article
> Rather than 2D box gallery this 3D version creates dimension and a more interesting journey towards interaction with it for the user, rather than just clicking arrows
> It also has movement similar to swiping alike to dating apps, which is relevant to the overall aesthetic of the website
> 'Click Here' Cursor symbol placed on images either side of main picture in view to help the user recognise the possibility for interaction
> This wix gallery format however is created for landscape images, and so I added the function to be able to see the images full screen when you click on it
> Additional animated text encouraging user to click images also ensures they see the full designs
> More animated elements needed and pull quotes
> Rose motif within collage experiments taken to use rose gifs as a way of reiterating sense of romance
> Pixel rose gif presenting digital/online romance, while wilting rose at the end reflecting the end of the relationship
> Pull quotes made to be bright green and pink to be legible above the detailed background image, and as a playful impactful tone
> 3D text even more impactful final message to user from story
PEER FEEDBACK + USER INTERACTING TESTING
> As with Ell's article, I had Leon go through the page to see how he with fresh eyes interacted with the page
> This showed what interactive elements were successful, in terms of the user knowing to interact and it working as intended
> Elements which he didn't engage in meant I needed to sign post it more to encourage interaction
> This included the typing bubbles with hover to show the chunks of story in message bubbles
> Typing bubbles don't feel interactive because they look so normal alongside the static emojis placed throughout the site page
> They could have colour to make them feel more unique and something to interact with?
> Or a mouse cursor to show they should click there
Additional Ideas
> Add a name title?
> Is it legible enough as distorted type and thin on such a detailed background?
> Peer Feedback says its successful
> Could I utilise animation more as a way to present the title?
> Sliding in of closing and distance from edges of the screen to present the 'closing of distance'
> Consistent use of pink and green for pop of colours
> 3D text bringing in dimension for a sense of 'romantic sexual space'
> Overall aesthetic is very successful and relevant general direction with fun, playful and experimental collage and visuals
> Balance between animated visuals, interactive elements and still impactful visuals
> Still very much a visual story as well as a story presented through literal text
> Sense of chaotic nature is presented between the interaction between the background visuals and foreground visuals, but viewer is still guided through interactivity with pixel cursor wayfinding
Peer Feedback
> Plays with layering and dimension
> Digital collage in an interesting way
> Interactive piece of collage
> Experimental with digital and romance visual language
> Feels personal and almost like you're in someone's phone/life
Further Experiments For Joely Article
TO DO
> More Articles (design and transferring onto website)
1 Mia
2 Joely

























Comments
Post a Comment