Research - Wireframes and visual styles - Sofiia Kasimova

 

“Our Childhoods Shaped By Culture”: wireframes and visual styles

What I worked on

As the UI designer on team JAYS, I turned our research into screens for the project. The designs draw on research from the whole team, with the visual direction mainly based on Arianna’s design work.

The idea

A digital scrapbook of childhood memories. People share a photo and a short story about growing up in their culture, and visitors can browse the stories like pages in a family album.

Step 1: Wireframes

I started with low-fidelity desktop wireframes at 1440 × 900. That let me focus on the layout before thinking about colours or decoration. I made seven screens:

  1. Cover: the album’s front page, with an “Open the album” button.
  2. Contents: browse stories by era, such as the 1990s or 2010s, or by category, like food, celebrations, games, family traditions, and cartoons.
  3. Scrapbook spread: the main screen, with a taped photo on one side and the story on the other. Arrows let you turn the pages.
  4. Single story: a larger view of one story, with an audio player and transcript.
  5. Add your story: a form for uploading a photo and answering a few questions about childhood.
  6. About: an introduction to the project and the people behind it.
  7. Your page has been added: a thank-you screen showing a preview of the new page.








I added notes under each screen to explain how it works. For example, clicking the photo opens the full story, while the arrows turn the pages with a short animation.

A few choices I made along the way:

  • I used a handwritten font for headings, but kept the story text in a clear, easy-to-read font.
  • I included a Reduce motion option so people can turn off the page-turning animation.
  • Every voice recording has a transcript, so the stories are still accessible without sound.

Step 2: Exploring visual styles

Once the layouts were in place, I explored three different visual styles. For each one, I created a style tile with colours and fonts, along with a cover and scrapbook spread.

  • A — Old family album: warm beige and brown, paper textures, and taped photos. It feels calm and nostalgic.
  • B — 90s Kodak scrapbook: a teal background, cream pages, red and yellow accents, and paper clips. It feels brighter and more playful.
  • C — School notebook: lined paper, a pushpin, and blue and red details inspired by school pens. It feels like a child’s diary.


Old family album




90s Kodak scrapbook





School notebook





I also gathered decorative details like tape, clips, stickers, and handwritten fonts to help make the album feel personal.




What I learned

  • Starting with wireframes saved time because I could settle the layout before working on the visual style.
  • The same layout can feel completely different depending on the design. One version feels like a family album; another feels like a teenage scrapbook.
  • Decoration works best around the edges. Keeping the stories clear and readable matters most.

What comes next

We’ll choose a direction as a team. Then I’ll design the remaining screens in that style and test them with users.


Comments

Post a Comment

Popular posts from this blog

Visual Moodboard - Arianna

Image
  This is a very condensed moodboard for the visual approach we are going for. The main visual aspect of this project would be a collection of peoples childhood photographs to set the scene/mood. We are also thinking of adding some doodles and handwritten text as seen in some of the examples above. We feel as though this would help create a humble, authentic feel as things online could often feel distant to people.  The main feelings we are aiming to portray are nostalgia, warmth, and familiarity. Fonts We are thinking of using handwritten fonts, to create a 'homey' feel as though you are looking through an album. The main concern is finding a font that is legible for everyone. We will test this out, however if we find that a lot of people are struggling to read the font we will replace the "body" font for a standard font and only keep the title fonts as more personalised ones. 
Read more

Website Research (week 1) - Johan De Wouters Doplinter

Image
 Wired.com I found the design of this website to be very intrusive and a little overwhelming. It has the same style as a newspaper but with more clickbait headlines. T3.com I like how a new main post is shown on the home page without any other side stories covering the sides of the page. Techcentral.ie This website showcases the typical news website style in an early 2010s style which plays to its strengths. technologyreview.com I loved the collour palette of this website and the layout of stories and headlines is less intrusive, with the main story having a bigger panel on the left side with 3 smaller stories on the right. I found Kickstarter.com to be a very interesting website to study. On your very first click onto the website, you are immediately shown different kickstarters without even having to search. First Visit: The design places the projects in center view, which could be considered quite intrusive to some users. The amount of information on the home page is quite overw...
Read more

Feedback from presentation - Arianna

 Main Issues - Do not use templates or icons - as they make presentation look unprofessional Use a plain white background to not take away from point of the information Don’t overload slides with text - use bullet points and minimal information on one side Use simple/default fonts and big font text for readability Images should relate to the information presented on the slides  
Read more