Milestone Floristry Website

In this project, I am to build a static front-end site to present useful information to users, using all the technologies that I have learned about so far.

For this project, I will be creating a lite and elegant website for a startup Floristry company that has been providing floral arrangements the past two years. The website will increase company profile and showcasing the florists range of products and services as well as providing inspiration and advice.

UX

The Website is for anyone that wants floral arrangements for the home special occasion or as a gift. The website will also provide advice and information on seasonal flowers as well as aftercare, plus inspiration and design ideas for special events.

• As a user, I want to see past flower arrangements.
• As a user, I want to know of any special offers.
• As a user, I want to get quotes for flower arrangements.
• As a user, I want advice on flower arrangements.
• As a user, I want to be informed of money off deals.
• As a user, I want to know what flowers are in season.
• As a user, I want advice on flower arrangement aftercare.

Wireframes/Mockups

Please find paper and pen wireframe for initial design here

Please find paper and pen wireframe for updated design here

Features

Global features

On all pages, the site-wide banner will appear at the top of all pages. It has it's divided into two parts, the left will display a strapline along with a link back to that document. On the right has the link to the sign-in page and sign up page. Below the site-wide banner will be the navigation bar which has the same state and position on all pages. The layout of the navbar will be responsive depending on the user's device size and orientation.

Index features

The index page design is a sleek, compelling landing page that offers immediate access to all the categories of bouquets. The index page also provides short clips from articles taken from the news and tips page.

About features

The about page will profile the owner's journey what inspired and encouraged her to start along this path.

Ranges features

Ranges are broken down into four pages seasonal, weddings, funerals and gifts. All the above pages will have an image gallery of pre-arranged bouquets that the user can view the bouquet selected in more detail along with additional images of the bouquet form different positions. The user also has the option to see similar bouquets based on price flowers and seasons.

News and Tips features

The news and tips page will display interesting flower related news and stories as well as tips and hacks on flower care.

Contact features

The contact page will have a name email and comment input and just below will have a submit button.

Future implentations

In future, the owner would like the user to be able to buy and track their bouquet.

Existing Features

Features Left to Implent

Technologies Used

• HTML
• CSS3
• Bootstrap 4
• Fontawesome

Testing

All code used on the site has been tested across multiple devices via DevTool option in Chrome. It has also been tested on multiple browsers for compatability and responsivness to ensure everything is working as expected Site viewed and tested in the following browsers: Google Chrome Safari Internet Explore

Deployment

This site is hoseted using GitHub Pages, deployed directly from the master branch.

Credits

Content

• The majority of the text was taken from all the pages of milestonefloristry.com and the remaining text is Lorem.

Media

• The photos used in this site were obtained from Pixels and water marked photos provided by client.

Acknowledgements

• The information used to create this site was from a number of sources
• W3schools