紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

E-Commerce Shop (Single Item)

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!

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI ::012-E-Commerce Shop (Single Item)
Daily UI ::012-E-Commerce Shop
(Single Item)

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

Flash Message

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?

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI ::011-Flash Message
Daily UI ::011-Flash Message

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

Social Share

Design Hint

Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 0010-Social Share
Daily UI :: 0010-Social Share

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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.

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 009-Music Player
Daily UI :: 009-Music Player

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

404 Page

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

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 008–404 Page
Daily UI :: 008–404 Page

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 007-Settings

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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

UI 設計 — Figma

切版設計 — Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 006-User Profile
Daily UI :: 006-User Profile

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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?

UI 設計 - Figma

切版設計 - Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 005-App Icon
Daily UI :: 005-App Icon

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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?

UI 設計 - Figma

切版設計 - Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 004-Calculator
Daily UI :: 004-Calculator

紀錄每日的「DailyUI挑戰」,將挑戰 UI設計 + Code畫面切版 。

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

UI 設計 - Figma

切版設計 - Visual Studio Code

會優先出 UI的部分,切版則會等 UI 設計全部挑戰完之後慢慢補上。

Daily UI :: 003-Landing Page
Daily UI :: 003-Landing Page

Harper Cheng

MG Designer / 菜鳥前端 & UI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store