dailyUI eleftheria batsou

Objective: Create 25 projects based on a particular theme. 

Technologies: HTML, CSS, JavaScript, AngularJS, MaterialUI

Duration: 25 Days (+ the weekends)

 

► This article includes days 1-25.

► For each day you'll find the theme, the pen, a video tutorial, and some additional information.

---------------------------------------------------------------------------------------------------------------------------

 

“Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.” — https://www.dailyui.co

 

 

Day 1: Sign Up

  • ⇒ Design Hint: 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 imagine.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Codepen | Github

 

Day 2: Credit Card Checkout

  • ⇒ Design Hint: Design a credit card checkout form or page. Don’t forget the important elements such as the numbers, dates, security numbers, etc.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github Codepen

 

Day 3: Landing Page

  • ⇒ Design 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.)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒  Github Codepen | Inspiration Site

 

Day 4: Calculator

  • ⇒ Design Hint: Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github Codepen | Inspiration: My phone’s native app

Calculator

Day 5: App Icon

  • ⇒ Design Hint: 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?
  • ⇒ Technologies: HTML, CSS
  • ⇒ Tools used: Clippy
  • Github | Codepen

 

Day 6: User Profile

  • ⇒ Design Hint: 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!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen | Inspiration: Game of Thrones
  • Youtube tutorial

Day 7: Settings

  • ⇒ Design Hint: 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!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github Codepen | Inspiration: Things on youtube
  • Youtube tutorial

Day 8: Settings

  • ⇒ Design Hint: Design a 404 page. Does it suit the brand’s style? Is it user-friendly? It might sound mundane, but not evertyhing 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 asthetically pleasing.(It’s up to you!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: Animista
  • Github | Codepen
  • Youtube tutorial

Day 9: Music Player

  • ⇒ Design Hint: 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 tourbus, a smartwatch, or via a web browser. Each deveice type will have different requirements, features, and restrictions to consider.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: Flaticon
  • Github | Codepen | Used image
  • Youtube tutorial

Day 10: Social Share

  • ⇒ Design Hint: Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: Animista and Google Fonts
  • Github | Codepen
  • Youtube tutorial

 

Day 11: Sign Up (Error message in sign up)

  • ⇒ Design Hint: 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!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen

 

Day 12: E-Commerce Shop (Single Item)

  • ⇒ Design Hint: 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! (As always, it’s up to you!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github Codepen

 

Day 13: Direct Messaging

  • ⇒ Design Hint: 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?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen

 

Day 14: Countdown Timer

  • ⇒ Design Hint: Design a Countdown Timer. Is it for an app? An interface for an oven? A sport related to countdown? A launch countdown for NASA?
  • ⇒ Technologies: HTML, CSS
  • Github | Codepen

 

Day 15: On/Off Switch

  • ⇒ Design Hint: Design an On/Off Switch. Consider what’s being turned on/off and how it should be done.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: Unsplash
  • Github Codepen

 

Day 16: Pop-Up / Overlay

  • ⇒ Design Hint: Design a Pop-Up/Overlay. Is it a web sign-up form that pops up? Is it an ad overlay?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen
  • Youtube tutorial

Day 17: Email Receipt

  • ⇒ Design Hint: Design an Email Receipt. What was purchased? On what date? Consider other elements such as a customer support info, a tracking number, pictures, related items, etc.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen
  • Youtube tutorial

Day 18: Analytics Chart

  • ⇒ Design Hint: Design an analytics chart. Is it to be used for web or app analytics, a health monitor, e-commerce analytics?
    Consider filters, chart types, and the core features/statistics the user would need most. (As always, it’s up to you!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen | Inspiration
  • Youtube tutorial

Day 19: Leaderboard

  • ⇒ Design Hint: Design a leaderboard. Is it for gaming, sports, politics, or something else? Consider the important statistics to show, percentages, points, profile pictures, etc.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: Flag iconsAvatar icons
  • Github | CodepenInspiration
  • Youtube tutorial

 

Day 20: Location Tracker

  • ⇒ Design Hint: Design a location tracker. Consider the icon, placement, and purpose of location. Mapping something? Is it a tracking beacon? Is the NSA tracking you? ok, maybe they are ;)
  • ⇒ Technologies: AngularJs, MaterialUI
  • ⇒ Tools used: Map Image
  • Github | Codepen
  • Youtube tutorial

 

Day 21: Home Monitoring Dashboard

  • ⇒ Design Hint: Design a home monitoring dashboard. Be creative! What would make a dashboard visually appealing and fun to use, while also being mindful of the data? Try to make it a realistic exercise as if it were your own dashboard… one that you need to refer to daily. What is the most relevant data and what’s the most appropriate placement for it?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Github | Codepen

 

Day 22: Search

  • ⇒ Design Hint: Design something search related. It could be a search bar, an advanced search window, a search function, etc.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Demo: AngularJs AutoComplete
  • Github | Codepen

 

Day 23: Onboarding

  • ⇒ Design Hint: Design something onboarding related. Are you recruiting people for an organization? To sign up for a new website? A mobile app?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • GithubCodepen Inspiration

 

Day 24: Boarding Pass

  • ⇒ Design Hint: Design a boarding pass. Consider the origin, the destination, gates, seats, the airline, etc. (As always, it’s up to you!)
  • ⇒ Technologies: AngularJs, AngularJS Material
  • ⇒ Tools used: QR code generatorLogo
  • Github | Codepen | Inspiration

 

Day 25: TV App

  • ⇒ Design Hint: Design an app for a smart TV. What type of app is it? What are the features/controls? Does it have a carousel selection feature? What it is? (As always, it’s up to you!)
  • ⇒Technologies: AngularJs, AngularJS Material
  • ⇒ Github Codepen Inspiration

Thank you.