Objective
Daily UI Challenge, Day 001 – Sign Up Page
A user interface design will be created for the Code Fizz sign up page. It will be a clean and minimalist design that incorporates colorful and modern components. It should also adhere to the branding guidelines for Code Fizz, including the colors, fonts, and brand elements.
Responsive Web Design
Create a functional and responsive website using the UI design. Some changes may be made during this process, but the overall design concept and aesthetic should remain the same.
Details
Title: Code Fizz Sign Up Page
Client: Code Fizz (Conceptual)
Related Skills: UI / UX Design, Front-End Web Development, Responsive Web Design
Tools Used: Adobe InDesign, CodePen, HTML, CSS, JavaScript, SCSS, CSS Flexbox
Tags: UI, UX, User Interface, Daily UI Challenge, Sign Up, Registration
Website: Live Demo
Code Fizz Sign Up Page - UI/UX Design
Code Fizz is a web application that is being developed to provide resources and community features to other coders, designers, and web developers. This UI design was styled using predetermined branding specifications (i.e. colors and fonts).
Code Fizz Sign Up Page - Responsive Web Design
See the Pen DailyUI 001 – Code Fizz Sign Up by Aimie | Blissful Lemon 🍋🌺 (@ablissfullemon) on CodePen.33690
Click on the HTML, SCSS, and JS buttons in the embedded pen above to see the code. This works best on desktop, so if you are having trouble, please try switching to a larger display or view the pen directly in your browser.
The original UI design was based entirely only a fixed-width concept for the entire design. The colored section containing the logo and text was intended to be approximately 33% of the entire width of the container, while the form section on the right contained the rest.
Moving into the physical design, however, I decided to take a much more flexible approach as responsive design is growing more important. As such, I used a CSS flexbox in the main container, which contains two elements – one for the left (colored) section and one for the right section. I also modified the main container so that it is no longer a fixed-width of 800px but rather takes up 80% of the display width. This ensures that the container has a bit of padding around the sides but can flex with the display size.
Finally, I added a bit of JavaScript to check to see if the required conditions have been met for each of the input elements, both when the ‘Sign Up’ button is clicked and when any change to each element is made. If you hover over the corresponding ‘X’ when there is an error, it specifies what the error is in the area above.
Be sure to let me know what you think in the comments!