The proposal summarizes the design of a new website for Breads by Josef bakery. It includes an overview of the project schedule and stages, details on the design and development process, business overview and target audiences. Visual development was inspired by traditional bakery elements to create a warm, inviting atmosphere. Mockups presented desktop and mobile views of the proposed homepage and interior pages, bringing the bakery experience online while staying true to its origins.

1. BREADS BY JOSEF
WEB SITE PROPOSAL

2. DESIGN
BY
CHARLI VORNES

3. 1. Project Schedule
2. Process Details
3. Business Overview
4. Special Requirements
5. Target Audience Analysis
6. Competitor Analysis
7. Visual Development
8. Final Design
1-PROPOSAL SUMMARY

4. 1-PROJECT SCHEDULE
Stages Completion Date Cost Status
First Stage $700,00 completed
Planning 01/05/2015
Design 10/05/2015
Second Stage $2.000,00 pending on approval
Development 20/05/2015
Testing 23/05/2015
Release 1 25/05/2015
Refinement 30/05/2015
Final Stage month plan pending on approval
Post Launch ongoing services

5. 1-PROCESS DETAILS

6. Planning
• Requirements analysis - client goals, target audience, detailed features
• Site map
• Contracts - Project closure clauses, exit clauses, copyright ownership
& timelines
• Required Resources - software, stock photography, fonts, etc
FIRST STAGE

7. Design
• Wireframe and design planning - the visual layout of the website begins to
take shape
• Mock-ups - allows for relatively easy modifications
• Review and approval cycle - reviewing, tweaking and approving the mock-ups

8. SECOND STAGE
Development
• Build development framework - ensures that the server can
handle the installation and set-up smoothly.
• Code templates for each page type - (e.g. home, general
content, blog post, form)
• Develop special features and interactivity - where the fancy
elements come into play.
• Populate with content - loading all of the content provided by
the client or writer.

9. Testing
• Test links and functionality - walk through every single page created
• Testing - final diagnostics using the available tools: code validators,
broken-link checkers, website health checks and spell-checker
• Cross-Browser Checking - Checking that site works in multiple browsers
like IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry

10. Release 1
• Inspection - Client given access to front & backend of website
• Collaboration - discuss functionality and direction of website with client

11. Refinement
• Fine Tuning - identify parts of the website that could be improved in small ways

12. Launch
• Upload to live server - transferring from test server to the live web server
• Hand site over to client - all contractual obligations have been met and the client is
satisfied with the product

13. Pos-Launch
• Provide documentation and source files - Providing the client with documentation for
the website, a soft-copy site map and details on the framework and languages used.
• Project close, final documentation - the client signs off on the
last checks, provide your contact information for support, and officially close the project.
FINAL STAGE

15. Objective
To provide the business with more efficient tools which will enable it to interact
with current and new customers over the internet without loosing the traditional,
well established and successful identity.
Goals
To create a stronger rapport with customers and business partners by encouraging
their online interaction and loyalty providing the business with a further
competitive edge as well as progressing with his prestigious social networking.
Solution
To create a responsive website which is built in a particular way to adapt its look
and feel “responsively”, providing users with the best viewing experience for their
device – be it a smartphone, tablet or laptop – it literally adjust the page format to
suit the device.
3- BUSINESS OVERVIEW

16.
1. Google Ad words/ Analytics/ Rankings/ Seo.
2. Set up a database to store and manage data/ Security.
3. Google maps/Geolocation/Get directions.
4. Responsive design/ Mobile first approach.
5. Develop content/ Share posts on Facebook.
6. Daily posts on Instagram.
7. Embbed videos (Josep channel on You Tube).
8. Cms system which allows client to manage content.
4-SPECIAL REQUIREMENTS

17. customer profile main values
gourmet lovers
travel, history, tradition, quality
hipsters
cool, trendy, image, organic, social
media
cafe and restaurant owners
quality, tradition, reliability, wholesale
price, consistency
house wife
quality, health, convenience, warmth,
trust
5- TARGET AUDIENCE ANALYSIS

18. TARGET AUDIENCE

19. TARGET AUDIENCE

20. BAKERS DELIGHT

21. BAKERS DELIGHT REVIEW
PROS:
Nice and strong logo which stands out and easily and communicates itself and the services
provided by the business.
All the relevant information about the business is visually easy to find. Site is user friendly.
Good use of product and staff images which well present and promote the business and its
ideology.
All the social media connections clearly displayed and visually communicated to the
customer.
CONS:
The colour is a bit too flat and clean, it does not stand out enough and effectively
communicates to the customer, perhaps another brighter more playful colour to be added
to the website overall design and layout.
The excess of information on the front page can be overwhelming. Apart from the logo the
website has a more corporate look rather than of a bakery business.
6-COMPETITOR ANALYSIS

22. PANDORO

23. PROS:
All the necessary information provided in a uniform matter, every aspect of their
business is clearly covered and communicated to the viewer.
Clean cut design of the first page layout, simple and effective use of colour.
The site is user friendly and easy to navigate through and make searches.
CONS:
Logo seems to be a bit too small not easy to spot as the large image in the background
overwhelms it.
The heading is a bit too big in relation to the rest of the the heading fonts and the page
layout as a whole.
The white colour font along with the white background doesn’t visually work due to its
lack of contrast.
The font used in the text is a bit too small, hard to read at the first glance.
No visible links to their social media connections in the first page.
PANDORO REVIEW

24. WILD WHEAT

25. PROS:
All the relevant information provided on the front page in a chronological order.
Website is easy to navigate and to find all the relevant information regards to the
business.
The page layout is very playful and inviting to the viewer.
High standard resolution images of products which communicate quality, passion
and high standard of commitment to the business and its products. The background
colour is effective as it makes the images stand out and visually striking to the
viewer.
CONS:
The logo does not communicate the business identity very well . The logo resembles
a wild bean coffee and therefore the logo itself would be more suitable for a cafe
business rather than a bakery.
At the welcome to wild wheat page the photo of the staff member doesn’t look very
inviting could use image of a friendlier staff members to make the website more
attractive as customer service is a very important aspect of the bakery business.
WILD WHEAT REVIEW

26. CREATIVE PROCESS
7-VISUAL DEVELOPMENT

28. Artistic Inspirations

29. COLOUR SCHEME

33. CROISSANT
Price:$1.50
Succulent, juicy, flaky, buttery
What more could you ask for…?
Average Weight:
0.084kg
Ingredients:
Wheat Flour, Water, Butter, Milk,
Yeast, Salt, Sugar, Vegetable Fat,
Shortening, Egg
CIABATTA LOAF
Price:$4.90
Ciabatta Loaf is made with
olive oil, this small loaf has a
light, moist and fluffy
interior with a slightly
crunchy shell.
Average Weight:
0.232kg
Ingredients:
85% Wheat Flour, 15% Rye
Flour, Water, Yeast, Salt,
Malt, Olive Oil

34. CIABATTA LOAF
Price:$4.90
Ciabatta Loaf is made with olive
oil, this small loaf has a light,
moist and fluffy interior with a
slightly crunchy shell.
Average Weight:
0.232kg
Ingredients:
85% Wheat Flour, 15% Rye Flour, Water, Yeast,
Salt, Malt, Olive Oil
PRODUCT PAGE
DETAILS

35. SIGN UP TO THE NEWSLETTER
Find out more about bread
Bread of the week
Our Price: $5.95
Alsace Loaf is a delicious white, long loaf with a crusty
shell and a moist, fluffy middle. Average Weight: 0.586kg
Ingredients:
100% Wheat Flour, Water, Yeast, Salt
ALSACE LOAF
ALSACE LOAF

36. The design of the new Breads by Josef website was inspired by all the traditional elements
found at the physical address of this renowned bakery.
From the colour pallet to the choice of materials the idea is to be loyal to the business
origins and its so well spoken artisan breads. Even the colour of its ingredients such as flour
and seeds play an inspirational role to its conceptual design.
In terms of colours, the tones of brown brings up a warmth feeling into its visual identity
which along with complementary colours like beiges and dark orange quiet suits a bakery
business.
The font choice was also inspired by elements found at the bakery,
the idea was to bring the chalkboard from the bakery shelf into the online environment,
following the same path even the chalkboard was lately incorporated to serve as a frame for
the font to be harmoniously displayed in a coherent manner.
All the elements intends to bring the traditional bakery scenario into an on line new window.
8-DESIGN PROPOSED

38. MOCK UPS
MOBILE

39. DESKTOP
MOCK UPS

40. MOCK UPS
DESKTOP

41. MOCK UPS
DESKTOP

42. MOCK UPS
DESKTOP