A step by step journey to create a good design from the daily UI challenge

一步步走，從日常的UI挑戰中創建出色的設計

內容 (Content)

1. Introduction
   介紹
2. Result demo
   結果演示
3. Prerequisite
   先決條件
4. Step by step guide
   逐步指南
5. Conclusion
   結論

介紹 (Introduction)

The “Daily UI Challenge” (https://www.dailyui.co/) is a challenge for UI/UX designers. They provide a different type of UI elements every week (like sign-in, user profile, search etc) and designer on the challenge attempt to create their own version. Many of the designs are very inspiring and creative.

“每日UI挑戰”( https://www.dailyui.co/ )對UI / UX設計師來說是一個挑戰。 他們每周都會提供不同類型的UI元素(例如登錄，用戶個人資料，搜索等)，挑戰者將嘗試創建自己的版本。 許多設計都非常具有啟發性和創造性。

In this article, I will pick one interesting example for “Sign in” form and try to actually implement it in code. The example I picked is “Art Platform — login” by Benjamin Krogh (https://dribbble.com/shots/3270775-Art-Platform-Login)

在本文中，我將為“登錄”表單選擇一個有趣的示例，并嘗試在代碼中實際實現它。 我選擇的示例是Benjamin Krogh的“藝術平臺-登錄”( https://dribbble.com/shots/3270775-Art-Platform-Login )

Note like this is usually further explanation

像這樣的筆記通常是進一步的解釋

結果演示 (Result demo)

This is the final result I created in codepen:

這是我在Codepen中創建的最終結果：

Codepen: https://codepen.io/josephwong2004/full/NWGBRJQ

Codepen： https ：//codepen.io/josephwong2004/full/NWGBRJQ

先決條件 (Prerequisite)

Basic HTML, CSS and SCSS/SASS

基本HTML，CSS和SCSS / SASS

逐步指南 (Step by step guide)

Step 1: Create a quick draft

第1步：創建快速草稿

The first thing I do is to quickly draft the design myself, and break it down to different elements in coding.

我要做的第一件事是自己快速起草設計，并將其分解為編碼中的不同元素。

The first thing I notice is the different hierarchy level of the design. From bottom to top:

我注意到的第一件事是設計的不同層次結構級別。 從下到上：

1. Background with white and orange split color
   白色和橙色拆分顏色的背景
2. Container for the “card” like shape, holding the image. Also, it has an orange edge
   像“卡片”一樣的形狀的容器，用于保存圖像。 而且，它有一個橙色的邊緣
3. Pop up sign in form
   彈出登錄表單

I have some personal interpretation here as well. I assume the orange in the background and the orange on the card is separated. Although it is not that obvious in the original design, I believe since the card is “lifted”, the orange edge part should be lifted as well. Making it extend a bit from the background.

我在這里也有一些個人解釋。 我假設背景中的橙色和卡上的橙色是分開的。 盡管在原始設計中并沒有那么明顯，但我相信由于卡是“提起”的，因此橙色邊緣部分也應該提起。 使它從背景開始延伸一點。

Step 2: Make the background

步驟2：制作背景

We will create the design of the three different hierarchy one by one. Starting with the background. We will need to make it split between white and orange. My solution is to use a div with white background, and a “before” element with clip-path for the orange part.

我們將一個一個地創建三個不同層次的設計。 從背景開始。 我們需要將其分為白色和橙色。 我的解決方案是使用具有白色背景的div和橙色部分的帶有剪切路徑的“ before”元素。

On second thought after completing the whole thing, I should have just use backgroundlinear-gradient for the same effect. It is a more elegant way and we don’t need to have a “before” element just for background color.

在完成整個過程后，再三考慮，我應該只使用背景linear-gradient來達到相同的效果。 這是一種更優雅的方法，我們不需要僅將背景色設置為“ before”元素。

If you are interested: https://stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

如果您有興趣： https : //stackoverflow.com/questions/25958315/use-linear-gradient-in-css-to-split-div-in-2-colors-but-not-in-equal-halves

So let jump into the html and css.

因此，讓我們跳入html和CSS。

HTML (it is just one line for the background):

HTML(背景僅一行)：

SCSS:

SCSS：

There’s a lot of things in the SCSS, but most of them are just setting up for future use. Like the color, font, and helper mixin.

SCSS中有很多東西，但是其中大多數只是為了將來使用而設置。 像顏色，字體和輔助混合。

One thing I discover about clip path (not sure if it is browser specific issue) is that sometimes it show a tiny white border around the clipped area when two div are overlapping. Therefore you can see my $path actually exceed 100% and 0% as a workaround.

我發現有關剪切路徑的一件事(不確定是不是瀏覽器特定的問題)是，當兩個div重疊時，有時在剪切區域周圍會顯示一個細小的白色邊框。 因此，您可以看到我的$ path實際上超過100％和0％作為解決方法。

So pretty simple, we have our background with two-color split. The next step is to create the card container.

非常簡單，我們將背景分為兩色。 下一步是創建卡容器。

Step 2: Create the card container

步驟2：建立卡片盒

Okay, This part is very similar to the background. We basically need to create the same thing, just with smaller width and height and a box-shadow around.

好的，這部分與背景非常相似。 我們基本上需要創建相同的東西，只是寬度和高度更小，周圍有一個盒子陰影。

One tricky thing about it is that, if you are only using a box-shadow (say in light grey color) on the whole card container, when the grey shadow got projected to the background, you will see that on the white background part, you get a dark shadow, while on the orange background part, you get a white shadow instead. This is what I am talking about:

一件棘手的事情是，如果您只在整個名片盒上使用盒子陰影(用淺灰色表示)，那么當灰色陰影投射到背景上時，您會在白色背景部分看到它，您會得到一個深色陰影，而在橙色背景部分上，您將獲得白色陰影。 這就是我在說的：

From the original design, there are no “white shadow” on the orange part of the card. Therefore, I assume there are no shadow at all on that part. To only apply shadow on the “white part” of the card, I used a clip-path and filter: drop-shadow since clip-path and box-shadow doesn’t work together.

從原始設計來看，卡的橙色部分沒有“白色陰影”。 因此，我認為該部分完全沒有陰影。 為了僅在卡的“白色部分”上施加陰影，我使用了剪切路徑和filter: drop-shadow因為剪切路徑和box-shadow不能同時使用。

This is the code for the card container part:

這是卡容器部分的代碼：

HTML:

HTML：

You can see I have a container-shadow class. That is what I talk about for dropping shadow on the white part

您可以看到我有一個容器陰影類。 這就是我要在白色部分上投影的目的

SCSS:

SCSS：

One good thing about having mixin for clip-path is I can easily modify and experiment with the “clip” until it is perfect for me. Having a mixin greatly simplify this process.

對于剪輯路徑使用mixin的一件好事是，我可以輕松修改并嘗試使用“剪輯”，直到它對我來說是完美的。 使用mixin可以大大簡化此過程。

For the container-shadow, we need two element, a parent and a child to apply drop shadow. The parent is just the same size as container, while the child (after element) is clipped

對于容器陰影，我們需要兩個元素，即父元素和子元素來應用陰影。 父容器的大小與容器大小相同，而子容器(在元素之后)被裁剪

And the result look like so:

結果看起來像這樣：

It looks a bit weird look since we don’t have the image added. Let do that next.

由于我們沒有添加圖片，因此看上去有些奇怪。 接下來讓我們做。

Step 3: Fill in the image and icon

步驟3：填寫圖片和圖標

Next, we need to fill in the image and the icon. It took me some time to find the original image (the man looking at the painting). With google search by image for a similar photo, I finally got the original size of it. And for the icon, it will be far too blurry if I just clip it out from the design. So I used photoshop to create a similar one.

接下來，我們需要填寫圖像和圖標。 我花了一些時間才能找到原始圖像(那個看著畫作的人)。 谷歌通過圖像搜索類似的照片，我終于得到了它的原始大小。 對于圖標來說，如果我只是將其從設計中裁剪出來的話，那就太模糊了。 所以我用photoshop來創建一個類似的。

With the image asset ready, we can fill up the card:

準備好圖像資產后，我們可以填充卡片：

HTML:

HTML：

SCSS:

SCSS：

Not much to talk about here. We are just reusing the clip path mixin again on the image. Again, the final clip percentage is just by empiricism (with trial and error).

這里沒有太多要談論的。 我們只是在圖像上再次使用了剪切路徑混合。 同樣，最終片段的百分比只是憑經驗(帶有反復試驗)。

Step 4: Create the sign up form

第4步：創建注冊表單

Last but not least (actually the most important part), we have to create the sign-in form UI. The form is lifted on the container using box-shadow. Again, we face the same problem that the shadow color looks different when dropped on the light background and the dark background (the image). Therefore, we will apply the same technique to drop-shadow only on the light part.

最后但并非最不重要的一點(實際上是最重要的部分)，我們必須創建登錄表單UI。 使用盒子陰影將表格抬到容器上。 同樣，我們面臨同樣的問題，即當陰影顏色放在淺色背景和深色背景(圖像)上時，陰影顏色看起來會有所不同。 因此，我們將僅在較輕的部分上將相同的技術應用于陰影。

The input part is very simple. Although without specification of how the input reacts on focus, I can only assume it myself. I make the border line orange and make the button darker on hover.

輸入部分非常簡單。 盡管沒有說明輸入如何聚焦，我只能自己假設。 我將邊界線設置為橙色，并在懸停時使按鈕變暗。

The sign-in form part of the code look like so.

代碼的登錄表單部分看起來像這樣。

HTML:

HTML：

SCSS:

SCSS：

It may look like there is a lot of style, but breaking them down one by one, there are no fancy property. I am just trying to capture the UI element in the design and make them look similar.

看起來好像有很多風格，但是將它們一一分解，就沒有花哨的屬性。 我只是試圖捕獲設計中的UI元素，并使它們看起來相似。

And this is the final result. Hope you like it!

這是最終結果。 希望你喜歡！

結論 (Conclusion)

It is a very interesting exercise to copy UI and try to implement it yourself as precisely as possible. I have made a lot of mistakes (like not using background color and linear gradient for the orange background split) and learn a great deal doing this exercise.

復制UI并嘗試自己盡可能精確地實現UI是一個非常有趣的練習。 我犯了很多錯誤(例如不對橙色背景拆分使用背景色和線性漸變)，并且在進行此練習時學到了很多東西。

One thing you may notice on the codepen is, this design I made doesn’t scale well on responsive. The image just keeps scaling down on resize. A completely new design might be a need for a different size.

您可能會在Codepen上注意到一件事，即我所做的此設計在響應式上的伸縮性不佳。 圖像只是不斷縮小以調整大小。 全新的設計可能需要不同的尺寸。

But overall, I like this design a lot. Feel free to leave a comment if you like this article!

但總體而言，我非常喜歡這種設計。 如果您喜歡這篇文章，請隨時發表評論！