💬 Prompt 

Design a 404 page - that's not boring! 

Does it suit the brand's style? Is it user-friendly? It might sound mundane, but not everything can be flashy or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that's useful and aesthetically pleasing. (It's up to you!)

🎯My approach 

I have been planning to go to the movies, so I have been browsing the local cinema's homepage a few times lately and decided to create a new 404 page for them! I found their current 404 page, which wasn't bad! It was just a little mundane, and i thought it could be a good case for my re-design. I knew the task was to make sure that this error-page was not boring, so I immediately thought about having a big, expressive face and maybe something cinema-related for my design.

🎨Design focus

• Expressive and not-boring!
• Having a good error message that effectively lets the user know that this is an error page
• Adding useful links, to guide users back to the sites main content.
• Staying true to the colors and theme of the main site content, leaving the top navigation bar and search bar in place. 

Before:

After (my re-design):

Check out the mockup in Figma here!

Settings

💬 Prompt 

Design settings for something. Is it for security or privacy settings? Game settings? Light mode vs. dark mode? System settings (sound, notifications, screen time, Wi-Fi, etc.? What is it and what are the most important settings? 

🎯My approach 

I wanted to put together a screen time settings page with all the right controls to manage screen time. And since I'm a big fan of dark mode, I went ahead and designed it with that in mind.

🎨Design focus

• Prioritizing simplicity and intuitiveness by arranging relevant controls in a clean, one-column layout.
• The dark-themed design is intended to symbolize screen time usage, as dark colors resemble a powered-off screen. This choice is particularly relevant to the design of these specific settings.

Result:

Daily UI 100 Days Challenge

User Profile

💬 Prompt 

Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!)

🎯My approach 

I was inspired by real work-related platforms, like LinkedIn, Slack etc. and wanted to create a user profile that could be used to check out a consultant for a company, or anything related to business inquiries! So I decided to take inspiration from a relative of mine, my cousin Tina! So I took a photo i shot of her in 2023, and made her user profile on mobile. 

🎨Design focus

• Creating a user profile card that showcases the essential information, with a "message", "add" and "share" button.
• Making it user friendly by including features like project links, hourly rate, and online status.
• Bold and modern design.

Result:

Daily UI 100 Days Challenge

App Icon

💬 Prompt 

Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?

🎯My approach 

I decided to create a smiling Sushi app icon.

🎨Design focus

• Cute and simple
• Sushi-themed

Daily UI 100 Days Challenge

Calculation

💬 Prompt 

Design a calculation element or interface. Is it a standard calculator, a scientific one, or specialty calculator for something such as a home mortgage or auto loan? Is it to forecast a calculation such as for a credit score? Is it for a phone, a tablet, a web app?

🎯My approach 

I wanted to redesign the Norwegian VAT calculator, mvakalkulator.com, that I have had to use in the past to calculate prices for a webshop for another project I was working on. Having used the site before, I quickly started to identifiy the areas where the design could be improved, both on desktop and mobile, in order to elevate the user experience of the VAT calculator.

🎨Design focus

• Cross-platform consistency: creating a calculator that is easy to use both on mobile and desktop.
• Minimizing cognitive load: users of a VAT calculator are likely dealing with a lot of numbers. The goal is to keep things simple and making it easier for users to navigate and manage their calculations.

Before

After:

Check out the mockup in Figma here!

Daily UI 100 Days Challenge

Landing page

💬 Prompt 

Landing page. What's the main focus? Is it for a book, an album, a mobile app, a SaaS product? Consider important landing page elements (Headlines, call-to-action buttons, typography, clarity, etc.)

🎯My approach 

I decided to create a landing page for a fitness app called Vibrant Vitality, focusing on holistic fitness and wellness practices. 

🎨Design focus

• Creating a bold, yet simple page, free of clutter. 
• Using images for visual impact.
• Clear CTA-buttons.

Check out the mockup in Figma here!

Daily UI 100 Days Challenge

Credit card checkout

💬 Prompt 

Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

🎯My approach 

I decided to create a mobile version of an online clothing store, presenting the credit card checkout page as instructed. I wanted to integrate all the key elements, such as product details, shipping costs and of course the credit card form —all combined on a single page for a streamlined user journey.

🎨Design focus

• Keeping a minimalistic structure and visual consistency. 
• Visible payment controls/no hidden features, which means that the user has complete control over the product details and the payment options during the purchase.
• Seamless credit card integration with clear instructions and display of the total cost upfront to build trust in the users online transaction.

Low Fidelity Wireframe -> High Fidelity Wireframe

Check out the mockup in Figma here!

Daily UI 100 Days Challenge

Create a sign up form

💬 Prompt 

Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.

🎯My approach 

I decided to create a sign up form for a fictitious group of hikers gearing up to go on their weekly hike on "Misty Peaks Mountain". The form is for anyone who wants to join the hike. It has all the info you need, incorporated in a clean, inspiring design.

🎨Design focus

• Single-column layout, requesting only neccessary information.
• Visceral Design: Focusing on making an impact with the first impression. Does it make you want to join the hike?
• Using color and images that fit the theme of the event.

Low Fidelity Wireframe:

High Fidelity Wireframe:

The result:

Check out the mockup in Figma here!

👋 Exciting update – I'm officially attempting the Daily UI 100 Days Challenge, where they send you a new design challenge each day for 100 days.

Starting on this challenge is not just about completing the design tasks; it's about exploring, growing and refining my design skills each day.

I also have to be realistic during this project and assume that I might not complete 100 days in a row, but I will do my best to eventually make it to 100 regardless. 💻✨

Wish me luck!