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.
Title: Code Fizz Sign Up Page
Client: Code Fizz (Conceptual)
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
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.
Be sure to let me know what you think in the comments!