At the end of our third week on the School of Code bootcamp, we were tasked with using UX and UI principles to design and plan a landing page for a finctional business.
We had to create user stories, user personas, user journeys, lo-fi and hi-fi wireframes, and write plan for how we would code the design.
As a pair we used tools such as Miro and Figma to implement our wireframes.
This exercise taught me the how much thought and work goes into the design aspect of creating websites and apps, and that the users should always be the emphasis of any design and tech choice.
Coding Plan:
/*
CSS coding plan
Set up colour variables in root
--primary-colour: #fff;
--button-colour: #124e78ff;
--button-secondary-colour: #dadff7ff;
--title-colour: #508716ff
--main-text-colour: #000;
--button-text-colour: #fff;
--border-main-colour: #000;
Re-usable components
- banner div
-title
-text
-button
- navigation links (font size, font type, colour)
- navigation bar
- buttons (font size, font colour, background colour, border radius)
- logo image
- left/right buttons
- social media icons
-
Accessibility concerns
- make sure we have alt text for images
- make sure we title our icon links & logo in the html
- use semantic html tags - header, main, nav, section, footer
Responsive concerns
- use vh and vw, and percentages for width/height, padding, etc
- use flexbox to structure page
Plan of code
Write html content first with semantic containers
CSS style reset
Split it into 4 sections in the main container: header, nav, section and footer
Use flexbox columns to get the overall layout of above
Start styling reusable components
- eg nav bar
- Go from high level to low level
e.g. root, then structure containers, then body, then individual components
- Use block comments between different logical sections above
*/
/*
CSS Reset
*/
/*
Page structure
*/
/*
Body - font sizing, colour, type
*/
/*
Individual components
*/
Credits: Craig Summers and Simon Bowen