Scribd
Upload
2 views2 pages

UI Challenge

The document outlines various UI design challenges for students, including creating sign-up/sign-in pages, credit card checkout forms, landing pages, and more. Each challenge encourages students to consider essential elements such as user experience, brand representation, and device compatibility. Links to student submissions are provided for some challenges, showcasing their design solutions.

Uploaded by

Abdulfatah Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views2 pages

UI Challenge

The document outlines various UI design challenges for students, including creating sign-up/sign-in pages, credit card checkout forms, landing pages, and more. Each challenge encourages students to consider essential elements such as user experience, brand representation, and device compatibility. Links to student submissions are provided for some challenges, showcasing their design solutions.

Uploaded by

Abdulfatah Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

UI CHALLENGES MC38

1. Sign Up and Sign In


Create a Sign up and Sign in 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 imagine.

Student Link

Breens Mbaka https://breens-mbaka.github.io/UI-


Challenge---Login-Signup-and-
Modal-Form/

2. Credit Card Checkout


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

Student Link

Breens Mbaka https://breens-mbaka.github.io/UI-


Challenge2---Credit-Card-Checkout/

Isaac Kaptoge https://602dfd5ca90c396e250fb2d7--


trusting-curie-0fba0d.netlify.app/

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

4. Calculator
Design a calculator. Standard, scientific, or specialty calculator for something
such as a mortgage? Is it for a phone, a tablet, a web app?

5. App Icon
Using CSS, create 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?
6. Settings
Design settings for something. Is it for security or privacy settings? Game
settings? What is it and what's important? (It's up to you!)

7. 404 Page
Design a 404 page. Does it suit the brand's style? Is it user-friendly? It might
sound mundane, but not everything can be flash 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!)

8. Music Player
Design a music player. Consider the controls, placements, imagery such as
the artist or album cover, etc. Also, consider the device type that's playing the
music. A dashboard in a tour bus, a smartwatch, or via a web browser. Each
device type will have different requirements, features, and restrictions to
consider.

9. Social Share
Design a social share button/icon and be mindful of the size, imagery,
placement, and purpose for sharing. Design the whole experience and
consider different Social platforms. E.g. Facebook, twitter

10. Flash Message


Design a Flash Message with both the outcome for an error and success. Is it
for a sign up form? A download/upload message? (As always, it's up to you!)

11. E-Commerce Shop (Single Item)


Design an e-commerce shop. Is it simple for a local business or a large online
retailer? Is it for clothing, shoes, handmade soap, or something else?
Consider the brand, the products offered, product views, product options, desired actions
(conversions, product views, etc.) and the users!

12. Direct Message


Design a Direct Messaging app, profile, or chatbox. Consider the parties involved in the
messages, images, placement, and context of the messages. Are the messages for
social purposes? Customer support?

You might also like