3. Project Specifications
1] Completion of Project:
1. Duration:1Month 13 days
2. Start date: 2/12/2013
3. End date: 15/1/2014
2] Presentation:
1. 60% completion
2. 90% completion
3. 100% completion
3] Documentation of Project work
A. Soft copy-Two CDs:
1.The entire project in one CD, all the final / executable
files should be provided on the first CD.
2.All the raw files used on the website and soft copy of
the documentation in another CD.
B.Hardcopy of Documentation of the project.
4. Serial
no.
Topic Page
no.
1 My concept behind the interface
design
5
2 Softwares used 6
3 Languages used 7
4 Flowchart: Planning and Execution 8-9
5 Client type & Target audience 10
6 Branding: The process 11
7 Storyboard 13-17
8 Execution in brief 18-27
9 Final website 28-42
My Experience
Acknowledgements
Bibliography
Index
5. 5
My Concept behind the
interface design
My concept behind the interface design was to include
the following features:
1. Creativity.
2. Originality.
3. Interactive interface in terms of motion and sound.
4. Futuristic interface with complete substitution of con-
ventional Flash-based web elements like the navigation
buttons, slides and galleries with latest web technology
(HTML5, CSS3, jQuery) based ones. (If in future flash
becomes extinct, this website will still be able to sell its
cakes.)
5. Use of Flash based media rightly where it should be used
i.e. in complex and advanced animations which can be
achieved only with Flash, for example, the Intro anima-
tion and games.
Advantages of limiting the use of Flash:
1. Flash requires an external plugin i.e. Adobe Flash Player
for rendering multimedia content, whereas HTML5 does
not.
2. Flash doesn’t work well with Mac OSX, causing the CPU
to work much harder than it needs to when running flash
applications. And of course when the CPU is overload-
ed, it uses more power, and drains the battery faster.
3. Adobe Flash is not compatible with a touch screen.
4. Apple has been promoting HTML5 as an alternative to
Flash for video and other content on the iOS, citing per-
formance reasons for not allowing Adobe Flash Player
to be installed on iOS devices, including the iPhone, iPod
touch and iPad.
5. HTML5 is capable of running on any computer as well
as on mobile devices such as iPhones, Android devices,
iPad, tablets and smartphones, some of which cannot
run Flash.
6. 6
Softwares Used
Dreamweaver CC
(Design and development of website)
Flash CC
(Intro animation,
Games,
E-cards,
Advertisement)
Photoshop CC
(Background digital drawing,
Image-editing)
Illustrator CC
(Logo)
Premiere Pro CC
(Intro animation,
Recipe video)
Indesign CC
(Documentation)
Xilisoft SWF Converter 6
(Intro animation)
7. 7
Languages Used
HTML5
(Coding of structure of website,
Intro animation video,
Recipe video,
Main banner sound )
CSS3
(Coding of style of web elements,
Menu buttons,
Hover animation)
Javascript
(Rollover image effect,
Form validation)
jQuery
(Main Banner Slide,
Tab spry widgets,
Menu button sound effects,
Modal box forms)
ActionScript 3.0
(Intro,
Game design and development,
E-cards)
8. 8
Flowchart: Planning
and Execution
1] Selecting the Project topic
From the array of topics available, selecting a one
is a rather tough task. A topic that is both challenging
and has enormous scope for creativity should be ideal.
2] Understanding the selected topic
Discussing the topic with faculty members to un-
derstand the goals of the project and the expecta-
tions from me as a website designer and developer
3] Research on the topic
• Collecting reference material, images.
• Analysing the websites created by other students.
• Analysing the professional websites already in the
market
4] Client type, Brand name, Tag line
Determining the client type gives idea of the budget
and helps in deciding the size, quality and dynamic status of
the website.Then, research to select a unique brand name
and tagline not taken by any other company is done and in
process techniques like Mind mapping are put to use.
5] Information architecture
Content of the website is grossly developed and ac-
cordingly the number of webpages & navigation buttons,
hierarchy of submenu in the main navigation are decided.
6] Visualizing the website
Once the mind is clear with the concept, content, ob-
jectives and results of the project topic; visualization of the
9. 9
website interface becomes easy. Brainstorming is a crucial
part of this stage.
7] Creating a Storyboard
On the edifice of the visualized design, few rough
sketchesof thewebsiteinterfacearepreparedonpaperand
the best and refined one is selected to communicate
the idea to the appointed faculty and the H.O.D.
8] Planning on execution
Once the storyboard is approved, a daywise planning
on execution of website making process is done, in order to
achieve the set goal as well as meet the deadline
9] Finally hitting the Web-designing software
With the final design and plan of action in hand it’s
time to harness the power of magical design and web de-
velopment software, in my case, Dreamweaver which truly
has the tools to weave dreams into reality!
10] Making use of other appropriate softwares
Various tasks like Digital drawing, Image editing, Intro
animation, Ads, Sound editing, Video editing, etc are car-
ried out in the relevant softwares.
11] Presentation
Both Final and Intermittent project presentations
form significant steps in building a good, flawless web-
site due to the feedback received in the process.
12] Documentation
Documenting the detailed and stepwise process of
project accomplishment forms a significant step in order
to communicate the concept and process to the third party
as well as for the future reference, analysis, research and
development.
10. 10
Client type &
Target audience
1] Client type
The client type selected is as follows:
• A small-scale and a relatively young, just 5 years
old company.
• No branches.
• Well-established and famous in the local area.
• Wants to extend their business to even farer ar-
eas and launch themselves as successfully into the
web world as they are currently popular in the real
world.
2] Target audience
The target audience selected is as follows:
• Everyone who loves to celebrate occasions with
cakes, irrespective of their belief system.
• Whole of the vegetarian crowd .
• All Quality, Esthetic and Health-conscious people.
• People who opt for online shopping due to their
busy schedule or for the sake of convenience.
• All those who like artistic websites and while enjoy-
ing the site may end up buying some stuff as well!
11. 11
Branding: The Process
1] Company name: Sweet Sponges
Nomenclature done through the technique of Mind-
mapping.Variousnamesthatwerethoughtof areasfollows:
1. Cake shop
2. Cakewala
3. Cake Fairy
4. Celebration
5. Temptation
6. Sweet Tooth
7. Creamy Sponges
8. Sweet Sponges !
2] Tag line: Any occasion, cakes available!
The Tag line which rightly describes the company
concept is always preferable.Various taglines that were
considered are as follows:
1. ”...for the sweet tooth!”
2. ”...to celebrate sweet moments!”
3. ” Celebrate.Rejoice.Live”
4. ” Any occasion, cakes available!”
12. 12
3] Logo
Logo has been designed keeping in mind the following
attributes:
1. It is unique.
2. It is memorable.
3. It is conceptual.
4. It is scalable.
5. It just feels
right!
The concept behind the design:
The logo design depicts a cake piece kept on a base-
plate. The cake piece has two brown sponge layers with
pink strawberry filling layered in between and covered with
white icing cream and a cherry topping.The company name
‘Sweet Sponges’ is written in the center of the longitudinal
section of the cake piece while the font shape and texture
of which suggest sponginess.The tag line ‘Any occasion,
cakes avalable’ is placed on the rim of the baseplate.
The color selection has been done scientifically.The
idea was to incorporate the name of the company in the
color scheme too. The white color of the icing symbolizes
sugar which is sweet in taste and the brown color is sug-
gestive of well baked sponge-like basic cakes.That way the
chromatic message becomes sweet sponges. While the red
and pink colors represent edible and tempting nature.
13. 13
Storyboard
Storyboarding is the first step when the imagination
is brought into the real world through sketching. It provides
a platform for the sandboxed ideas to take gross form.
Screening and refinement in the ideas is done and an on
paper design based on the visualized design is prepared to
reach a proper design plan for creating the website.
Below and on the following pages are displayed the
screenshots of the actual storyboard of this project:
1] Layout page
Webpage dimensions:
width=1024px for all webpages
height=768px for homepage and for rest of the pages it is
content-defined.
18. 18
Execution in brief
A daywise brief description of the work done
as part of execution is documented as follows:
1] Day1 2/12/2013
Storyboard got approved!
Home page interface design mock-up based on the
storyboard started in Photoshop.
2] Day2 5/12/2013
The home page mock-up went through several experiments,
which included a lot of redrawing, rearranging and image
browsing. One of the early and very crude ones is as de-
picted in the image below:
3] Day5 6/12/2013
• Design of side navigation for ‘Our Menu’ started in
Photoshop.For that ladder references searched and
ultimately a spiral one selected, edited in Photoshop
19. 19
and a Design composition prepared with the ladder.
• Finally started with the htmlization of Home page mock-
up in Dreamweaver
4] Day6 7/12/2013
• Ladder composition for side navigation discarded.
• Images browsed for main navigation menu buttons, which
were edited in Photoshop and placed in the Home page.
• jQuery galleries searched and the appropriate ones were
selected.
5] Day7 8/12/2013
• Main menu button design composition discarded.Once
again new images searched for the menu buttons.Main
navigation zoom-on-hover effect created with CSS3.
• Home page background artwork modified following a
series of trial and error to get the desired look.
• Logo design mock-up tried in Photoshop.
6] Day8 9/12/2013
Once again, the main navigation menu button went under
reconstruction in Photoshop and the various phases are
as below:
1.Parachute with Cup cake
2.Parachutes with symbolic images
3.Parachute with button
20. 20
7] Day9 10/12/2013
This was the day to restart with the Side navigation design
all over again.Now, instead of the ladder, which was taking
too much space and adding the unnecessary mess & cha-
os factor, a modern parchment paper was worked out. And
to this design, open-on-hover effect was coded in CSS3
through Dreamweaver.
Spiral Stairs
Ladder
Parchment paper
1
2
3
This was how I had
visualized it to be.
But during execution
it was not feasible
due to its spacious
personality and
confusing nature
Thiswasdisconnected
and unbelievable.
21. 21
8] Day10 11/12/2013
With finer detailing, refinement and polishing finally the
Home page, which also serves as the base template for all in-
ternalwebpages,wascompleted,whichappearedasbelow:
9] Day11 12/12/2013
‘Contact Us’ page started and completed by integrating the
customized jQuery tab spry and relevant content.
10] Day12 13/12/2013
jQuery pan and zoom slider selected for the Main Animat-
ed Banner on Home page. Images edited in Photoshop and
incorporated into the slide.Prior, an HTML5 video was con-
sidered but due to the larger file size it was cancelled.
11] Day13 14/12/2013
About us page started and completed.
Contact us page reworked and completed.
22. 22
12] Day14 15/12/2013
• Building of Recipes page started.Customized jQuery Ac-
cordian selected for article section framework.
• jQuery inline pop-up forms searched for the Login, Reg-
ister, Offers and Wishlist buttons.
13] Day15 16/12/2013
Showed the home page to faculty members. Deepali ma’am
pointed out fine mistakes in the layout and highly
recommended to redesign the Logo since
it was looking like an ignored being as
compared to the whole composition.
Rasika ma’am suggested to make changes
in the side navigation due to it’s heavy
appearance defying the laws of physics.
In effect, layout rectification was done and
the poor old patient side navigation was
reoperated to only emerge out healthy
and fantastic as never before: Simple,
believable and just right! Have a look at
this image on the right >
14] Day16 17/12/2013
Logo redesigning started. Read few techniques to create a
unique design.Finally, logo designing finished by the end of
the day. Following are the few logo designs created before
reaching the final one:
And the Final one!
23. 23
15] Day17 18/12/2013
Home page layout fine corrections done.
About us, Our services, Contact us and Recipes pages mod-
ified since the home page, the base page, was modified.
16] Day18 19/12/2013
• Testimonial page designing
commenced.The parchment
paper idea discarded earlier
found a place within this page.
(Every creation in the World has a
place,justfindit!)Afterthedesign
was finalized the open-on-hover
effect was created in CSS3 and
thus was this page completed.
• Fancybox jquery plugin studied
and attempts to integrate it into
the webpage were started.
17] Day19 20/12/2013
Fancybox jquery plugin successfully integrated into the
webpages for the links and buttons, namely, Login, Regis-
ter, Offers, Wishlist. Thus, with the help of this inline jQuery
pop-up form, the need for separate 4 webpages was elimi-
nated.
18] Day20 21/12/2013
Now was the time to make the website interactive even in
terms of sound. Various sound insertion methods other
than Flash-based were searched, studied and tried out for
practical application through scripting.
19] Day21 22/12/2013
Satisfactorial implementation of sound insertion methods
achieved. The Home page background sound is an HTML5
audio regulated via on/off buttons which are in turn han-
dled by jQuery, while all the button sound effects are pure-
ly handled through jQuery.
24. 24
20] Day22 23/12/2013
This was the day of first intermittent presentation i.e.60%;
to be presented before H.O.D., faculty members and the
students.The Home page looked as depicted by the image
below:
21] Day23 24/12/2013
Based on the feedback received after presentation, website
background colour scheme changed and following that,
a sort of relay-mechanism for changes had started. The
entire CSS styling had to be recoded and design elements
redesigned in Photoshop to match the new color scheme:
Phew! It was a real brain wrecking experience!
22] Day24 25/12/2013
E-cards page designing started & card animation created
in Flash.
23] Day25 26/12/2013
Action-script added to the E-cards in Flash and the E-cards
page was completed.
25. 25
24] Day26 27/12/2013
‘Games’ page designing started.Games animation created
in Flash and interactivity achieved via ActionScript3.0 in
one game and ActionScript2.0 in the other.
25] Day27 28/12/2013
‘Games’ page designing finished.
26] Day28 29/12/2013
The website after make-over was shown to Deepali ma’am
who appreciated the logo design, gave few suggestions and
also shared tips on online marketing and told to go ahead
with the project.
27] Day29 30/12/2013
The most important page ‘Our Menu’, from business per-
spective, was started. jQuery-based Tab spry was chosen
to display different categories of cakes. 42 Thumbnail im-
ages edited in Photoshop and placed categorywise in a list-
based framework.
28] Day30 31/12/2013
• ‘Our Menu’ page designing was finished.
• Google map was incorporated into ‘Contact us’ page.
• ‘Our services’ page got updated with additional data.
• ‘My cart’ page, meant for shopping, was built.
29] Day31 1/1/2014
Intro animation completed in Flash using ActionScript3.0,
which was then edited in Premiere Pro, converted to MP4
and placed within the ‘Introduction’ page of the website as
an HTML5 video with controls and a skip button.
‘Site map’ page designing was commenced.
30] Day32 2/1/2014
Showed the website status to the appointed faculty
members. Deepali ma’am personally browsed through all
26. 26
the webpages
and pointed
out hurdles and
errors from a
first time user’s
p e r s p e c t i v e .
Especially the
‘Our menu’
page navigation
system was
recommended to
reinvent. Worst
was the cake
display gallery,
whichwasperfect
when created but
collapsed on this
day.
31] Day33 -
Day 39
3 - 9/1/2014
Decided to
start with
documentationof
the project work.
Devoured the
documentations
done by previous
students and
surfed the
internettoupdate
my knowledge on
the parts of a
book & on the
ways of writing them and completed 90% of the
documentation.
31] Day40 10/1/2014
Reinvented navigation system of Our menu panel and
designed and integrated a ‘new improved’ cake gallery.
Compact when created
Disaster when showcased
27. 27
32] Day41-Day45 11/1/2014-15/1/2014
• ‘My cart’ page rectified and new features added to it.
• Documentation completed.
• Recipe videos searched, downloaded, edited in Adobe
premiere Pro and added to the relevant section of the
website.
• Final clean-up, finishing and polishing of the website
completed.
33] Day45 16/1/2014
• Pre-print digital copy of the documentation submitted to
the H.O.D. for approval.
• Documentation cover page designed.
34] Day46 17/1/2014
• Final presentation of the website and documentation
done.
28. 28
Final Website
Following is the list of webpages and inline forms that
the website consists of:
Webpages
1] Introduction
2] Home
3] About Us
4] Our Services
5] Contact Us
6] Testimonials
7] Recipes
8] Our Menu
9] My Cart
10] E-cards
11] Games
12] Site Map
Inline forms and pages
1] Login
2] Register
3] Offers
4] My wishlist
5] Floating gallery
6] Purchase form
29. 29
1] Introduction page
This is the first page, the user is directed to, when the
url is clicked, which on opening plays a short introductory
HTML5 video of the company, a scene of which is shown in
the image above, and reverts to the Home page on clicking
the skip button.
The video is a company advertisement in the form of a
story told symbolically. It starts with flowers blooming on a
widespread green land following a melodious tune and
just after that it starts to rain adding to the merriment of
the celebrating flowers which have names of occasions
imprinted on them. While a single leg stool emerges from
somewhere below, the droplets of rain which are in the form
of cake pieces are bouncing joyously eager to serve and
one of the dancing pieces falls on the stool. Then, appears
the company name ‘Sweet Sponges’ announcing clearly,
“Any occasion, cakes available!”
The story is simple. Flowers are occasions and droplets
are the various delicious cakes made by the company.
Flowers survive on rain and so do cakes add vitality to
occasions and that whatever may be the occasion, cakes
are available for all of them with Sweet Sponges!
30. 30
2] Home page
The Home page has been designed with the theme of
‘Cake World’, wherein the background of the main content
area, created in Photoshop, represents the cake world.
Mainnavigationarea can beseentowardsthe top with
five parachutes having sponge textured canopies where
each parachute is a button linked to the assigned webpages.
There is a stacked cake on the left-hand side, on top
of which is the ‘Cake Shop’ with the main Sign-board of
company logo and another small one of the pure vegetarian
green symbol. A chef of the shop is seen leaning over from
one of the windows and pointing out towards the shop
menu which opens on mouse-over.
The central area is for article section which shows a
structure built with cake sponges, in front of which hangs
a display screen displaying the websites main animated
banner supported with two suspension bands. On the roof
area are thrusted 3 linked buttons: wishlist, offers & mycart.
The footer section also displays creative buttons: mail-
box for e-cards, football cake for games, twitter bird with
cake for twitter page and fb cake for facebook page. It also
has link for sitemap and displays the copyright information.
31. 31
3] About Us page
The About us page and all other other webpages of
this website have the same background theme and design
as that of the home page except the article section which
varies from page to page.
Here in the article section, a jQuery- based Tab spry
has been used to display content so that more content
can be accomodated in lesser space. It has 2 headings
namely, ‘Our Company’ and ‘Our Concept’ with the relevant
information inside.
32. 32
4] Our Services page
The article section of this page, Our Services, also
uses a jQuery-based Tab spry to display content with
2 headings namely, ‘Home Delivery’ and ‘Live Bakery’,
which are the special services provided by the company.
The respective content shows relevant data, like the
Home delivery section shows conditions and charges
for cake delivery, while the Live bakery section tells
about its concept and for whom the service is available.
33. 33
5] Contact Us page
The article section of this page, Contact Us, also uses
a jQuery-based Tab spry to display content with 3 headings
namely, ‘Contact details’, ‘Map’ and ‘Feedback’.The
Map section displays the image of the map of the shop
area which is linked to the actual google map, while the
Feedback section has a feedback fom with the cabability to
be submitted via submit button.
34. 34
6] Testimonials page
The article section of this page, Testimonials, has been
designed creatively. It has been divided into mainly two
sections. The one on left is meant to read the testimonials
by hovering on the word ‘Read’ which elicits the opening
of the rolled parchment paper having the customer’s
testimonial written on it. And the other section on the right
side is actually a testimonial form which can be written and
submitted by the users.
35. 35
7] Recipes page
This page, Recipes, uses a jQuery-based Accordian
spry in its article section to display content with 3 headings:
• FromExpert’sKitchen,whichdisplaysamonthlychanged
cake recipe video of the company’s expert chef’s choice.
• FromViewer’sKitchen,whichdisplaysamonthlychanged
recipe video of the lucky viewer whose submitted cake
recipe gets selected.
• Submit Your Recipe, where the recipe video can be
submitted to the company for monthly contest.
36. 36
8] Our Menu page
The article section of this page, Our Menu, contains
42 cake images displaying 6 per tabbed panel. Each tabbed
panel represents a category of cakes and there are 7 such
categories.These panels are designed to be operated and
navigated through the links provided in the side navigation
placed on the left-hand side of the page. Each image
represents the cake variety available for sale and the red
coloured buttons below are to either buy the cake or add it
to wishlist so as to consider buying it in future. On hovering
over the image, a rectangular information box appears
below along with a title box. On clicking over the image;
an image gallery provided with next, previous and close
buttons opens up displaying all the larger-sized images
of the cakes available in that particular category. Also the
name of the cake appears in the title below.
37. 37
9] My Cart page
This page, My Cart, has been designed to store the details
of the items selected for purchase. When no items are
selected, the page displays message as shown in the image
above.
38. 38
10] E-cards page
This and the next page which is named ‘Games’, are
part of the fun corner of this website. These are meant to
add an entertainment value to the website by providing free
services and thereby promote the user traffic towards it.
The article section of this page, E-cards, shows tabbed
panel with tab headings: Birthday, Christmas & Valentine.
The content within the panel consists of an e-card related
to its respective tab heading and the ‘send this card’ button
to send the card to anyone for free. On clicking this button
a modal box opens up to ask for details to send the card.
This and the next page which is named ‘Games’, are part
of fun corner of this website. These are meant to add an
entertainment value to the website and thereby promote
the user traffic towards it.
39. 39
11] Games page
The article section of this page, Games, shows tabbed
panel with tab headings:Cake Cards and Shooter. These
are name of the free games displayed on their respective
tabbed panel. Here the user can play some simple & cool
games just for fun.
40. 40
12] Site Map page
The article section of this page, Site Map, displays a
simple textual map of the whole site, designed specially for
viewers who find it difficult to navigate through the various
pages of the website. The map has been kept intentionally
simple so that it is easy to understand.
44. My Experience
Thisprojectismyfirstcompletewebsite,eachandevery
aspect of which has been thoroughly searched, studied,
planned and executed. I have given my 100% into making of
the website and lived the stages which go into the making. In
process, apart from being the Web designer and developer,
I also experienced being a Brand developer, Visualizer,
Graphic designer, Illustrator, Content developer, Game
designer, 2D animator and Image & Video editor. Playing
these multiple roles has greatly helped me in enhancing
my knowledge about the various skills required, the gravity
of responsibilities held, the level of sincerity needed to be
able to deliver the best, and the unpredictable problems
that can crop up at any stage of project development.
Working on a project was an altogether a different
experience than the regular class assignments done in
parts. The former requires an organized, well-planned and
focussed approach. It teaches to troubleshoot various
problems faced with a positive mind and gives immense
pleasure & boosts confidence when the desired results
are achieved. Presentations, which are an integral part of
the project, have been instrumental in reducing my stage-
phobia.
This project has also taught me few important lessons
and one of which is that it is a prerequisite of any project
to discuss it at its various stages of development with the
clienttounderstandtheexpectationsandneedscompletely,
so as to deliver the best possible results. Also that meeting
deadlines is obviously important but along with that it is of
utmost importance to not be overstressed to the extent that
it hampers creativity and gives compromised outputs. When
faced with extreme frustration, it is better to take a break
to rejuvenate but never give up. Finally, it strengthened my
belief that Perfection being a moving target, can never be
achieved.
45. Acknowledgements
This project website ‘Sweet Sponges: A cake shop’
could not have been possible without the help and support
of following people to whom I extend my deep appreciation,
gratitude and thanks:
First, I would like to thank Mr. Mohan Chalam Sir, the
Centre Director, for providing the technological learning
platform ‘Arena Animation Dadar’, for taking keen interest
in personally supervising the project presentations and
most importantly for recommending the advanced course
‘Digital Media Pro’.
I extend my sincere thanks to Mrs. Deepali Matakar
Ma’am, Centre Academic Head, for believing in me, greatly
motivating me throughout the project, compelling me to
be super creative, allowing me to work at my own pace
and throwing challenges by pointing out the pests in the
cake shop, I mean the problem areas, thus playing role of
a demanding client to bring out the best possible results.
I express my gratitude to the faculty members, Mrs.
Shamim Khan Ma’am and Ms. Rasika Lad Ma’am for
efficiently imparting the knowledge of ‘Web designing and
development’ and laying a strong foundation for this and
many more projects to come. I extend my special thanks
to Rasika Ma’am for her inexhaustibly cool temperament
which is utmost important for creativity to flourish.
Of Course, special thanks to Mrs. Sujata Ma’am
for the important sessions on ‘Basics of HTML5’.
Also it is worth appreciating the services provided by
‘Google search engine’ making any information available at
the tip of the fingers.
I owe my glory to my parents and techie brother, to
whom I dedicate the project, for always being helpful
unconditionally.
This site has been created to fulfill a requirement of
the course ‘Digital Media Pro’ offered at Arena animation,
Dadar.
