Download Running head: LAURA`S BAKERY WEB SITE PLAN 1 LAURA`S

Running head: LAURA’S BAKERY WEB SITE PLAN
Proposed Web Site Plan for “Laura’s Bakery and Cupcake Shop”
Jorge Alvarez
WEB/236
Professor David Zhang
June 4, 2012
1
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
2
Proposed Web site Plan for “Laura’s Bakery and Cupcake Shop”
Web site Purpose and Architecture Plan
The Internet is an ever-growing outlet for every individual on Earth. It began as a
government-only project until 1991 when the ban on the commercial use of the Internet
was lifted (Felke-Morris, 2011). Since then, businesses have thrived on the Internet.
Large corporations such as Amazon and Nike have taken advantage of the Internet’s
massive marketing capabilities. Small businesses have also begun to take advantage of
the Internet.
One such business that is looking to take advantage of the Internet to spread word
of its services is Laura’s Bakery and Cupcake Shop. Laura’s Bakery and Cupcake Shop
offers several services:

Gourmet freshly made cakes and cupcakes

Hand-made cookies and pastries

Gourmet coffees, teas, and espressos
Laura’s Bakery wishes to establish a web site to spread word of its services to
users of the Internet. The Laura’s Bakery and Cupcake Shop web site will have several
purposes. The main purpose of the web site will be to educate the end-user of the
services listed above as well as give contact information, establishment hours, pricing
details, location address, testimonials, and other pertinent details. The web site will also
serve as a way for customers to place orders for custom cakes, cupcakes, cookies, pastries,
and other bakery items.
Target audience is very important when considering the design of a web site
(Felke-Morris, 2011). The target audience of a web site defines whom the web site is
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
3
targeted to. Since Laura’s Bakery and Cupcake Shop is a food and drink establishment,
the target audience will be quite large. Target audiences may include:

Families ordering cakes for special occasions

Parents, teens, and kids searching for cupcake ordering options

Adults and young adults seeking a new place to buy their morning coffee
The target audience may also include all ages looking to search for menu options that
change often at Laura’s Bakery. Due to the varied target audience and the fun and
charming atmosphere at Laura’s Bakery and Cupcake Shop, the design of the web site
will be the same. It will be fun and charming and draw the target audience in with
vibrant colors and graphics of delicious menu items such as pastries, cupcakes, and
cookies.
When designing the web site, it is also important to consider the content. Distinct
categories in content will allow the users to more easily navigate the website. The more
complicated a web site, the more likely it is a user will get lost while trying to navigate it
(Vasquez & Victor, 2000). The web site’s content is what makes it usable to its target
audience and what makes it an asset to its owner. The content of Laura’s Bakery and
Cupcake Shop will be as follows:

The Sweets Blog

Order From Us

Menu

Reviews

Location

Gallery
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE

4
Specials
The content of the web site will enable users to order cakes and other pastries,
find the store, see current specials, and view a gallery of beautiful cakes and cupcakes.
The content section entitled “Sweets Blog” describes the bakery’s humble beginnings and
serves as a blog for customers to stay informed about the restaurant. The “FAQ” section
answers questions users may have regarding payment options or custom ordering. The
“Reviews” section has reviews collected from different sources praising the bakery.
“Order From Us” is the web site’s custom order form. “Contact Us” will detail store
operation hours and store contact information. The section entitled “Specials” details
bakery items with reduced prices for the week. These sections will fulfill the content
requirements of the web site. Sub-sections of the main sections of the content will further
enhance the content of the web site.
Once the web site content has been established, the next step in Web Design is
web site organization. Web site organization is also known as Web site architecture.
According to Felke-Morris (2011), web site designers commonly use three types of web
site organization:

Hierarchical

Linear

Random
For Laura’s Bakery and Cupcake Shop, the web site designer will choose a hierarchical
methodology for its web site design. This will enable the designer of the web site to
create a charming and colorful web site that will draw in the user using colorful and
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
5
interesting graphics. Files within the website will include photographs of bakery items,
background files, as well as image files for the navigation links.
An illustration of the web site hierarchy gives a visual representation of how the
web site will be organized. Using the three-to-five click rule, the web site will keep
navigation simple yet effective. The web site’s web pages would also not take too long
to load as a user may lose interest if a page takes too long to load (Felke-Morris, 2011).
This usually happens when a web designer overloads a web page with too much content.
Use of “breadcrumbs” will allow user to easily return to the home page and navigate to
other pages of the website without having to go back to the home page. Laura’s Bakery
and Cupcake Shop’s web site hierarchical organization will be as follows:
Laura's Bakery
and Cupcake
Shop Home Page
Order
From Us
Order
Form
Payment
Info
Sweets
Blog
FAQ
Menu
Bakery
Coffee
Bar
Specials
Weekly
Specials
Gallery
Reviews
Location
Cakes
In Print
Directions
Cupcakes
On TV
Hours/Co
ntact
Order
Verified
Terms&C
onditions
About
Site Map
Work for
Us
Chart 1. Web site hierarchy demonstrates how the pages would be organized.
The web site, http://www.laurasbakery.com, will have files attached which lead to
pages. Files are also an important part of a website. They are the brick and mortar of a
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
web site. The chart above shows what the home page content would be. The main files,
for example, would be comprised of the following:

Order.html

Blog.html

Menu.html

Specials.html

Gallery.html

Reviews.html

Location.html

Terms.html
So an example of the use of these files for page navigation would be
http://www.laurasbakery.com/order.html.
These files would make up the home page navigation bar. Using a basic
hierarchical web design concept, the home page for Laura’s Bakery and Cupcake Shop
will be simple and fun to navigate. Customers will also find it easy to find the
information they need as well as order cakes and pastries. The target audience of young
adults, teens, kids, and adults are looking more to the Internet to order their specialty
bakery items. Laura’s Bakery and Cupcake Shop wishes to take advantage of the large
marketability of the Internet to further its sales and become a more successful small
business.
Week Three: Navigation and Web Development
A strategic navigation plan is essential when designing a web site. A well
planned web site navigation strategy can make a web site a pleasure to use. However, a
6
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
7
badly designed navigation strategy can make a web site a chore to use. When a web
designer is considering navigation for a web site, it is a good idea to consider navigation
best practices (One Extra Pixel, 2012):

Design for the user

Provide a variety of navigation options

Let the user know where they are, where they have been and where they are going

Do not surprise or mislead the user

Be consistent
When designing the web site for Laura’s Bakery and Cupcake Shop, the web designer
will take these best practices into consideration. The web site designer will use in order
to ensure ease of navigation. One of the best practices that the web designer will use in
the web site will be a navigation bar. The web site for Laura’s Bakery will have a
horizontal navigation bar that will be graphic based. This will add to the attractiveness of
the web site. DHTML can also be used to add an element of animation such as dropdown menus to the navigation bar (Felke-Morris, 2009). In addition to navigation bars
with interesting DHTML animation, the web site will feature short pages. The user will
not have to scroll vertically if at all. This will make the web site easier to navigate for the
user. It is also a good web design decision to include a site map for any web site (FelkeMorris, 2009). Laura’s Bakery and Cupcake Shop will include a site map page as well.
There are many examples on the Internet of good navigation practices. The
overall navigation of the website for Laura’s bakery will be very similar to the web site
for another bakery called Confections Cupcakery (Confections Online, 2012):
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
8
Figure 1. The Confections Cupcakery home page shows a navigation bar similar to the one the web
designer will use for Laura's Bakery (Confections Online, 2012).
The horizontal navigation bar is very similar to the one planned for Laura’s
Bakery and Cupcake Shop. The graphics based navigation links are also similar.
However, the Confections web site does not use drop-down navigation menus for its
navigation bar; something Laura’s Bakery and Cupcake Shop web site will include in its
navigation bar. The drop-down navigation bar will appear similar to the following:
Figure 2. The drop down menu will include "child items" which will be links to other pages of the web site
(Six Revisions, 2012).
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
The above drop down menu illustrates the drop down menu that will utilize
DHTML to create “child items” or links that will link web pages to the navigation bar
(Six Revisions, 2012). By clicking the active items on the navigation bar, users will
activate the links. Then users can choose the pages they are trying to access from the
“child items.”
Figure 3. Another example of a DHTML drop down menu similar to the one the web designer will use for
Laura's Bakery web site (CVS, 2012).
There are many web development tools available for web designers to choose
from when considering web development. There are programs available for web
designers such as Adobe Dreamweaver. Adobe Dreamweaver allows web designers to
user JavaScript, HTML, XHTML, CSS, and other languages and create stunning and
attractive web pages (AGI Creative Team, 2010). In addition to Dreamweaver, Adobe
offers many other tools that aid the web developer in creating web sites. Every web site
needs attractive graphics, designs, and backgrounds. Adobe Photoshop is another tool
9
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
10
that can prove invaluable to the web designer. Adobe offers a variety of other tools that
can aid the web site developer:

Adobe Flash

Adobe Illustrator

Adobe Bridge
These are just several of the tools that Adobe offers web developers. The tools are used
to develop and enhance elements of the web site such as graphics and backgrounds
among others.
Figure 4. Adobe Illustrator can be used by web site designers to create custom graphics.
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
11
Week Four: Media, Plug-ins, Content, and Usability
All web sites contain content such as media. However, not all web sites contain
all kinds of media such as music and videos. Some web sites simply utilize graphics in
order to stay lightweight and simple. Laura’s Bakery web site will be simple and
lightweight. It will utilize graphics such as Portable Network Graphics (PNG) images
and backgrounds. However, a video in MPEG format may be added to the web site if
needed since this is one of the most commonly used video formats (Felke-Morris, 2009).
In addition to MPEG, a YouTube account can be created by Laura’s Bakery and used in
the web site. Many businesses and organizations have created YouTube accounts in
order to better market their products and services. The YouTube videos can then be
embedded into web sites (Youtube, 2012).
Figure 5. The YouTube web site allows users to embed videos within sites using HTML. The embed code
is highlighted in blue (YouTube, 2012).
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
12
Making the web site lightweight and having few elements diminishes the
probability of user frustration. This is due to having fewer media needs that may arise
from web site required plug-ins that the user may or may not have. In addition to the
images and videos, DHTML will be another element added to the website to make it
more engaging, attractive, and user friendly. DHTML is a combination of Document
Object Model (DOM), Cascading Style Sheets (CSS), and JavaScript (Felke-Morris,
2009). DHTML will be used on the web site to enhance the navigation bars as well as to
hide and show text and adding slide shows to the web site. Graphics will be utilized on
the web site in order to intrigue and show customers the cakes, pastries, and others
products that Laura’s Bakery offers. Since most of the graphics will be of of Laura’s
Bakery items, they will be acquired on-site through a professional photographer.
Figure 6. Shutterstock is a stock photograph service that can be a valuable tool for web designers.
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
13
Should any need for additional graphics or photographs arise, a stock image
service such as Shutterstock will be used in order to avoid any copyright infringement
(Shutterstock, 2012). In addition, the web designer using Adobe Illustrator will make any
backgrounds and designs for the web site. All photographs will be improved using
Adobe Photoshop to ensure that they look their best.
Should users visiting the site not be able to utilize these features, links will be
provided on each page at the bottom to download the plug-ins required to view and use
the web site. In order to facilitate use for customers who may not be able use a mouse,
the site will also be able to be navigated using the keyboard. In addition, the levels of
screen flickering will be kept at safe levels in order to avoid optical seizures in
susceptible users (Felke-Morris, 2009). It is vital that the web designer consider user
with physical handicaps as well as those with low bandwidths when designing the web
site. It is another reason why the Laura’s Bakery web site is proposed to be so
lightweight.
Week Five: Conclusion
The prototypes for the Laura’s Bakery and Cupcake Shop are displayed below.
The navigation and visual elements present are the ones discussed above. The site
features a horizontal navigation bar that will use DHTML to animate link selection in a
drop down menu. The graphics used will be either created in Adobe Illustrator or
acquired through legal means to avoid copyright infringement. Social media marketing
elements such as Facebook and YouTube are also used on the web site to further expand
marketing reach. The visual organization of the web site is traditional of many web sites
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
14
with a horizontal navigation bar and top-down page organization. Media will be utilized
as well. Both videos and photographs are present in the prototypes.
Figure 7. The home page prototype for Laura's Bakery and Cupcake Shop web site is colorful and
charming.
Accessibility elements are present in the site as well. The site can fulfill its functions
even if a user does not have a mouse. Screen flicker rates are at safe levels and the web
site is lightweight to allow users with low bandwidth to still be able to use the site.
The web site features the pages illustrated in the hierarchical chart above.
Customers can read news and updates via the Sweets Blog page as well as order custom
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
15
bakery items and view the menu. Customers can also join a mailing list to allow for
coupons and deals to arrive in their email.
Figure 8. The secondary page for the web site entitled "The Sweets Blog” contains news and updates
regarding the bakery.
Using these prototypes and web design best practices, the web designer tasked with
creating the web site “Laura’s Bakery and Cupcake Shop” will create a colorful and user
friendly web site that the target audience will greatly enjoy.
LAURA’S BAKERY WEB SITE PLAN AND PURPOSE
16
References
AGI Creative Team (2010). Adobe creative suite 5 design premium digital classroom.
Hoboken, NJ: John Wiley & Sons.
Confections Online. (2012). Confections cupcakery home page. Retrieved from
http://www.confectionsonline.com/
Felke-Morris, T. (2011). Web development & design foundations with XHTML (5th ed.).
Pearson Education, Inc.
One Extra Pixel. (2012). 10 principles of navigation design and why quality navigation is
so critical. Retrieved from http://www.onextrapixel.com/2009/07/03/10principles-of-navigation-design-and-why-quality-navigation-is-so-critical/
Shutterstock. (2012). Retrieved from http://www.shutterstock.com
Six Revisions. (2012). Guide to website navigation design pattern. Retrieved from
http://sixrevisions.com/user-interface/navigation-design-patterns/
YouTube. (2012). How to make homemade cupcakes from scratch- recipe by laura vitale
laura in the kitchen episode . Retrieved from
http://www.youtube.com/watch?v=ngN4TWgL3sY
Vasquez, G., Victor, S., (2000). Designing a school's web site using information
architecture. Retrieved from
http://www.eric.ed.gov/contentdelivery/servlet/ERICServlet?accno=ED444583