Interior Design is an imagined company in Athlone, Ireland. This website was created for educational purposes as part of the Code Institute Diploma in Full-Stack Software Development. The project is for individuals seeking to enhance and transform their homes and for anyone interested in interior design.
Live Preview Of Interior Design
- INTERIOR DESIGN - CI Project 1
- Table of Contents
- UX
- Wireframes
- Technology used
- Testing and Validation
- Deployment
- Credits
- Visually appealing.
- Effortless Exploration.
- Informative Content.
- As a user, I want to navigate the website using multiple devices and access social media.
- As a user, I want to find general information about Interior Design.
- As a user, I want to learn more about Interior Design's work.
- As a user, I want to be able to easily contact the website and see contact details.
- As a user, I want to apply for free consultation.
- Attract more customers to Interior Design company.
- Inform customers about Interior Design's services.
- Inform customers about Interiors Design company.
- Show customers Interior Design's gallery as a portfolio.
- Easy to navigate on various screen sizes and search engines.
- Clear and precise information about Interior Design's company.
- Simple method of contacting the website.
- Visually appealing design maintained through all web pages.
- I expect all links to social media sites to be opened in a new tab.
- I expect all navigation links to work correctly.
- I expect screen size not to affect the quality of the website.
- I expect all information to be correct and accurate.
In an effort to impart a sense of simplicity and a user-friendly aesthetic to the website, I have seamlessly integrated Google Fonts, Hind Guntur and Montserrat Alternate, with a sans-serif fallback. This approach is aimed at ensuring a user-friendly appearance.
- I have opted to use open-source materials for icons, provided by Font Awesome.
- For the favicon, I used an icon from the Canvas and then converted it using favicon.io.
As for colors I decided to match them with hero images using Image Color Picker.
Use of various colors will explain below.
- #fff1dc – Tis color will be used for header, to harmoniously match with hero images across the website.
- #698aab - This color will be used for active navigation bar underline, to provide clear user guidance throughout the website.
- rgb(250, 250, 250, 0.6) (transparency of #fafafa) - This color will be used for hero texts background.
- #384e6a - This color will be used for borders, shadows, color for submit button and background color as hover effect and footer background.
- rgb(56, 78, 106, 0.4) (transparency of #384e6a) - This color will be used for contact form background and thank you page text background, to maintain visually appealing look.
- #dedede - This color will be used for home page button hover effect, submit button color and as hover effect buttons background. Additionally, it will be used for the icons and text in the footer, ensuring harmonious design.
- #a8e265 - This color will be used for navigation bar as background color before transition, complementing the green plants in hero images for a visually pleasing experience.
- #cd7c0c - This color will be used for navigation bar as background color after transition.
- #000000 - This color will be used for text.
- #eff3f6 - This color will be used as the theme color, contributing to a light and neutral color palette throughout the website.
My website development will follow a mobile-first strategy, as instructed in the Love Running Project, with a focus on smaller screens initially. I will commence styling for the Samsung Galaxy Fold, which has a width of 280px. To ensure responsiveness, I will rely on common standard media query breakpoints for responsive web design.
For structuring the website layout and design, I have chosen Figma. My aim is to create a user-friendly website that maintains its design consistency across all pages.
I designed the header in alignment with the Love Running Project, featuring the h1 logo on the left side and the navigation bar on right side.
For each menu item, I included an active page indicator, shown as a blue underline, to give a clear visual location on the site.
For the purpose of design enhancement, visual appeal, and optimal user experience on screens over 992px, I introduced a hover transform effect with an underline background color transition from #a8e265 to #cd7c0c. This selection harmonizes with the greenery in the hero images, contributing to a cohesive and engaging overall design.
For screen sizes below 768px, I substituted the standard menu with a hamburger icon to enhance compatibility with smaller screens and elevate user interaction.
In my design for the website's footer, I selected a blue color to complement the hero image, aiming to enhance the overall appeal of the webpages and create a harmonious visual experience for users.
In the footer section, users will discover links to social media as well as copyright text.
To align the footer with the header and provide a consistent aesthetic throughout the website, hover effects were implemented for screens over 992px.
The homepage is structured into three sections. The hero section initiates with the quote: "Design is a plan for arranging elements in such a way as best to accomplish a particular purpose." These concise introductions offer visitors a brief overview, providing a fundamental understanding of Interior Design. The message is complemented by an illustrative background image that reflects the essence of Interior Design.
Desktop view
The second section features compelling content designed to inform visitors about the services offered in Interior Design. This engaging content is accompanied by two interior design pictures, enhancing the visual presentation of the information.
Desktop view
The third section comprises four images and a button leading to the gallery. This design allows visitors easy access to view Interior Design's works directly without the need to scroll back to the top of the page. For button on screens larger than 992px, a hover effect has been added to elevate the user experience.
Desktop view
- Mobile view
On the About page, visitors will find information about the company.
The About page is organized into two sections. The first is the hero section, which follows the same design pattern as the home page. The second section provides details about the Interior Designs Company, accompanied by an image featuring the positive team.
- Desktop view
- Mobile view
On the Gallery page, visitors will be presented with images that represent the work of Interior Designs.
The Gallery page is divided into two sections. The initial section follows the same pattern as the home page, featuring a hero image with text. The second section showcases 12 images of meticulously designed kitchens, living areas, bedrooms, and bathrooms. For screens larger than 992px, a hover effect has been added to enhance the user experience.
- Desktop view
- Mobile view
The Contact page will present visitors with a free consultation form along with contact details.
For screens larger than 992px, a hover effect has been added to the submit button for a better user experience.
- Desktop view
- Mobile view
The purpose of the thank-you page/form submission is to confirm to the user that their form submission has been successfully received. The company will contact them within the next three working days.
- Desktop view
- Mobile view
A 404 page will be implemented and displayed if a user navigates to a broken link. A clickable link to the home page will be provided to ensure visitors can easily navigate back.
- Desktop view
- Mobile view
- An infinite autoplay slider will be added to the Home Page.
- Lightbox functionality will be added to the Gallery Page.
- HTML - The structure of the Website was developed using HTML as the main language.
- CSS - The Website was styled using custom CSS in an external file.
- Javascript - Font Awesome Icons were implemented using JavaScript.
- VSCode - The website was developed using Visual Studio Code IDE.
- GitHub - Source code is hosted on GitHub and delpoyed using Git Pages.
- Git - Used to commit and push code during the development opf the Website.
- Font Awesome - Icons were used as the Social media links in the footer section.
- Google Fonts - Google Fonts were used to style the text on the webpage.
- Canva - Icon from Canva was used as favicon.
- Favicon.io - Was used to convert and create favicon files.
- Figma - Was used to create both mobile and desktop wireframes.
- Pexels - Images were sourced from Pexels.
- Image Color Picker - Was used to detect colours in images.
- Convertio - Was used to conver images to webp format.
- Multi Device Website Mockup Generator - Was used to check responsiveness on different devices.
- ChatGPT - Was used to create content and check for grammar.
-
HTML validation using W3C Markup Validation results:
-
CSS validation using W3C Jigsaw Validator results:
- Accessibility testing using Wave results:
-
Lighthouse test results:
- Home Page
- About Page
- Gallery Page
- Contact Page
- Thank You Page
-
Functional Testing:
| Test scenario | Steps | Observation | Pass |
|---|---|---|---|
| Navigation links | Click on the menu links: home, about, gallery, contact. | Navigation links should lead to their respective pages. | Passed |
| Navigation active state | Click on the menu links: home, about, gallery contact. | When a menu link is clicked and the page opens, a blue underline should be visible, indicating that the page is active. | Passed |
| Mobile Menu Icon | Click on Icon | Menu should open and reveal website links. | Passed |
| Contact form submission | Fill in the form fields and subbmit the form | Form should be submitted, and the user should be redirected to thank you page. | Passed |
| Contact form submission - Missing Required Field | Fill in the form leaving one of the requred fields empty | The form does not submit and an Error is displayed to tell the user that the field is required. | Passed |
| Contact form submission - Missing Required Field Email | Fill in the form with the required email field, intentionally without the "@" symbol. | The form does not submit and an Error is displayed to tell the user that the field is required. | Passed |
| Buttons | Click on the button | Buttons should lead to their respective pages. | Passed |
| Footer Social media links | Click on social links: instagram, facebook, houzz, pinterest. | Social links should lead to their respective pages and open in a new tab. | Passed |
| 404 Page | Click on the "Please click to go back" | The user should be redirected to the homepage. | Passed |
- User Story Testing
| User Story | Expected Result | Pass |
|---|---|---|
| As a user, I want to navigate the website using multiple devices and access social media. | The website should open seamlessly on various devices with different screen sizes and across multiple browsers, including Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari. | Passed |
| As a user, I want to find general information about Interior Design. | General information about Interior Design is accessible on the About page. | Passed |
| As a user, I want to learn more about Interior Design's work. | Interior Design's work is easily accessible on the Gallery page. | Passed |
| As a user, I want to be able to easily contact the website and see contact details | Information is easily accessible on the Contact page. | Passed |
| As a user, I want to apply for free consultation. | The form for a free consultation is easily accessible on the Contact page. | Passed |
There are no bugs to fix in the final project.
Deployment to Github Pages
-
The site was deployed to GitHub pages. The steps to deploy are:
- Select the repository from the repository list.
- Go to the 'Settings' tab.
- In the sidebar menu, navigate to 'Pages.'
- Select 'Deploy from a branch' and choose the desired branch.
- Click 'Save.'
- The link to access the deployed page will be displayed at the top of the page.
You can access the deployed Interior Design website here.
Clone the Repository
-
Navigate to the GitHub Repository you want to clone to use locally:
- Click on the code drop down button
- Click on HTTPS
- Copy the repository link to the clipboard
- Open your IDE of choice
- Type git clone copied-git-url into the IDE terminal
The project will now be cloned on your local machine for use.
For readme,
For header, hero section and footer,
- Love Running project
For the header hover underline effect and gallery hover effect,
For contact form,
For contact details section,
For 404 page,
For Images,
For favicon,
For checking grammar and content,