Overview
This project focuses on designing responsively for a website. Artful Fleur is an online flower delivery service serving to make ordering flowers online easier for users and within a reasonable budget.
Launch site
Flower Delivery Service
Upon thinking about the topic, I did several research on exisiting flower delivery websites. In conclusion, not many websites are designed very well. I then, decided to give this topic a shot and try to create a more pleasing website.
Creating a Persona
At the beginning of every project, one has to think about the people who we’re designing for. Since my topic is focused on a flower delivery service, it would be targeted towards a female audience. From there, I decided to create a persona and think about what core needs she wants in order for the website to fulfill those needs.
As I understood what kind of needs the user may have, and who my audience were, it made the process of designing the flower delivery site more easier.
See Persona
The Design Begins!
Now begins the fun part, designing the layouts! But, before getting to the actual designs, I needed to prepare the wireframes to determine the whole layout
of the website.
Desktop Home Page Wireframe
Tablet Occasions Page Wireframe
Mobile Products Page Wireframe
Getting the base of the layout done helps me extremely at what works and what doesn’t. During the wireframe process, it also helped me to see what content needed to be prioritized compared to others. It allowed me to understand which content goes where and answering questions such as: will the user know what website this is? Is there enough information to explain the gist of the website?
Nearing Completion
Finally beginning the actual designing of the page, it was difficult to break out of the boxes from the wireframes. Since it is the base of the design, its quite hard to break out of it. However, I was happy with the overall design and prioritizing certain information for the user to see.
Though, I believe there is always room for improvement.
Desktop Home Page Final Layout
Tablet Occasions Page Final Layout
Tablet & Mobile Product Page Final Layout
Final Thoughts
This project was very informative and allowed me to see the obstacles in both design and code when making sites responsive. One needs to think about how the design would overall work within 3 seperate screens and how to keep all the information together. Overall, this project helped me further understand the complications and design work needed to make sites responsive.
Launch site
