View the live project here.
This website has been created as my submission for Milestone Project 1 for the Code Institute. It is for the Irish company Water Stations Ireland. The company are looking to create an online presence for their business and to increase the sales of their water stations. The website is designed to be both accessible and responsive on a range of devices in order to create navigation ease for potential customers looking to find more information about the company and/or to enquire about their products.
- As a potential customer, I want to learn about the company, their values and their goals.
- As a potential customer, I want to find detailed descriptions and clear images of the Water Stations the company offers.
- As a potential customer, I want to easily be able to contact the company for further information.
- As a potential customer, I want to easily navigate through the website.
- As a potential customer, I want the website to be responsive on whichever device I’m viewing it on.
- As a potential customer, I want to explore a clean and professional website.
The target audience for this website would be potential customers looking to enquire about and purchase sustainable Water Stations. Potential customers would include Local Authorities, Government Bodies, Business Owners, Schools/Universities.
- Establish an online presence for Water Stations Ireland.
- Increase direct enquiries and purchases through the website.
- Have a functional and responsive website with a clean and professional look.
- Inform site visitors about who Water Stations Ireland are and what they do.
- Provide information on the sustainability of the company and products.
- Provide detailed information about the Water Stations on offer and the different options and features available.
- Showcase images of the Water Stations.
- Keep product prices off the site to encourage potential customers to contact the company for a quote.
- Provide a simple means for potential customers to make enquiries.
- Information section about the company and their ethos must be provided.
- Images of the Water Stations must be displayed, accompanied by detailed descriptions of the different options offered.
- A clear means of contacting the company must be provided via a contact form and a display of the company’s phone, email and social media accounts.
- The company wants their logo on display and so it will remain fixed to the top of the page consistently across the site.
- Being a member of Guaranteed Irish is an important selling-point for the company and so that logo will be on display in the footer consistently across the site.
- A fixed navigation menu must be included to always allow users to make their way through the site easily.
- The site must showcase the professionalism of the company and so it must have a clean and modern layout and design.
- The site must be visually consistent to make users comfortable.
- The site must be responsive across different devices.
- A map showcasing where Water Stations have already been purchased and installed will be left as a feature to be implemented and so will not be included in this release.
- A gallery page showcasing images of the differed types of Water Stations available will be left as a feature to be implemented and so will not be included in this release.
- The company's Terms and Privacy Policy (available as external links) will be left as features to be implemented and so will not be included in this release.
The website will consist of four separate and structured pages; Home, About, Products and Contact. Each page will be consistent in terms of layout and design so that the user is comfortable. The same navigation menu and footer will be present across all pages to allow for navigation ease. Three of the four pages will contain the same hero image. The Home page will differ slightly and will have a hero video rather than image with the company slogan “Ireland’s Premier Water Stations” displayed on top. All of this will apply to the site across all devices.
- Will contain an introduction telling the user who the company is and what it is that they do.
- Will contain an image of a Water Station so the user can become familiar with their appearance immediately.
- Important to introduce the purpose straight away so that a user knows immediately what to expect from the site.
- Will contain information about the company’s values and goals.
- Will contain information about the sustainability of the company and its products.
- Important to have this information clear on the site so that a potential customer knows if the company’s ethos aligns with their own.
- Will contain detailed information about the different Water Stations available and the different options they offer.
- Will contain different images of the Water Stations.
- Important to include this so that a potential customer can see real-life images of the products they’re interested in and clear information about what is included with each type of Water Station.
- Will contain the company’s phone number, email, address and social media links.
- Will contain a form for users to fill out with fields for Name, Phone Number, Email, Message and a Submit button.
- All form fields will be required.
- Users will be alerted if any of the required fields are left blank or filled out incorrectly.
- Will remain fixed to the top of each page for consistency across all pages and devices
- It will take on a hamburger menu style on smaller devices for a cleaner appearance.
- Will contain clear names of each site page for navigation ease.
- Will remain fixed at the bottom of each page for consistency across all pages and devices.
- Will contain the company’s contact information; phone and email, as well as a link to the contact form on the Contact Page.
- Will contain links to the company’s social media accounts; Twitter, Facebook and Instagram, in the form of the appropriate icons.
- Will contain two logos as requested by the company; their own and Guaranteed Irish.
- All links will change colour when hovered over to make it clear to the user that they are links.
- External links, i.e. to social media accounts, will open in a new tab so that users will not have to leave the site.
- Internal links will all work and lead the user to the correct place within the site.
- The company logo will also act as a link to the Home Page.
All wireframes were created using Balsamiq.
Please find full PDF versions of all wireframes and sketches below:
- Mobile Wireframes
- Tablet Wireframes
- Desktop Wireframes
- Initial Mobile Sketch
- Initial Tablet Sketch
- Initial Desktop Sketch
The overall design for the site will be clean and simple, allowing users to discover the information they need without being distracted by flashy colours or imagery. It’s important that a professional feel is portrayed by maintaining consistency in the design throughout. Water plays a large role in the design which helps to create a clear and flowing site.
I was provided with the main colour the company use for their logo; #1F89E0. I used this as my base to build a colour scheme using Coolors.co as seen below. As the company wanted a professional and clean look for the site I chose to keep the scheme simple, nothing too bold to distract the eye. I also felt it was appropriate to stick to blue tones to represent water which is, of course, the main element at play for this company. This video on the Home Page was also chosen for this reason, the colours work well with the overall crisp tone of the site.
- #1F89E0 Bleu de France
- #FFFFFF White
- #0C375A Prussian Blue
- #161412 Smoky Black
It was important to ensure legibility of the text on the background it would be displayed on so I also used Contrast Checker on Coolors.co to ensure there would be no issues with my chosen palette.
The company use the font Montserrat in their brochures and logos and so I decided to keep this as the font for the headings and navigation menu for consistency. I opted for Raleway as the secondary font for the main content on the site as the two fonts work well together to create a sleek and modern look.
For the landing page, I used a video of a water droplet from Coverr.co. I chose a video, and this one in particular, as I wanted the landing page to have some fluidity. The simple water drop helps to set the tone of the site while acting as the backdrop to the company’s slogan, "Ireland’s Premier Water Stations".
For the remaining three pages the video is replaced by a hero image. I felt the video would be too repetitive if added across all pages and so I chose an image instead. The same opaque overlay and title format used however, keeps the design consistency flowing.
Instead of using the same hero image across About, Products and Contact Pages, I ultimately opted for three different images; one for each page. This would help to differentiate the pages; separating them and further representing that each page covers something different. I did however, want to maintain a consistent design in order to keep the user comfortable and so I chose three images from a photo series by the same photographer (see Media Credits). In doing this there is a nice design flow throughout the site with all the images leading on to each other. Each of the images contains the same opaque overlay and heading style as the video from the Home Page; reinforcing design continuity.
The website has a clean and visually consistent design throughout and is responsive across devices. Information is separated out through the different pages, with each page serving its own purpose. Only information relevant to the company, their ethos and their products is provided so as not to overwhelm users with unnecessary content that would distract from the purpose of the site. Every page contains the same footer and header.
- Contains a muted, looped video which autoplays once a user lands on the page. The video has an opaque overlay with the company slogan on top.
- Clear and concise information about Water Stations Ireland and what they do is provided straight away so that users immediately understand what the site is going to be about.
- A photo of the company's product is provided so that users can become familiar with their appearance and design.
- A link to the Products Page is provided giving users the option to skip through the site.
- Contains a hero image with an opaque overlay. The heading on top gives insight into the kind of information users can expect on the page.
- Clear introduction about the Water Stations and their advantages is provided, allowing users to decide whether this is the kind of product they're looking for.
- Another image of the product is provided to further familiarise users.
- Clear and concise information about the company's mission/ethos is provided so that users know whether their beliefs align.
- Contains a hero image with an opaque overlay. The heading on top reinforces the company's ethos.
- Clear and relevant technical information about the different products on offer is provided to allow users to gain a firm understanding of what is available.
- Multiple images of the products are provided for each different product option, helping to reinforce the information being supplied.
- Contains a hero image with an opaque overlay. The heading on top provides a call to action to contact the company.
- Various means of contact are provided including links to social media accounts, allowing users to choose the method that works best for them.
- A contact form is provided, allowing users to fill in their own contact information and their enquiry.
-
Header Logo
- The Water Stations Ireland logo contained in the top left of the header exists on every page of the site and on every device, allowing users to become familiar with the company brand.
- This logo acts as a link to the Home Page, allowing users to always and easily return to the start of the site.
-
Navigation Bar
- The navigation bar is contained in the header and exists on every page of the site and on every device, allowing users to easily navigate through and ensuring that there is no location within the site that they could not return from.
- It contains clear names of each site page (Home, About, Products, Contact) to ensure users know what kind of information to expect; allowing them to quickly find the content they're looking for.
- On tablet and mobile devices this collapses into a familiar hamburger menu in order to maintain a cleaner design. When clicked, this menu expands to show the list of site pages.
- On both full and collapsed menus, the active page is a bolder and darker font, allowing users to easily recognise which page they are on. When other pages are hovered over, the font colour changes, confirming to users that it is a link.
-
Social Media Links
- Three social media links for the company's Facebook, Twitter and Instagram accounts exist in the footer on every page of the site, on every device and also on the Contact Page, giving users the option to learn more about the company and/or follow them on social media.
- All three links are in the form of the appropriate and familiar social media icons, allowing users to know which platform they can expect to be brought to.
- In both the footer and the Contact Page the links are located below a call-to-action message inviting users to connect with the company. This message is hidden in the footer on mobile devices to maintain a cleaner design.
- When each icon is hovered over, the colour changes, confirming to users that it is a link.
- When clicked, all three links open in a new tab ensuring the user does not lose their way back to the site.
-
Copyright
- "© Copyright 2020; Water Stations Ireland" exists in the footer on every page of the site and on every device, protecting the company's content.
-
Footer Logos
- The Water Stations Ireland logo exists in the footer on every page of the site and on every device, allowing users to become familiar with the company brand.
- The Guaranteed Irish logo exists in the footer on every page of the site and on every device, reminding users that this is an Irish-owned company, something which is very important to the company.
-
Contact Information
- The company's phone number and email address exists in the footer on every page of the site and on every device, allowing users to easily contact the company if they wish to do so.
- The company's phone number, email address and their base locations are located in the Contact Page on every device, allowing users to easily contact the company if they wish to do so.
- The phone number in both the footer and Contact Page acts as a link and, when clicked, brings the user to a method of making a call; whether that is their keypad on mobile devices, or an app/method of making phone calls on tablets or desktop. This makes it easier for users to call the company if they wish to do so.
- In both the footer and Contact Page the contact information is located below a call-to-action message inviting users to contact the company. This message is hidden in the footer on mobile devices to maintain a cleaner design.
- An internal link to the Contact Page exists in the footer on every page of the site and on every device. This link is within a call-to-action message inviting users to make an enquiry. When hovered over, the font colour of the link changes, confirming to users that it is a link.
-
Contact Form
- A contact form with fields for Full Name, Phone Number, Email Address, Subject and a Submit button exists on the Contact Page on every device. This allows users to contact the company with their question/enquiry and to provide their own contact details for the company to reach out to them with the answer or information requested.
- Each field has a label ensuring users know what information should be entered.
- Each field is required and upon clicking the Submit button, if any field is left blank, users are alerted to this via a "Please fill out this field" message which will appear beneath the empty field. This allows users to easily see and understand why they cannot submit the form.
- Users are alerted if the Email Address field is filled out incorrectly, i.e. wrong format, missing a "." or "@". If incorrect, users are alerted to this via a message which will appear beneath the field explaining what the problem is. This allows users to easily identify and fix the mistake.
- Users are alerted if the Phone Number field is filled out incorrectly, i.e. they have entered letter(s) when only numbers, "-" and "+" are allowed. If incorrect, users are alerted to this via a "Please match the requested format" message which will appear beneath the field. This allows users to easily identify and fix the mistake.
- As there is no JavaScript in this release, the contact form on the Contact Page does not store any data.
-
- An interactive map which allows users to see where Water Stations are already installed and in-use. This would benefit prospective customers as they could easily locate and, if desired, visit these locations; allowing them to view the product in person. The map could also be beneficial to users looking for places they can refill their own water bottles.
-
- A full Gallery Page which allows users to see a range of images of the different options of Water Stations available, including images of where these stations are currently installed. Again, this would be a benefit to potential customers allowing them to see a full range of products on offer. The company does not, at this time, have sufficient images of the products to create such a gallery.
-
- Have the entered form data submitted and generated into an email that will be sent to the company.
- Add a CAPTCHA to the contact form to protect the company from spam.
-
- The company has not yet finalised the documentation for their Terms and Privacy Policy. At a later date they will be accessed on the website via links in the footer. In this release, these links are empty and, if clicked, will keep the user on the current page.
-
- Implement various features required for the website to fully comply with EU data-protection laws, including but not limited to, adding a cookie notice and adding a checkbox in the contact form that must be ticked by the user to confirm they accept the Terms.
- HTML5
- CSS3
- Adobe Illustrator - used to create the company logos.
- Adobe Photoshop - used to edit and resize all images for web.
- Am I Responsive? - used to create the multi-device image found at the top of this README.
- Balsamiq - used to create wireframes.
- Bootstrap - used throughout the website for responsive layouts across devices and various styling.
- Coolors - used to choose colour scheme and for contrast-checking of chosen colours.
- Font Awesome - used icons to create social media links.
- Git - version control software used to commit and push code to GitHub.
- GitHub - hosting site used to store the source code of the site with GitHub Pages used to deploy the live site.
- Google Chrome DevTools - used for inspecting various page elements and identifying any layout issues/bugs.
- Google Fonts - selected Raleway and Montserrat fonts.
Testing information and content for this project can be found in the separate TESTING.md file.
This project used the Code Institute's student template. A new repository named ms1-waterstationsireland was created which included all branches from the template. The project was developed using the IDE GitPod. Version control software Git was used to commit and push the code to GitHub where it was stored. The following commands were used for this:
- git add filename/directory - This command adds files/directories to the staging area to be committed.
- git commit -m "message here" - This command commits files/directories to the repository. Commit messages should clearly explain the update being committed.
- git push - This command pushes all committed updates/changes into the GitHub repository.
To deploy to GitHub Pages these steps were followed:
- Log into GitHub.
- Navigate to the Repositories tab.
- Choose the desired repository.
- Navigate to the Settings tab underneath the repository name.
- Scroll down until you reach the GitHub Pages section.
- Under Source click on the None drop-down menu and choose master branch.
- Click Save and the page will refresh automatically.
- Scroll back down to the GitHub Pages section.
- You'll see "Your site is published at" followed by the site link.
- The website has been deployed.
In order to make a clone, follow these steps:
- Log into GitHub.
- Navigate to the Repositories tab.
- Choose the desired repository.
- Above the list of files, click on the Code drop-down menu.
- Copy the clone URL under the HTTPS tab.
- Open a terminal window in your IDE of choice.
- Change the working directory to whichever location you want the cloned directory to be in.
- Type git clone and then paste the URL that you copied earlier.
- Press enter.
- Your local clone has now been created.
- All written content contained on the site was either provided by Water Stations Ireland or written by me in collaboration with the company.
- Code for hero images was taken and adapted from w3schools.com.
- Code for hero video was taken and adapted from w3schools.com and css-tricks.com.
- Water Droplet video on Home Page can be found at Coverr.co.
- Plastic bottle image on About Page by Brian Yurasits on Unsplash.
- Hero images on About, Products and Contact Pages by Elias Maurer on Unsplash.
- Water Stations Ireland logos were created by me in collaboration with the company.
- All other images were provided by Water Stations Ireland. I was granted full permission for use.
- The company, Water Stations Ireland, for giving me the opportunity to develop their business site and for providing me with any information or images I requested of them.
- My mentor, Spencer Barriball for his helpful feedback and advice for this project.
- The Slack community for any questions they helped me to answer, and feedback they provided.
- Friends and family who viewed the website on their own devices and provided any feedback where necessary.