Organic themed webform
Overview
As part of a coding bootcamp project submission I was asked to design and develop a webform that scared across mobile and desktop. This was sketched, designed in figma and developed with HTML, CSS and javascript.
The brief
As a coursework submission for Free Code Camp I had to complete a design and development of a webform that was scalable across mobile and desktop. The form had to feature key html input components including:
-button (submit)
-radio buttons
-checkboxes
-text input
-numeric input
-email input
The form also had to feature an image as well as make use of appropriate semantic markup.
The process
The form was initially sketched with key input components designed after the initial theme and colour scheme had been decided.
These were then included in the form layout designed to feature a half width image to the left that would flex across the top of the page on mobile. This worked well when in operation and provided a similar experience across devices.
The design features shades of lime green and complimentary 'customer service' style image supporting an organic and sustainable aesthetic. The lime green has been used for interaction feedback like button hover states and input marked states. The colour green was chosen to convey a relaxed, natural and safe feeling with users. The type face chosen was Futura, a sans serif type face that has options with font weights that works well when being read on screen and providing enough contrast between body text and input labels.
Once designed and prototyped in figma it was then ready to develop in firstly in creating the semantic markup in html and then adding styling to the page structure and form components. This was then tested in mobile after creating the media queries to allow small screens calling.
The outcome
The form passed all front end tests and was successfully submitted as part of my front end development web certification portfolio. You can view the code for this project here: https://github.com/dougdevelopment/free-code-camp-survey-form
Organic webform prototype in Figma
