UI with Figma Design delivered daily

design
41

Damn! I’m blown away!!

1 Like
42

@Misfit what tool do you use to convert mockup like these to plain HTML/CSS/JS (with all the subtle animation)? Though old school, I like the sketch->Mock->HTML process. Thank you for sharing

43

Thanks @lordbanks for the feedback.

I thought of a way out but forgot to add it in the version i uploaded earlier.
The home in “Just choose the type of car you like and we’ll drive you home safely.” will be highlighted & underlined to afford a click action that’ll take the Users Home literally.

Attached below is the updated version.

Day_08_Update.png1600×1600 1.56 MB

Does this work?

1 Like
44

Thanks for your kind words @Benosita

45

Lol convert!? To the best of my knowledge no such tool exists (I could be wrong tho, tech moves so fast these days) I picked the design apart and started writing the CSS, I used ColorZilla (a chrome browser extension) to get the precise colors on the design, nothing too abstract really.

Sometimes it’s just counter-intuitive to replicate a design pixel-for-pixel having in mind that a layout that seems super cool on a mobile may not look the part on an iPad or Desktop.

1 Like
46

Tried my hands on this one. DESKTOP ONLY —> LINK ON CODEPEN

6 Likes
47

Lmao, that totally looks like a runway. Good idea though.

48

:smiley: Thanks chief.

49

@elepsis is it only UI for apps and websites that are allowed? what of logo, icon designs ideas/concepts, UI redesigns of favourite/popular apps and websites, are designs made with other tools asides figma also allowed? plus i might not be able to compete in the daily challenge due to some other factors but would like to use these medium to challenge myself into creating and learning new stuff as well as upload the designs i come up with. thanks

50

Nice! You took it steps further. :+1:

51

Hi @GbMillz

Great to know you’re burning to get things out and get better.
This challenge is basically a UI/UX design challenge and my choice of Figma is personal.

That said, I know of a Logo design challenge called “a logo a day”. Even if you can’t do it daily, you have to be hard on yourself to do an X number per week. All you need to do then is to create a new thread (topic) here on Radar and update it with the items you create (don’t create a new thread each time you have a work to post, keep Radar clean). That way, members of this community will go through and let you know what you’re doing right or wrong. You’ll learn and we’ll all get better.

Hope that helps.

52

Day 9 (Music Player)

I decided to design a music player meant for use when driving.

I discovered that the regular players work because we hold them close when we’re in our rooms but when we get behind the wheels, they become a challenge to use. There’s a risk of an accident when you’re trying to navigate the app to select your fav tune while driving.

So I thought of using this challenge to attempt solving the problem by designing a simple interface that’s quick to access, highly legible from a distance & not distracting.

Highlights:

  1. Bigger controls
  2. High colour contrast
  3. Bigger text (… slightly condensed font to save space)
  4. Colour-coding of the various categories (Playlist-purple, Artists, Albums, Songs, Recently Played - different colours).
  5. Replacement of Album Art with Cards: (I discovered when I’m driving, the pictures on songs don’t make sense to me anymore. I just want to know what song is playing & be able to select another quickly). Therefore, I thought of introducing cards to help the driver know at a glance: the song title, singer & where the song is playing from (e.g playlist: My Naija Gospel tunes).

Music Player_Add to Playlist.png1720×1720 923 KB

My thoughts

Notes.jpg1062×1062 176 KB

The sketch

Sketch.jpg1062×1062 175 KB

Kindly share your thoughts.

7 Likes
53

thanks for your encouragement. would do just that. cheers!

54

Day 10 (Social Share)

I thought of a design that enables users to share articles & items across multiple social platforms at once by selecting the platforms and hitting the share button. I’m thinking that it will help content creators get their works shared more than ever before.

This is a hypothetical design that needs to be validated.
I know there may be account authentication issues & stuffs for users.
Dev guys in the house, is this achievable? Any workarounds?

UI_10.png1720×1720 591 KB

3 Likes
55

Your taglines are so good; those marketing guys could learn from you

56

Thanks @simioluwatomi

57

Day 11 (Flash Message - Error/Success)

I decided to test how colours & subtle icons can work with copy (text content) to visually communicate error/success states.
What are your thoughts?

Day 011_Flash Message.png1720×1720 863 KB

4 Likes
58

Guy this is awesome especially from sketch to design nice work

1 Like
59

Thanks for the kind words @dojoVader