For this week’s assignment we had to build a mobile-friendly website from scratch using WordPress and customising a theme to fit the client’s needs. Since the web I created last week was already mobile-friendly, I was advised by my tutor to use the same for this assignment. Here is a link to last week’s post.
Below I have attached screenshots of the desktop and mobile version of the website.
It’s important for me to see that you can follow through on the entire process – from the brief to the completed website.
Please explain why you make certain decisions. How do these decisions fit in with the business strategy?Upload your brief, wireframe, sketches and link to your website to your WordPress blog. There’s quite a lot to do for this assignment, so it’s advisable to keep your website simple.
I decided to continue with the same client as last week.
BRIEF
Flores Marta is a small local florist’s located in Valladolid, Spain. We offer flower arrangements for events, interior decoration, funeral flowers and gifts. We receive part of our flowers and plants directly from Holland, one of the world’s biggest producers. Besides, we have our own nursery in the town’s outskirts, where we grow the rest of our products. This way, we guarantee the freshness of our plants and flowers, so they last longer.
Business Strategy
Mission Statement Normalise flowers and plants’ use in day-to-day life by offering fresh, durable and affordable arrangements and solutions.
Objectives 1 – Sell flowers and plants 2 – Offer a wide variety of floral arrangements 3 – Grow a trust relationship with the community
Value Proposition 1 – Fresh and long-lasting products 2 – Personalised arrangements 3 – Support local commerce and community
Elevator Pitch Flores Marta guarantees fresher, longer-lasting cut flowers in your home or event.
How the website would fit into your business strategy I want my website to showcase the work we do, showing photos of the bouquets and arrangements we prepare. Initially, we will not sell online because we prefer to create a relationship with the clients first and offer them personalised assistance. We want to use the web as a catalogue for our customers, where they can also find the contact details and address for them to contact or visit us. In the future, when the community has grown, we would like to introduce online shopping. The web should clearly state the origin of our products and our involvement in the local community. I want the website to reflect our brand with a fresh, clean design. It must be easy to navigate.
Web Architecture
The website is a one-page with anchor points to the different sections.
WIREFRAME
I chose to use a low-tech wireframe because it is a small website, the client has a limited budget and it allows me to make changes easily.
WEB STRATEGY
Domain and hosting The domain name suggested to my client is the business’ name, which is relevant, memorable and usable. For the suffix, we chose .com since it is available. We also decided to purchase .es, the specific suffix in Spain, and redirect it to http://www.floresmarta.com. For hosting, I recommended BlueHost, as it is currently ranked as one of the best services for small businesses, ideal for WooCommerce and very popular for WordPress sites.
Since this is a fictitious client, I didn’t purchase the domain mentioned above or host with BlueHost. Instead, I created a subdomain in the domain I have for this course with one.com.
Design The website design will be clean and fresh, intuitive and user-friendly with a focus on visual content. It will display correctly in all browsers and be responsive on mobile. A picture carousel in the website header will show the florists’ most relevant work. The web will only be updated occasionally on special dates. The business’ Instagram feed will be displayed on the site to show pictures of the latest orders and work.
The design is clean and balanced; I chose to have a white background and use cover pictures to separate the different sections. I was planning to have a carousel in the header but could not figure out how to do it in the limited time I had for this Lesson Task, so I decided to use a single picture instead and continue with the design. The gallery section is missing from the web; my idea was to link the client’s Instagram feed to display on the web. Because it’s not a real client, I have no Instagram account to display, but if I had, I would have installed the plugin Instagram Feed to show the feed. I used placeholder text except for the headings, menu and details. The web is in Spanish as the fictitious flower shop is located in Spain.
Target Audience My client wants to target local women between 25 and 55 who enjoy shopping in their town and support local businesses.
I used soft, feminine colours to appeal to the target audience. The pictures in the about section (Quienes somos) show women taking care of the plants and flowers sold at the florist. In a real situation, the text would have reinforced the client’s values of support to the community and local businesses/flower producers.
Programming The web will be built in WordPress, as it is easier for my client to manage the occasional updates they might need. Some features can be customised with additional CSS and modifying the PHP files. Once they are ready to add online orders, it will be easy to add WooCommerce to the web to create the shop.
I used the WordPress theme Flash to build the websiteandcustomise it mainly using its options and adding plugins. All the pictures are optimised for the web, improving web performance.
Much more could be done to make a better web, but I decided to keep it simple since this is a Lesson Task and I had limited time.I have learned a lot while building the web, and I realise how much more I still have to know if I want to become better at developing webs with WordPress.
For this week’s assignment I had to find a business owner and ask them what they want from a website, what their business strategy is and how the website would fit into it. After writing a detailed document about it, I should create the website architecture. Last, I was to create the website design strategy and justify all the major decisions I make on domain registration and hosting, design, target audience and programming.
ABOUT THE BUSINESS
Name Flores Marta (fictitious client)
Product or service Flores Marta is a small local florist’s located in Valladolid, Spain. We offer flower arrangements for events, interior decoration, funeral flowers and gifts. We receive part of our flowers and plants directly from Holland, one of the world’s biggest producers. Besides, we have our own nursery in the town’s outskirts, where we grow the rest of our products. This way, we guarantee the freshness of our plants and flowers, so they last longer.
BUSINESS STRATEGY
Business’ Name Flores Marta
Mission Statement Normalise flowers and plants’ use in day-to-day life by offering fresh, durable and affordable arrangements and solutions.
Objectives 1 – Sell flowers and plants 2 – Offer a wide variety of floral arrangements 3 – Grow a trust relationship with the community
Value Proposition 1 – Fresh and long-lasting products 2 – Personalised arrangements 3 – Support local commerce and community
Elevator Pitch Flores Marta guarantees fresher, longer-lasting cut flowers in your home or event.
How the website would fit into your business strategy I want my website to showcase the work we do, showing photos of the bouquets and arrangements we prepare. Initially, we will not sell online because we prefer to create a relationship with the clients first and offer them personalised assistance. We want to use the web as a catalogue for our customers, where they can also find the contact details and address for them to contact or visit us. In the future, when the community has grown, we would like to introduce online shopping. The web should clearly state the origin of our products and our involvement in the local community. I want the website to reflect our brand with a fresh, clean design. It must be easy to navigate.
WEBSITE ARCHITECTURE
WEBDESIGN STRATEGY
Domain and hosting The domain name suggested to my client is the business’ name, which is relevant, memorable and usable. For the suffix, we chose .com since it is available. We also decided to purchase .es, the specific suffix in Spain, and redirect it to http://www.floresmarta.com. For hosting, I recommended BlueHost, as it is currently ranked as one of the best services for small businesses, ideal for WooCommerce and very popular for WordPress sites.
Design The website design will be clean and fresh, intuitive and user-friendly with a focus on visual content. It will display correctly in all browsers and be responsive on mobile. A picture carousel in the website header will show the florists’ most relevant work. The web will only be updated occasionally on special dates. The business’ Instagram feed will be displayed on the site to show pictures of the latest orders and work.
Target Audience My client wants to target local women between 25 and 55 who enjoy shopping in their town and support local businesses.
Programming The web will be built in WordPress, as it is easier for my client to manage the occasional updates they might need. Some features can be customised with additional CSS and modifying the PHP files. Once they are ready to add online orders, it will be easy to add WooCommerce to the web to create the shop.
This is the first Lesson Task (previously called Learning Activity) of the second year of Graphic Design (GRA2).
In this case, I was to create a detail brief for a client’s website. This brief should contain all the information that will be needed to achieve the client’s requirements. It should be good enough to hand over to any design/programming team and get a great result.
The brief should cover the following sections:
What is the client’s service/product?
What are their requirements?
What is the website’s goal?
How are you going to achieve this goal?
Build the website architecture (so we can see what sections will be needed)
What is the design style that will be required?
What are your suggestions for marketing the site?
I chose the same client as for my Semester Project last year. See the link here.
This week I had to create the structure of my web page I designed on week 22 –Put Thought Into Your Design– in terms of HTML files and folders. First I used a pen and paper to do my planning and then do it on the computer.
Below is the structure I planed for my web.
Inside the images folder there is one folder for each webpage
This Learning Activity is about creating a website wireframe. For that, I first have to answer the 10 essential questions from my previous post.
The client I chose is Little Explorers, the same I worked with on my Semester Project.
ESSENTIAL QUESTIONS
What kind of visitors are you expecting on your website? Parents with children under the age of 12 that want to buy handmade, ethical- and sustainably produced clothes that allow their kids for free movement and autonomy. Who are your competitors and how do you differ from them? There are a few online stores that sell similar clothing, using organic cotton. Even though most of these stores offer sustainable designs that can be considered comfortable in most cases, it is not one of their central claims. Little Explorers differentiate themselves by focusing on children’s clothes only, with a broader size range and putting stress on the functionality and durability of their garments.
What actions do you want visitors to take on the site? I want them to make a purchase.
What is your deadline for completing the site? How big is the budget? The business is not established yet, so the deadline could be something like two months. It is a very small business and so is the budget.
Please list the names of three sites that you like and explain what you like about them. 1. Lucía Be 2. Little Adventurers 3. Små Spor What I like about all of them is their use of image, the structure and organisation of the web and how easy it is to find the information you are looking for. They use the right amount of information and focus on showing what they are selling with high-quality images.
Do you have any colour preferences? What should the look and feel for the website be? The colours should be a light grey for the background, with copy in dark grey and headers and accents in green and turquoise. Same shades as in the products previously designed. What is the main goal behind building the website? The main goal is to sell the products that my client makes.
Do you have a style guide or any existing images? The brand has a style guide, logo, clothing tags, packaging design, business card and brochure. You can see them here.
What is the most important information your site must relay to the user, especially on the home page? A description of the brand values and photos of the products they sell.
Do you have the content for the website or will content creation be a part of the scope of work? The client will create the content.
Little Explorers is located in Spain, and so their website should be in Spanish. For the sake of this learning activity, I will use English.
I have chosen a lo-tech architecture because Little Explorers is a small, new business with low budget. Besides, drawing the wireframe by hand allows me more creativity and it’s easier to adjust and update.