Floral Designs Website

Contact Me

Floral Designs is an upscale company offering discerning clients select Orchids, Roses, and choice green plants, while also offering custom, one-of-a-kind cut flower arrangements, hand-crafted by an award-winning floral designer.

My Roles

  • Planning
  • Researching the Potential Audience and Competition
  • Writing Original Content
  • Design
  • Front-End Development: HTML5 / CSS3 / JavaScript and jQuery

1. Discovery

I began the project by making a list of questions I would ask the client about their business and the future of their company. Next, I researched the competition, making notes on each web site. One shortcoming I noticed with many websites was that the type was quite small and difficult to read. Also, I noticed that many sites used the same predictable colors. I wanted the Floral Designs web site to stand out from the competition, with bold colors picked from the images themselves, but still with easy-to-use navigation and an easily read font.

Competitor's Websites

2. Planning

Next, I created personas and generated scenarios to highlight tasks that customers might need to complete. I also created several wireframes for the website. I have been reading about interactive wireframes that are created in the browser with HTML5 and CSS3: I have tried this method, and it seems to shorten my development time considerably. Finally, I created the content for the website, using an Adaptive Content strategy, with content laid out in chunks, sized to fit onto a small screen, in order to minimize scrolling on mobile devices.

My Scenarios

“Arthur and his wife Monica have an anniversary coming up shortly, and he wants to send her a custom-designed cut-flower arrangement. Arthur hasn't been able to find any stores in his area that offer the kind of arrangement he is looking for. He begins Googling "custom floral arrangements" and immediately finds Floral Designs' web site. Arthur is impressed with the beautiful photographs of orchids and roses on the home page, and notes that Floral Designs has their own award-winning floral designer on site. Because the Floral Designs website loads quickly and is easy to navigate, Arthur is able to quickly choose the flowers he wants for the arrangement and complete his order.”

“Hugo's girlfriend, Victoria, has a birthday next week, and he wants to surprise her with cut roses. Hugo's first inclination is to surf the web on his iPhone, and when he searches Google for "Cut Flowers", he quickly finds the Floral Designs website. He notices how easy the website is to use on his phone, not the case with many other websites. Hugo likes the idea of sending Victoria a custom arrangement by an award-winning floral designer, so he searches the list of suggested designs, and after spending several minutes reading descriptions, he chooses one, and checks out, satisfied that Victoria will be completely surprised by the custom arrangement.”

1. Closeup of the Home Page Wireframe.
2. Closeup of the Mobile Home Page Wireframe

3. Creative

I created a logo for Floral Designs and chose a very simple palette of colors, taken from the images. I designed the website using Adobe Brackets as my code editor and Chrome's development tools.

Logo

For the Floral Designs logo, I chose the “AlexBrush” typeface from Font Squirrel, as it was an elegant script that seemed well-suited to the style of the company.

4. Application

Finally, I finished writing the code and optimizing the images to create the final responsive website. I also adapted a JavaScript slideshow from a tutorial that I had completed on the side while working on this project, which is discussed in more detail below. In the future, I want to learn full-stack development, after which I intend to develop this project into a fully functional e-commerce website that will accept credit card payments.

I am working through a JavaScript course created by Yaphi Berhanu of Simple Steps Code. I recently read an article Yaphi wrote, “Make a Simple JavaScript Slideshow without jQuery”. After I worked through the example, I decided that this would be a good technique to apply to this project. The working result of the tutorial can be found on my Codepen profile. Below, I show 3 screenshots demonstrating the slideshow, followed by the home page view in wide-screen, iPad, and mobile.

1 / Widescreen

Image of the Floral Designs Wide-Screen Home Page

2 / iPad

Image of the Floral Designs iPad view

3 / Mobile

Image of the Floral Designs Mobile view

Finally, here are two examples of product pages from the Floral Designs website: