The image is from Am I responsive?
This project is a single-page website showing the main lifehack categories and lifehacks inside. The page features four different lifehack categories: Computer hacks, cleaning hacks, household hacks and food hacks. I’ve considered these lifehack categories as they are the main subject in our daily lives.
The goal of this website is to provide the user with ways to improve the simple tasks carried out daily. The information is presented in a simple manner whereby the user can find the category for the hack he wishes to find, he can click on it and then be brought to the information. If the user wants to explore a new area, the UI is designed to allow him to click on a button and be immediately brought to the navigation menu.
I designed this page with UX in mind. The buttons for each category is designed with large text and with a large target area. The user can easily click or tap and they are brought to the relevant location on the page.
Information is presented in chunks as this allows the user to see the information clearly. The colours are chosen purposefully for UX. Having a high contrast in the title (white against brown) draws the users' focus. The text is semi-bold as this makes it easier to read.
- English speaking
- Someone who is in the age group of 20-30
- Someone who is looking for ways to improve their productivity and speed at which tasks are carried out.
I included the following features on the website:
#Header containing main logo and the nav bar including Computer Hacks, Cleaning Hacks, Household Hacks and Food Hacks. Signup form is added at the bottom to allow the user to receive lifehacks via email.
This website is a single-page website and users can access the required information without having to wait for the page to reload.
https://github.com/soconne339/soconne338-project1/blob/main/Project_wireframe.pdf
This website has passed the following validations:
W3C Validation — https://validator.w3.org/
Jigsaw CSS Validation — https://jigsaw.w3.org/css-validator/
An issue with the anchor tag at the bottom of each section working correctly to bring the user back to the navigation page.
- This issue was resolved by changing the href to # to bring the user back to the top of the page.
An issue with getting index.html to link with the external stylesheet style.css.
- This issue was resolved quite easily after deleting the existing style.css and reuploading
An issue with centering the container element with the body.
- Was unable to centre the content. I tried many times to update the code without any luck.
The majority of the lifehacks for this project are found in the book “Lifehacks” by Keith Bradford.
Other hacks came from YouTube Channel Household Hacker — (https://www.youtube.com/channel/UCI4I6ldZ0jWe7vXpUVeVcpg)
Youtube video — “How to Cool a Drink in 2 Minutes”, Dave Hax, https://www.youtube.com/embed/H6ncuv3gewI
My wife Carmel provided me with some of her cleaning hacks.
Thanks to my Mentor for guiding me in carrying out this project.
- As a new user I was able to find the information I needed - Male Age 30
- As a new user I found the logo overpowering and the colour scheme wasn't to my taste - Female age 38.
- As a new user, I was able to find exactly the information I require. I would have preferred the signup form to be more visible. - Male age 72
- Adobe Dreamweaver
- Adobe Photoshop
- Github
- 13inch Apple Macbook Pro