Day 4 of 30 Day UI/UX Design Challenge: Medieval Artistry ๐Ÿ‘จ๐Ÿปโ€๐ŸŽจ

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share

๐ŸŽจ Today’s design task

I was so excited about today’s task that I even dreamed about it last night! ๐Ÿ˜‚ Today, I’m building on yesterday’s wireframe by designing the Portfolio Gallery section for Andreas Maler, capturing his unique art style and the game’s aesthetic.

Design the Portfolio Gallery section from your wireframe, capturing the essence of Andreas Maler’s art style and the game’s aesthetic:

  1. Design a way to display 6-8 artwork thumbnails
  2. Create a detailed view for one selected artwork, including:
    โ–ช Larger image of the artwork
    โ–ช Title of the piece
    โ–ช Year created
    โ–ช Medium used
    โ–ช Brief description or artist’s statement
  3. Add an interactive element (e.g., zoom function, comparison tool showing before/after restoration)
  4. Ensure the design reflects both Andreas’ 16th-century setting and modern usability
    Aim to create a design that feels authentic to Andreas Maler’s character and time period while still being accessible to a modern audience.

๐Ÿš€ My design process

  1. Started with copying and pasting yesterday’s lo-fi “my work” section

  2. Downloaded Pentiment’s fankit for fonts and images

  3. Added 6 of Andreas Maler’s paintings to โ€œmy workโ€ section

  4. Created a modal for “The Ship of Fools” with an AI-generated description

  5. Designed interactions:

    • Instagram-style heart for likes
    • Toggle for colour/line drawing versions
  6. Adjusted background colours to match toggle status

  7. Added hover effect on “The Ship of Fools”

  8. Implemented prototypes for hover and click effects

๐Ÿง  Challenges and solutions

  • Struggled with font installation (restarting Figma helped)
  • Balancing Andreas’ dark colour palette was tricky
  • I just love Medieval age art style so I simply enjoyed looking at them. I would love to draw and paint in this style one day!

๐Ÿ–ผ๏ธ The final design

While I wish I had more time for the description layout, I’m really proud of the animations I created.

๐Ÿ’ก What I learned today

Yesterday’s overwhelm turned into today’s accomplishment. Breaking tasks into smaller steps really helps manage my anxiety.

โฐ If I had more time

  • Refine the modal description layout
  • Experiment with the background, possibly adding some art elements

๐Ÿ’Œ Any thoughts?

I’d love to hear your feedback on my design or any advice you might have! My Mastodon account and email are below.

Thanks for following Day 4 of my challenge. See you tomorrow for Day 5!

With love and light ๐Ÿซถ๐Ÿป
Yoshie

P.S. We visited our neighbour’s goat, Max, yesterday. Here’s a throwback photo from February

- he’s grown so much since then! We love saying hello to him and giving him fresh grass ๐Ÿ๐ŸŒฟ

Images and the font on images: ยฉ 2024 Obsidian Entertainment, Inc.

Related articles

Day 30 of 30 Day UI/UX Design Challenge: Reflecting on My Journey ๐ŸŒฑ

๐ŸŽจ Todayโ€™s Task: Reflection and Review For the final day, my partner suggested I reflect on the 29 challenges I’ve completed to identify what I enjoyed most and what areas I excel in. ๐Ÿ’ก Reviews & Redesigns Hereโ€™s a look back at what I would change now and which challenges I enjoyed the most! Day 1: Detective Conan Escape Room Booking Page Card Order: Iโ€™d reorder the difficulty levels โ€ฆ

Day 3 of 30 Day UI/UX Design Challenge: First Lo-Fi Web Page Design! ๐Ÿ˜ฎ

๐ŸŽจ Today’s design task Despite feeling a bit tired from a late night, I was excited about today’s task: creating a wireframe for a medieval artist’s portfolio website. It’s a two-day project, but my partner helped me break it down into manageable steps. As a fan of medieval art (thanks to playing Pentiment), I was thrilled to work on this. The task: Create a lo-fi design โ€ฆ

Day 10 of 30 Day UI/UX Design Challenge: Icon Design! โžฐ

๐ŸŽจ Today’s design task Last night, I discussed my task for today with my partner. I’m grateful for his input, as he’s always thinking about how I can upskill as a designer. ๐Ÿฅนโค๏ธ Todayโ€™s task: Itโ€™s a 2-day series focused on icon design! ๐Ÿš€ My design process Understanding the task: I started by reading the task requirements. Research: To understand how to make consistent icons, I โ€ฆ