Code UI

[20110665]

Code UI cho màn hình đăng nhập, đăng ký

[NgDinhThien]

Ngày 1: Xác định yêu cầu

• Nghiên cứu và đặt câu hỏi để hiểu rõ yêu cầu của khách hàng về giao diện web.
• Xác định mục tiêu của giao diện web và đối tượng người dùng để thiết kế giao diện phù hợp.
• Thu thập thông tin về yêu cầu kỹ thuật để đảm bảo giao diện web đáp ứng được những yêu cầu kỹ thuật cần thiết.
• Trang đăng nhập cần phải có chức năng đăng nhập cho người dùng với thông tin tài khoản và mật khẩu hợp lệ. Ngoài ra, cần có các chức năng khác như đăng ký tài khoản mới, quên mật khẩu, v.v.
• Giao diện của trang đăng nhập phải đơn giản, dễ sử dụng và thuận tiện cho người dùng. Điều này bao gồm các thành phần cơ bản như trường đăng nhập tên tài khoản, trường đăng nhập mật khẩu, nút đăng nhập và các liên kết hỗ trợ.
• Trang đăng ký cần phải có chức năng đăng ký tài khoản mới cho người dùng với các thông tin cần thiết như tên đăng nhập, mật khẩu, email, v.v. Ngoài ra, cần có các chức năng khác như kiểm tra tính hợp lệ của thông tin đăng ký và xác thực email của người dùng.
• Giao diện của trang đăng ký phải đơn giản, dễ sử dụng và thuận tiện cho người dùng. Điều này bao gồm các thành phần cơ bản như trường đăng ký tên đăng nhập, trường đăng ký mật khẩu, trường đăng ký email, nút đăng ký và các liên kết hỗ trợ.

[NgDinhThien]

Ngày 2: Thiết kế trang web

• Sử dụng các công cụ thiết kế trực quan như Adobe XD, Sketch, Figma, hay InVision để tạo ra các bản thiết kế mẫu.
• Đảm bảo rằng thiết kế giao diện phù hợp với mục tiêu và đối tượng người dùng.
• Bố trí vị trí các phần tử và tạo ấn tượng mạnh mẽ với người dùng.

[NgDinhThien]

Ngày 3: Tạo wireframe

• Bắt đầu bằng việc vẽ một hình chữ nhật đại diện cho khu vực trang đăng nhập. Hình chữ nhật này có thể nằm giữa trung tâm của trang hoặc ở cạnh trái hoặc phải của trang tùy theo thiết kế của bạn.
• Tiếp theo, vẽ hai hộp với kích thước nhỏ hơn bên trong hình chữ nhật đại diện cho phần đăng nhập. Hộp đầu tiên để người dùng nhập tên đăng nhập và hộp thứ hai để người dùng nhập mật khẩu.
• Dưới hai hộp đăng nhập, bạn có thể thêm một nút "Đăng nhập" hoặc "Login" để người dùng có thể bấm để đăng nhập.
• Bạn cũng có thể thêm một nút "Quên mật khẩu" hoặc "Forgot password" nếu người dùng không nhớ mật khẩu của mình.
• Nếu trang đăng nhập của bạn cho phép người dùng đăng nhập bằng tài khoản mạng xã hội, bạn có thể thêm các biểu tượng tương ứng của các nền tảng mạng xã hội để cho người dùng dễ dàng chọn.
• Cuối cùng, bạn cũng nên đặt một liên kết đăng ký hoặc "Sign up" để người dùng có thể tạo tài khoản mới nếu họ chưa có tài khoản trên trang web của bạn.
• Còn trang đăng kí thì Tạo hình chữ nhật đại diện cho khu vực trang đăng kí. Hình chữ nhật này có thể nằm giữa trung tâm của trang hoặc ở cạnh trái hoặc phải của trang tùy theo thiết kế của bạn.
• Trong hình chữ nhật này, tạo các ô nhập thông tin cho người dùng nhập thông tin đăng ký, bao gồm tên đăng nhập, mật khẩu, xác nhận mật khẩu, email và các thông tin cần thiết khác.
• Thêm nút "Đăng kí" hoặc "Sign up" để người dùng có thể bấm để đăng ký tài khoản mới.
• Nếu trang đăng kí cho phép người dùng đăng ký bằng tài khoản mạng xã hội, bạn có thể thêm các biểu tượng tương ứng của các nền tảng mạng xã hội để cho người dùng dễ dàng chọn.
• Nếu trang đăng kí yêu cầu người dùng cung cấp các thông tin bổ sung, bạn có thể tạo các ô nhập thông tin bổ sung hoặc liên kết đến các trang khác để người dùng có thể cung cấp thông tin này.
• Cuối cùng, bạn cũng nên đặt một liên kết đăng nhập hoặc "Log in" để người dùng có thể đăng nhập vào trang web của bạn nếu họ đã có tài khoản.

[NgDinhThien]

Ngày 4: Tạo mockup

• Sử dụng một phần mềm thiết kế đồ họa như Adobe Photoshop hoặc Sketch để tạo mockup cho trang đăng nhập. Nếu bạn muốn có một giải pháp đơn giản hơn, bạn cũng có thể sử dụng các công cụ thiết kế giao diện như Figma hoặc InVision.
• Thêm các chi tiết cụ thể như hình ảnh, logo, màu sắc, các biểu tượng của các nền tảng mạng xã hội cho phép đăng nhập, và các ô nhập thông tin.
• Đảm bảo rằng trang đăng nhập có thiết kế thân thiện với người dùng, dễ nhìn và dễ sử dụng. Bạn có thể thêm một số chú thích, hướng dẫn hoặc thông báo để giúp người dùng hiểu rõ hơn về cách sử dụng trang đăng nhập.
• Cân nhắc sử dụng các tiêu đề, văn bản và phông chữ khác nhau để tạo sự đa dạng và tăng tính thẩm mỹ cho trang đăng nhập.
• Kiểm tra xem trang đăng nhập của bạn có đáp ứng được các thiết bị khác nhau như desktop, tablet và mobile hay không. Nếu không, bạn cần chỉnh sửa để trang đăng nhập của bạn có thể hoạt động tốt trên các thiết bị khác nhau.
• Cuối cùng, hãy lưu lại tất cả các thiết kế và các tài liệu để tiếp tục phát triển trang đăng nhập của bạn và bảo đảm rằng nó đáp ứng được yêu cầu của người dùng.

[NgDinhThien]

Ngày 5: Lập trình HTML Đăng nhập:

talkdesk

Enter your credentials to login

Email

Password Forgot password?

Login

OR

Login with Google

Don't have an account

Đăng kí:

Sign up to Talkdesk, Inc.

Sign up with Twitter

Sign up with Facebook

Sign up with Google

Email Password

Sign up

New to talkdesk, Inc.? Sign up

Have you emailed us? Get a password

If you've communicated with our support staff through email previously, you're alraedy registered. You probably don't have a password yet, through.

I am an Agent Forgot my password

[NgDinhThien]

Ngày 6: lập trình CSS Đăng nhập: { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f5f5; } .container{ width: 100%; height: 80vh; display: flex; flex-direction: column; align-items: center; margin-top: 100px; } .logo{ margin-bottom: 30px; text-align: center; } .logo1{ width: 120px; height: 70px; font-size: 50px; margin-left: 30px; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .logoenter{ /in nhạt/ font-weight: 300; font-family: Arial, Helvetica, sans-serif; margin-bottom: 20px; } .form{ width: 400px; margin-bottom: 10px; } .form label{ display: block; margin-bottom: 5px; /in đậm/ font-weight: bold; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .form input{ width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 5px; padding-left: 10px; margin-bottom: 20px; } .form button{ width: 100%; height: 40px; border: none; border-radius: 5px; background-color: #0066FF; color: #fff; /in đậm*/ font-weight: bold; }

.error{ color: red; }

h1{ font-size: 20px; color: rgb(0, 0, 0); } .remember{ display: flex; align-items: center; margin-bottom: 10px; } .remember input{ width: 20px; height: 20px; margin-right: 10px; }

.submit{ text-align: center; }

.forgot{ display: flex; justify-content: space-between; } .forgot a{ text-decoration: none; color: #0066FF; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .forgot a:hover{ text-decoration: underline; } /css cho line1, line2 và span nằm trên 1 hàng/ .or{ display: flex; align-items: center; margin: 20px 0 10px 0; } .or .line1{ width: 177px; height: 1px; background-color: #CCCCCC; } .or .line2{ width: 177px; height: 1px; background-color: #CCCCCC; } .or span{ margin: 0 10px; color: #CCCCCC; background-color: #f5f5f5; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .google{ width: 400px; height: 40px; background-color: #EEEEEE; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); margin-bottom: 30px; margin: 20px auto; } /css cho ảnh google/ .google img{ width: 20px; height: 20px; margin: 10px 100px 10px 10px; } /css cho chữ login with google/ .google span{ font-size: 15px; font-weight: 600; color: #000; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .google a{ display: flex; align-items: center; text-decoration: none; } /css cho chữ don't have an account/ .donthave{ text-align: center; margin-bottom: 20px; } .donthave a{ text-decoration: none; color: #0066FF; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .donthave a:hover{ text-decoration: underline; } /hiệu ứng/ .form input:focus{ outline: none; border: 1px solid #0066FF; } .form button:hover{ cursor: pointer; background-color: #0052CC; } .google:hover{ cursor: pointer; background-color: #CCCCCC; } Đăng kí: /css cho container xếp một hàng ngang ở giữa màn hình/ body{ background-color: #f5f5f5; } .header h1{ text-align: center; font-size: 25px; color: #000; /in đậm/ font-weight: bold; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; margin-top: 100px; } .container{ display: flex; justify-content: center; margin-top: 40px; height: 250px; } .line{ width: 2px; height: 220px; background-color: #CCCCCC; margin: 0 40px; }

.google{ width: 400px; height: 40px; background-color: #EEEEEE; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); margin: 20px auto; } /css cho ảnh google/ .google img{ width: 20px; height: 20px; margin: 10px 100px 10px 10px; } /css cho chữ login with google/ .google span{ font-size: 15px; font-weight: 600; color: #000; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .google a{ display: flex; align-items: center; text-decoration: none; }

.form{ width: 400px; margin-bottom: 10px; } .form label{ display: block; margin-bottom: 5px; /in đậm/ font-weight: bold; /đổi font chữ/ font-family: Arial, Helvetica, sans-serif; } .form input{ width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 5px; padding-left: 10px; margin-bottom: 20px; } /hiệu ứng/ .form input:focus{ outline: none; border: 1px solid #0066FF; } .form button{ width: 100%; height: 40px; border: none; border-radius: 5px; background-color: #0066FF; color: #fff; /in đậm/ font-weight: bold; } /hiệu ứng/ .form button:hover{ background-color: #0052cc; cursor: pointer; } .forgot{ display: flex; justify-content: center; align-items: center; width: 900px; margin: 0 0 0 400px; } .k1{ width: 60%; margin: 50px 0 0 -100px; } .k1 p{ font-size: 19px; color: #000; font-family: Arial, Helvetica, sans-serif; } .k1 a{ text-decoration: none; color: #0066FF; font-size: 19px; font-family: Arial, Helvetica, sans-serif; } .k1 .p2{ font-size: 17px; color: #000; /khoảng cách các dòng/ line-height: 25px; /nhạt màu/ opacity: 0.65; font-family: Arial, Helvetica, sans-serif; } .k2-2{ width: 100%; height: 200px; background-color: #f5f5f5; margin: 0 0 20px 0; } .k2{ display: flex; flex-direction: column; align-items: center; width: 30%; } .k2 a{ text-decoration: none; color: #0066FF; font-size: 18px; font-family: Arial, Helvetica, sans-serif; margin: 0 0 20px 50px; }

[NgDinhThien]

Ngày 7: Kiểm tra và đánh giá Đánh giá:

• Thiết kế giao diện: có thiết kế giao diện đẹp mắt, dễ nhìn và dễ sử dụng
• Tính năng: cung cấp đầy đủ các tính năng cần thiết để đăng nhập (ví dụ như cung cấp form đăng nhập, kiểm tra tài khoản và mật khẩu, quên mật khẩu, đăng kí tài khoản mới,..)
• Tốc độ tải trang: có tải nhanh, không bị treo hay bị chậm khi đăng Kết quả:

[NgDinhThien]

[NgDinhThien]

[NgDinhThien]

trên đây là kết quả được tổng hợp sau 7 ngày được giao nhiệm vụ thiết kế UI