Skip to content
/ dublin-hills Public

Code Institute - Milestone Project 1. This is a HTML/CSS project used for educational purpose. This project represents the landing page of a new housing development.

pinco227.github.io/dublin-hills/
1 star 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

pinco227/dublin-hills

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

92 Commits
assets
assets
 
 
docs
docs
 
 
404.html
404.html
 
 
404.md
404.md
 
 
README.md
README.md
 
 
TEST.md
TEST.md
 
 
index.html
index.html
 
 
lugmore.html
lugmore.html
 
 
montpelier.html
montpelier.html
 
 
three-rock.html
three-rock.html
 
 

Repository files navigation

logo Dublin Hills

This is the presentation website for a new Housing Development that offers a good lifestyle support for families. The main goal is to get the interested user to book a viewing. Dublin Hills is an educational project made to serve as a Milestone Project for the Software Developer Diploma programme of Code Institute.

Table of Contents

Demo

Live website

Responsive Mockup

UX

  • Business Goals

    • The main goal of any business is to sell the product. In this case the product is the 3 presented houses built throughout the estate.
    • Target and reach users that are members of a family with children.
    • Have a list of interested people by making viewing appointments.
    • Promote and present the 3 house models and their features/specifications.
    • Promote and present the estate's and area's features and specifications.

  • Users Goals

    • Have a good lifestyle by living in a safe and quiet place along with their families.
    • Have access to essential services and amenities such as cleaning, childcare, schools, transportation, shopping and businesses.
    • Have options and details about the houses.
    • Have details and specifications about the place and location.
    • View the desired house and place in person.

  • User Scenarios

    • As a user I need:

      • to easily understand the purpose of the page.
      • to easily navigate throughout the content.
      • to first be able to see the information on my mobile and then share it with peers on a bigger screen.
      • to find detailed information about the desired product.
      • to find information about who the business is and where to find them, this will give me trust.
      • to be able to contact the business and its contributors.

    • As a parent I need:

      • to find information about the safety.
      • to find information about child services within and around the estate/area.
      • to find information about leisure and activities within and around the estate.
      • to find information about why should I choose to live here.

    • As a worker I need:

      • to find information about transportation.
      • to find information about career opportunities around the area.

  • Structure

    The website is designed to be consistent, intuitive and learnable.
    • Interaction design
      • For predictability, the interface interacts with user actions as the user expetcs. The scroll/swipe actions respond with the normal behaviour and buttons acts instantly on press.
      • For consistency, the interface offers a subtle visual feedback to the user (on hover, focus and press of buttons and fields) which is similar throughout the application and helps the user to quickly learn the functionality.
    • Information architecture
      • The content is organised and prioritised by importance from top to bottom and left to right.
      • For consistency, the information is presented in the rule of 3 on large screens and individual on small screens.
      • The information is structured mostly in nested lists and hub and spoke design for bigger screens.

  • Skeleton

    • Initial wireframes

    • Improvements

      • Landing Page:

        • Features section:

          • A main brochure pdf download button right under the section title.

        • Site layout section:

          • A short description about the location and a map before the site plan subsection.
          • Travel times subsection after the site plan.
          • General technical specifications subsection.

      • House Details Page:

        • Presentation section:

          • Book a viewing modal toggle button.
          • A house brochure pdf download button.

        • Other homes section:

          • A new section representing the other two house on each house page instead of the go back button.

  • Design Choices

    • Colours

      Colour Palette
      • The colour palette consists of warm and welcoming colours inspired by the "Eye Comfort" reading mode in most of the screen devices.
        Colour Psychology Wheel
      • According to The Psychology of Color, the chosen colours represent desire, cheerfulness, stimulation and comfort.
      • The 60-30-10 Rule was also taken into consideration when building the project. The light shades which are used mostly for background are considered neutral and makes up to 60% of the palette. The dark shades are complementary and makes up to 30% while the accent colours completes the remaining 10% of the design.

    • Typography

      There are two fonts used throughout the project, both with a serif fallback. These font-faces inspire classiness and elegance:
      • EB Garamond is used as a general font.
      • Merienda is used for brand text, footer headings and all h1 and h2 headings in the project.

    • Media

      • The main call to action section is using an attractive video as background which inspires to family, happiness and joy and it has a photo background as a fallback for devices that are not compatible with autoplay videos and for the cases when the video is not loaded for any reason. The fallback image is a stop-frame of the video.
      • The rest of the images used throughout the project are in relation with they're containing section.
      • All images are sized and compressed for the best UX flow.

    • Iconography

      • Icons are used throughout the project to help user understand more efficiently the meaning of the content. They are a very good asset to improve UX.

Features

Website's features are presented in an importance order.

  • Navigation bar

    Allows users to navigate through the page. As the website is mainly a single landing page, the navigation will be visible all the time.

  • Full width Call To Action (CTA)

    Allows users to understand the page purpose in the first look. Attracts users by giving on-point bite-size information. Allow business to acommplish the main goal by providing users with the viewing posibility. This is only showed on 80% of the screen height, the remaining 20% are left visible on purpose to let users know there is more content and to invite them to scroll through it. On the bottom of the CTA is an animated arrow inspired by the social networks stories which invites users to scroll down/swip up. This arrow is also clickabe and will scroll down when clicked, bringing user to the Features section.

  • Book a Viewing Modal Form

    Allows interested users to book a viewing by having them fill the provided form.

  • Housing Estate's features section

    Allow users to learn the main features of the presented product. These are ordered by importance. This also allows users to download the full pdf brochure by clicking the download button under the title.

  • A list of the 3 house models

    Allows users to find the 3 house types and they're main photos, few imporant features and a button for more details. This button brings the user to the house's own details page.

  • Details page for each house

    Allows interested users to find additional information for each of the 3 presented houses by visiting they're unique page. This pages have the following features ordered by importance:

    • Presentation

      This section present the house main photo, the most important features and 2 large buttons:
      • Book a viewing
      • Download House Brochure

    • A gallery of house plans

    • Full technical specification list

    • A gallery of photos

    • A list of the other 2 houses for quick access.

  • Site section

    Allows users to find more details about the housing estate by presenting these subsections:
    • Site Map with a brief location description.
    • Site layout with legend.
    • Travel times.
    • General technical specifications.

  • A photo gallery

    Allows users to visually understand more about the presented product.

  • Contact section

    Gives users information about the contact details of the site's developer, estate agent and solicitor. Provides a contact form for any queries.

  • Footer

    Reminds users to book a viewing if interested by clicking the modal toggle button. Allows users to find more information on social networks by clicking the social icons.

  • Accessibility

    Images are provided with descriptive text. The website is optimised for screen readers and allows users with impaired vision to zoom at any point.

  • Features left to implement

    • 360 house viewing.
    • close modal and lightGallery with browser/device back button.

Technologies used

Testing

Click Here for Full Testing Process

Overview

Deployment

  • GitHub Pages

    The project was deployed to GitHub Pages using the following steps:
    1. Log in to GitHub and locate the Dublin Hills Repository.
    2. At the top of the Repository, locate and click the "Settings" Button on the menu.
    3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
    4. Under "Source", click the dropdown called "None" and select "main" branch.
    5. The page will automatically refresh.
    6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

  • Forking the GitHub Repository

    By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:
    1. Log in to GitHub and locate the Dublin Hills Repository.
    2. At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
    3. You should now have a copy of the original repository in your GitHub account.

  • Making a Local Clone

    1. Log in to GitHub and locate the Dublin Hills Repository.
    2. At the top of the Repository just above the list of files, locate and click the "Code" dropdown.
    3. To clone the repository using HTTPS, under "Clone", make sure "HTTPS" is selected and copy the link.
    4. Open Git Bash.
    5. Change the current working directory to the location where you want the cloned directory to be made.
    6. Type git clone, and then paste the URL you copied in Step 3.
    $ git clone https://github.com/pinco227/dublin-hills.git
    1. Press Enter. Your local clone will be created.
    $ git clone https://github.com/pinco227/dublin-hills.git
Cloning into 'dublin-hills'...
remote: Enumerating objects: 408, done.
remote: Counting objects: 100% (408/408), done.
remote: Compressing objects: 100% (258/258), done.
remote: Total 408 (delta 156), reused 368 (delta 116), pack-reused 0
Receiving objects: 100% (408/408), 24.92 MiB | 15.71 MiB/s, done.
Resolving deltas: 100% (156/156), done.
    Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Aknowledgements

  • My Mentor: Nishant Kumar for continuous helpful feedback.
  • Tutor support at Code Institute for their support.
  • Slack Code Institute community for feedback.
  • Peer student: Alexandru Valentin Grapa for helpful feedback along the coding progress and for help with iPhone device testing.

About

Code Institute - Milestone Project 1. This is a HTML/CSS project used for educational purpose. This project represents the landing page of a new housing development.

pinco227.github.io/dublin-hills/

Resources

Readme
Activity

Stars

1 star

Watchers

2 watching

Forks

1 fork
Report repository

Languages