Wild Bunch is a (fictious) high-end florist based in Soho, central London. I wanted to create a strong visual brand for them using beautiful imagery and an upmarket feel.
I created the Wild Bunch logo to reflect the brand's values. I used a hand written font to show the brand's wild and care-free attitude, which I feel would resonate with it's customers who want that little bit of wildness in the middle of the city. I tied this with a graphic of branch to give an immediately relatable image to show that they are a flower shop. The branch is repeated across the site and serve as a logo and a section divider.
I used a subtle grey colour for the typography and spaced out the letters of the words the achieve a high-class feel.
The use of the beautiful flowers for the home and shopping pages again refects the high-end nature of the business. They are deliberately rustic in their style in keeping with the brand values.
A secondary purple colour works in harmony with the grey, and ties in with the full-screen home page image.
The Navigation bar is always visible when you are on the site, allowing for easy navigation to any part, no matter where you first land.
The home button and logo will take you right back to the landing page where you can get your bearings and start your journey.
The home page has a clear button to direct the user straight to the shopping section if they wish. Once there, there are beautiful flower images to entice which are clickable to show more detal and give options on price and a 'Buy Now' button.
The About Us page shows off the owners and their beliefs and services. This builds them up as real people you feel you know about and builds a connection.
The Contact Us box gives the address and contact details, as well as a detailed map of where they can be found.
In the footer, there are links to all their social media, so you can connect with them more.
As a customer, I want to be able to buy some flowers simply and quickly.
I also want to straight away feel as if I can trust this site to give me the service I want, and it's in my price range.
User 1: Well off professional. The user here is a well paid professional or someone with lots of disposable income. They want the best that money can buy, and want to impress people with it. They want to feel that the company matches their expectations of quality and service.
User 2: Couple getting married. The users here are a couple looking for a company to provide flowers for their wedding. They need to know if they like your style and it will fit with their plans. They also need to know if you are within their budget. Weddings are often planned far in advance, so they need to feel that you'll still be around for their big day. They have a lot of money and emotion invested in this, so trust and the long term relationship are important here.
User 3: Last minute surprise. The user here is looking to get flowers as a quick gift for someone. They need to know that you can be trusted to either have the flowers ready to be collected, or get them delivered on time. Convenience and speed are important factors here.
By having the landing page as a beautiful flower image, the user immediately knows that they've come to a high-quality site. By not crowding the home page with clutter, I have created a calm and peaceful feel to make them relaxed and reasured. There is minimal furniture, making it feel more luxurious. Simple use of typography that simply states what the website does, and a large tastful button invites you to start shopping.
I wanted to make it easy for anyone coming to the site to immediately see what was for sale and with just a few clicks to purchase and have it delivered.
Clicking on the Shop button takes the user to a simple, clean grid of bouquets for sale. Tasteful typography under each image gives a name and a starting price for each. I created a very subtle hover over each image to show that it's been highlighed, again keeping the feel upmarket.
If the user is interested in one of the bouquets and wishes to discover more, then clicking on the image reveals a modal. This modal echoes the design of the shopping page, and has a description and a subheading asking to select from the three sizes that you would like, and a large buy now button to entice you. This would (if it where a live link) take you to the basket page where you would be able tp fill in your details and complete your order.
Additionally, with the about Us section, I wanted to introduce and show the personality of the owners and what they believe in and stand for. I feel this helps the user to relate to the sellers as people with principles and standards that they themselves would like to think they have in common. This has images to quickly establish the visual links. There are also a few paragraphs about their humble beginnings and their friendship, their services to show the range of occasions they cater for and about how they are very eco minded, with all their flowers being organically sourced from a local supplier. This makes them into real, passionate and caring people rather than just a faceless business.
We then move down to the contact us section. Again this is clean and uncluttered, and simply gives the address, phone number and an email. There is also an iframe of a Google Map to show their exact locaion.
Then it's on the the social buttons linking you to their various channels. Again these have the same purple hover when the cursor moves over them to match the other buttons.
Lastly I felt the user would benefit from a back to top button (in addition to the logo in the nav bar) to allow them to navigate back to the home page.
These are my original wireframes for my site. They have mostly stayed the same, only the About section on the tablet seems to be different to what I planned.
This holds all the links to the sections of the site: Logo (home button), about us and aontact us. This allows the user to navigate quickly to the relevant section. The bar is set to sticky, so scolls down with the pages, making it easier to navigate, and also show the range of sections all the time.
This is the first page a user comes to, and it has to make a big impact and entice them to want to go further. I used a large beautiful image of flowers to show the type of site it is. I added a large heading telling the user that this site belongs to 'A high class florist in the heart of London', to provide a clear message of the content. There is also a large 'shop' button to take you straight to the shopping pages and get you buying with one click.
This shoping page has a large heading of 'Bouquets' to tell the user what's for sale, and a sub heading urging them to 'choose from any of our beautiful arrangements'. A clean, simple grid holds stylish images of the bouquets,and underneath each image is the name and a price from. A subtle hover tells the user that they have activated the image, and with a click it opens a modal. Each modal show an image of the bouquet, with a description and a selection menu to prompt them to choose from small, medium or large versions. Underneath is a large 'buy now' button for easy instant buying. This would (if it where a live link) take you to the basket page and you would be able to fill in your details and complete your order.
Ideally this shopping page would have more bouquets, and other sections in the same style for different products including house plants, vases and other accessories. The shop button could have a drop down sub menu to link to the various sections.
This page is used to build a relationship with the user and help them feel an affinity to the owners of the site. This shows the type of people they are and what they stand for, and their personalities. This will help make the user form a bond and feel like they want to use them. It will make them into real, passionate and caring people rather than just a faceless business.
This section of the site is there to provide practical information to the user. It gives the address, phone number and a contact email. An iframe with a link to a Google Map of the area helps the user to see their location. The map is able to open in and be explored.
This area also holds link buttons which take the user to the various social sites that the company uses. They have a hover over them to show the user when they are activated.
The logo in the navigation bar is a home button, but it’s also helpful to have this button to take the user instantly back to the home page.
I would like to add more shopping pages to the site. They would follow the same style as the bouquets page, but be selling items associated with a florist. These could be house plants, garden plants, vases, pots, gardening tools and seeds. These would be on a drop down menu from the Nav Bar.
Another idea would be a flower arranging school to be held at the shop. These would be popular for parties or just people with an interest.
- HTML
- CSS
- Bootstrap
- Font Awesome
- Google Maps
- Google Fonts
To test both my HTML and my CSS, I ran them through the W3C validation websites. W3C Markup Validation Service, and W3C CSS Validation Service. This allowed me to catch any problems such as rouge punctuation marks or incorrect code. This helped me go back in and change the errors so my code was more efficient and worked properly.
First testing with W3C threw up a problem with my use of Bootstrap buttons as anchor tags. I had to recreate them as an id, which worked.
Another problem picked up was sizes of images on the HTML rather than CSS, which I fixed.
- Test that works at all sizes and toggles down when goes to mobile size by expanding and contracting screen size.
- Test all links by hovering over to change colour and by and by making sure they scroll to relevant sections by clicking between them.
- Test that it is always at the top of the site by scrolling down the pages.
- Test the image fits the whole screen at all sizes by expanding and contracting screen size.
- Test the main message is visible at all sizes by expanding and contracting screen size.
- Test shop buton works by hovering over to change colour and by clicking and seeing if it takes you to shopping page.
- Make sure grid of flowers flows with the page breaks by expanding and contracting screen size.
- Test the heading and subheading are visible on all sizes by expanding and contracting screen size.
- Test hover of flower images by hovering cursor over them to make sure they change.
- Test modal, by clicking on flower image to bring it up. Check selection box, buy link and close X at top.
- Make sure grid of images flows with the page breaks by expanding and contracting screen size.
- Test the heading and subheading are visible on all sizes by expanding and contracting screen size.
- Test text is readable and behaves the desired way by expanding and contracting screen size.
- Make sure the text and map flow with the page breaks by expanding and contracting screen size.
- Make sure map is clickable and can open into larger map.
- Check hover on email by placing cursor over it.
- Test buttons are live and hover works by placing cursor over them to change colour.
- Test button is live and hover works by placing cursor over them to change colour.
- Test it takes you back to home page by clicking on it.
I tested this out with several family members and friends.
This resulted in the navigation links becoming bigger, adding images to my About us section, putting on a back to top button and toning down the purple colour to be more muted.
My site is deployed on GitHub.
- At the start of your project when you have created your Cloud9 environment it's a good idea to start commiting your files to a repository.
- In Cloud9, create your first index.html file.
- To start committing your file, open a new terminal and type in the command of git init. This will intialize a local repository.
- Go to GitHub and create a new remote repository there.
- Click on New, and give it a name and a description.
- Click Create Repository. This will give you some code.
- Back in Cloud9, we need to tell the local repository how to link to the remote one.
- We want to add our index.html file, so we use the command git add index.html.
- We then use the command git commit -m "Intial commit", which is the standard message when starting a repository. 10.We need to tell it how to find the remote repository, so go back to GitHub and to the box with the heading 'or push an existing repository from the command center.
- Copy the top line of code into your Cloud9 terminal and press return.
- Then copy the second 'push' line and paste this into the Cloud9 terminal too.
- It will then ask firstly for your username, and then your password.
- Go back to GitHub and you will see that your file has now been saved to this remote repository.
- At regular intervals it is a good idea to commit your files in case something goes wrong.
- Command git status will show you files that need to be added.
- Command git add -A will add all those files.
- Then of course you need a git commit -m "with a message".
- you then git push and enter your username and password.
I have been pushing my code through to GitHub very regularly as, on occasion, something has gone wrong and I've had to go into my history and retrieve bits of code that I know will work.
All my images were sourced from the iStock image library. iStock
All text was written by me.
I used Anna Gilhespy's Bootstrap tutorial video and her website to help me work out the structure of the content. Anna Gilhespy Anna Gilhespy
This site gave me useful information about how to put my site together. It had advice of what makes a good florist site and what customers are looking for. Hawthorn Creative
I was inspired for some elements of my site from this website for McQueens Florist. It made me want to use a big beautiful image on my landing page. I really loved the shopping grid idea. McQueens
I really liked the simple typography and cleanness of this site. I took inspiration from it's rustic photography. That Flower Shop