100 Day UI Challenge

An interface everyday for a 100 days.

Inspiration

I was interested in design and I wanted to learn how to use a few tools to create user interfaces. I purchased Affinity Designer for Mac and Sketch and decided to make as many interfaces as possible from the 100 day challenges to practice.

Designs

Prompt:
Design a sign up page, modal, form, app screen, etc.

Approach:
Inspired by the idea of space, I tried to incorporate light colors with some grpahics relating to the topic.

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

Approach:
I like running and shoes were the most obvious choice for a product. I love the font credit card companies use to print numbers on the card so I thought that would be intuitive to the user.

Prompt:
Landing Page. Hint: 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.)

Approach:
I was trying to learn meteorJS at that moment so I tried to basically replicate that on a similar idea.

Prompt:
Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app? (It's up to you!)

Approach:
I was taking PHYS 213 and we were just taught about heat transfer so that was the first thing that came to my mind. I tried to use heat specific colors to better enhance the experience.

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?

Approach:
I had an idea about making a run based betting app, so this basically serves as an app icon for that.

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!)

Approach:
I tried to make a user profile for a band instead because I browsed through dribble for this challenge and almost every other person had the same thing.

Prompt:
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!)

Approach:
This is a weird settings app for a plane reservation app. It has a lot of uncommon features but the UI is kind of similar to the iPhone settings app.

Prompt:
Design a 404 page. Does it suit the brand's style? Is it user-friendly? (It's up to you!)

Approach:
Building on to the Space theme from Challenge #01, this is kind of a lost in space design. Same colors with graphics to emphasize the purpose.

Prompt:
Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc.

Approach:
The design is pretty standard actually, just with a voice form according to the status of the song. The bright colors seem up with the dark background.

Prompt:
Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing. (As always, it's up to you!)

Approach:
I thought of making this one interactive because no one wants to see a bunch of share signs at each post. I don't really have much knowledge of interaction design using Framer or Sketch, so that's what I stopped here to get an idea of those skills.

At this point I decided I also wanted to learn how to make interfaces rather than just design them and I started getting into Frontend Development.

Try it out

Dribbble

More Projects

Ballot  ·   Runistics  ·   Leapflix  ·   Broker  ·   Task.  ·   Musify  ·   Moviebot  ·   IDN Homograph Detector  ·   Encryptr  ·