Beruflich Dokumente
Kultur Dokumente
KNOWLEDGE &
COMMUNICATION
DESIGN &
DEVELOPMENT
IMPLEMENTATION
& EVALUATION
Contents
Topic ................................................................................................................................................................... 3
Benefits and Uses ................................................................................................................................................ 3
Purpose of Report ............................................................................................................................................... 3
Description .......................................................................................................................................................... 4
Simplifications, Assumptions and Boundaries ................................................................................................... 4
CARP .................................................................................................................................................................. 5
Functionality ....................................................................................................................................................... 5
Summary ............................................................................................................................................................. 7
Bibliography ........................................................................................................................................................... 7
Gantt Chart .......................................................................................................................................................... 8
Site Map .............................................................................................................................................................. 9
Target Audience .................................................................................................................................................. 9
Site Map .................................................................................................................................................................. 9
Sounds and Images ................................................................................................................................................. 9
Webpage Design Templates ................................................................................................................................. 13
DESIGN - DEFINE THE PROBLEM
Introduction
Topic
Interactive websites are everywhere, without them, the Internet would become a very boring and
unexciting place to browse. Those websites would not be interactive without animated menus, with
animations such as a scrolling menu, sounds, or flash buttons. A flash animation is typically created
using a program like Adobe Flash (as of current, now called Adobe Animate CC (Adobe, 2015)) can be
used on platforms such as a webpage, film, or game. Interactive websites are websites that allows one
to use its functions, for example, clicking on a link, using a search bar, or even creating an account.
The functionality of a website is important for it to continue to improve and increase its user-
friendliness. This report will analyse a website and focus on the design aspect of functionality.
Interactive websites can be very beneficial to many industries and is a major part of the daily life of an
average person. Some of the more popular interactive websites include blogs, forums, and social
websites as they appeal to a wide range of users and benefits them (Nayanathara, 2015). These social
websites allow users to change the way the website or pages look like through a settings menu,
interact with online friends and perform a host of tasks such as applying transactions or submitting
files (pictures, text etc.) make a website user-friendly (Nayanathara, 2015).
Many industries rely on interactive websites to promote their products or services. Industries, for
example, that are categorized under retail shops including: Target, Big W, or Myer are
dependent on their websites to attract potential customers and employees. Customers can access
their information (pricing, discounts, sales or products) at any time and shop online, raising the
popularity and profits of retail stores.
The design industry would be at great advantage as well. From a photography studio perspective, their
best works can be featured at the home page and attract clients or potential business deals with other
companies such as advertisement organisations for commercial photography. The functionality and
design of the website would also be emphasised to stay true to the industry title. Through functions
and promoting purposes interactive websites are of great benefit to many industries to display their
services, products or creations.
Purpose of Report
The client, Keith Mann, is the owner of an organisation called Kirby Studio who focuses on
photography. They wish to create a digital menu to showcase their service and product information.
The website will display their finest works in photography and promote their services to potential
customers and other businesses. The website will be made using Adobe Flash with animations such as
scrolling menus, animated buttons and sounds to accommodate the websites functionality.
Main Body
Description
The client is the owner of a photography organisation called Kirby Studio. They have requested for a
digital menu to be created which portrays their organisations photography skills and services. They
specialise in wedding, commercial, landscape or nature, abstract and artistic photography as well as
digital art to cater for their customers' needs. The clients services include studio renting for
photoshoots or other activities, renting their cameras for events, providing their professional
photographers for events and special occasions and lending their studio for printing. The client has
submitted sixty-eight pictures taken by their photographers to ensure the customers will be able to
comprehend the organisations variety and have a higher chance of choosing the clients organisation
to cater to their needs. The client wishes for the website to include all their services and works with
specific pages. They have outlined that the website must include their logo, five webpages displaying
their information (Appendix - Site Map), audio such as button clicks and action script. The client
submitted the profile sheets of their photographers (in total, six). This would give the clients
customers a choice that can be tailored to their own needs and requests. Including a logo in the digital
menu will make the organisation recognisable and distinguishable from other organisations. The
webpages will help the clients customers navigate comfortably and easily around the website. The
audio will enhance a users experience on the website and make the organisation unique. Linking
action script into the website will provide better functionality and user-friendliness as well as
incorporating design with the website. This project will fulfil the requests of the owner of Kirby Studio
effectively to ensure the business success in the photography industry online.
The alignment of a graphic design is important as it gives the design a clean and neat appearance. It
also shows the designers organisation skills. The logo in the home page is centre-aligned. During the
beginning phases of the website, the logo (right: second picture) was a different image and placed at
the top left corner. It created a large space to the right of the webpage. As a result, it was decided that
another logo was to be made to fulfil the large space at the top of the webpage. Due to the contents of
the webpages filling most of the main container space, they were not aligned, but rather spaced
evenly. However, they are, to an extent, justified (Appendix Webpages). Repetition in the webpages
provide the clients customers with a feeling of familiarity. The buttons underneath the logo stay in the
same positions to minimalize confusion and acquire the neat appearance. The rectangular containers
of the image galleries (Appendix Webpages Gallery) depicting different varieties of photography
also maintain the sensation of familiarity. These repetitions also make the webpages user-friendly as
the user would not take unnecessary effort to locate buttons or galleries. The projects purpose is to
create webpages for the client who is the owner of a photography organisation. These webpages must
contain specific information which contributes to the proximity of the website. As requested, the
gallery featuring the organisations best work is included in the home page and any other relevant
information including icon links to other pages (services, contact and FAQ pages). The gallery page
contains all galleries and no other irrelevant information. The services pages only display the different
services that can be provided and the FAQ page includes frequently asked questions that are
answered. The graphic design element CARP has been effectively used to create the clients website
and has met their needs by abiding to it.
Functionality
Functionality is a prominent feature in web design to ensure the successful experience of a user.
Buttons were used mostly to link to other scenes in Adobe Flash for convenience. Below is the process
of the home button in the up stage then progressing to the over stage, continuing to the down
stage. This process will indicate that the button is animated and linked to a page. During the down
stage, an audio sample has been added to meet the needs of the client.
The image galleries used in the gallery page were created separately to decrease confusion. The
categorised pictures were then imported, distributed into different layers and converted into graphic
symbols. The first and last frames has a colour style of Alpha 0% to assist in the transition between the
images (for more information, please refer to the Flash file: home menu.fla). Classic tweens were then
placed for smooth transitions (refer to logbook: 02/06/2017 and 05/06/2017). These image galleries
portray the best collections of photography effectively as the clients customers would not have use
their hands to scroll through the galleries; instead they can watch the images fade into each other.
As per the request of the client, actionscript has been included in the website. The buttons underneath
the logo are linked to different scenes within the main file. These buttons were coded with the
following:
stop();
import flash.events.MouseEvent;
instance_name.addEventListener(MouseEvent.CLICK, goinstance_name);
function goinstance_name (e:MouseEvent):void
{ Object(root).gotoAndPlay(1,"scene_name");
}
The code begins with the stop code to prevent the flash file from looping through the different scenes
and progresses to the flash events which are linked to mouse events. The instance_name (the button)
has an event added to it which is the mouse event, click. When the button is clicked, it goes to and
plays the named scene. These buttons provide convenience to the client and their customers when
navigating through the website and delivers a smooth transition between pages.
Audio has been placed in the website in various forms: background music and button sounds. When
editing the buttons, the audio sample was placed in the down frame so that it plays when the button is
clicked. This function fulfils the clients request of audio being incorporated into the website. In the
corner of all the webpages, there is a play and pause button. When the play button is pressed, it plays
background music to accompany the website. When the pause button is pressed, the music stops. This
particular function allows the clients customers to alter the website functions to their own taste and
meets the need of the client.
Conclusion
Summary
The client, Keith Mann, is the owner of a photography organisation that is offering its services online.
Due to concerns of the business failing, the client has asked for a website to be made in order to
increase its customers and profit. This has been achieved effectively as the website fulfils all of the
clients requests including: five webpages, their products, sound, and Actionscript. These elements of
the website contain information relevant to the clients organisation such as galleries, contact
information, frequently asked questions and services. A major limitation would be the project needing
to be made in Adobe Flash. If there was a combination of software, such as Adobe Dreamweaver,
used for the project the outcome would be much better.
Bibliography
Adobe. (2015, June 21). Adobe Animate CC. Retrieved from Adobe:
http://www.adobe.com/au/products/animate/features.html
Nayanathara. (2015, May 11). What is an interactive website and how does it benefit the user? | Zyxware
Technology. Retrieved from Zyxware Technology: http://www.zyxware.com/articles/4860/what-is-an-
interactive-website-and-how-does-it-benefit-the-user
Appendix
Gantt Chart
May- May- May- May- May- May- May- May- May- May- May- May- May- Jun- Jun- Jun-
Activity Comments May-18 Jun-08
03 05 08 10 12 15 17 19 22 24 26 29 31 02 05 07
[DRAFT [FINAL
Writing Start introduction with research
DUE] DUE]
[DRAFT [FINAL
Writing Progressing to Benefits and Use.
DUE] DUE]
[DRAFT [FINAL
Writing Progressing to Purpose of Report
DUE] DUE]
[DRAFT [FINAL
Writing Progressing to Description
DUE] DUE]
[DRAFT [FINAL
Writing Progressing to Evaluation
DUE] DUE]
Site Map
Interactive Menu Design Template
Target Audience
The flash menu will be designed for a local photography organisation called Kirby Studio. The client is the
manager of the organisation who has requested for a flash menu to be created. It should serve to promote
their services and display the best works of the organisation. The photography company was chosen because
it would be a better choice for the website design and layout. Photography is also becoming increasingly
popular and in high demand in the modern world. With demand so high, there would be many customers
looking for various photography companies to cater for their needs.
Site Map
Home
Gallery Contact
Photographer's
Services profiles
FAQ
Buttons
These buttons are pictures with transparent backgrounds to adjust to the webpages.
PHOTOS
Wedding
Nature/Landscape
Commercial
Abstract
Artistic
Digital Art
Webpage Design Templates
- The prominent background colour will be white and the foreground colour will be two colours: black
and pastel blue
-
HOME
LOGO
SLIDESHOW OF GALLERY
with pictures shown above
GALLERY
LOGO
ARTISTIC DIGITAL
COMMERICIAL
PHOTOS ART
PHOTOS
PHOTOS
CONTACT
LOGO
ADDRESS
POST ADDRESS
PROFILES OF PHOTOGRAPHERS
MAP OF LOCATION
DIFFERENT STUDIOS IN BRISBANE
SERVICES
LOGO
PHOTOGRAPHY PRINTING
- EMAIL - EMAIL
ADDRESS ADDRESS
LOGO
QUESTIONS ON
SERVICES,
Menu buttons in
down position
Thumbnail of picture
(actual size)
Below is the original
picture
This is the
new logo
for the
website.
gallery.addEventListener(MouseEvent.CLICK, gogallery);
function gogallery (e:MouseEvent):void
{ Object(root).gotoAndPlay(1,"scene2");
}
service.addEventListener(MouseEvent.CLICK, goservice);
function goservice (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene3");
}
contact.addEventListener(MouseEvent.CLICK, gocontact);
function gocontact (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene4");
}
faq.addEventListener(MouseEvent.CLICK, gofaq);
function gofaq (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene5");
}
contactus.addEventListener(MouseEvent.CLICK, gocontactus);
function gocontactus (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene4");
}
bell.addEventListener(MouseEvent.CLICK, gobell);
function gobell (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene3");
}
questions.addEventListener(MouseEvent.CLICK, goquestions);
function goquestions (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene5");
}
EVALUATE THE SOLUTION
CONTEXTS
The client, Keith Mann is the owner of an organisation called Kirby Studio. The organisation specialises in
photography and digital art. They have requested for a website to be made using Flash as they are concerned of
their failing business and hope that reaching out to an online platform will help them. This has placed pressure
on the designer as they are expected to cause the success of the clients business. As the client had submitted
many examples of their products, the file for the website is quite large and there were many instances where
Adobe Flash has become unresponsive due to the large file. At times, it may take the program a few minutes to
save the file. This can eventually impact on time and patience of the designer. Being a student, the designer can
only work from their laptop. Albeit portable, the device is slower than a desktop which would be very
convenient. The website was created using the older version of Adobe Flash 2015. Due to unknown reasons, the
program would glitch whenever Actionscript is added. Therefore, the trial version of Adobe Animate CC, the new
version of Flash, was downloaded and Actionscript could then be inserted. At times, the classroom environment
would become too distracting to work in and result in procrastination. Being an individual working on this
project did not allow distraction from other members from a group if it were a group project. There would be no
issues with communication because it was an individual project, however, it limited help from other students
doing the same project.
INPUTS
The software used for the project is Adobe Flash Professional. This software is very much appropriate for the
project. However, when making webpages, Adobe Dreamweaver would have been a better choice. Hardware
used for the project were two external UBSs; one for backup, and one main USB. The time allocated for the
project was six weeks, shorter than the usual project time. However, the beginning two weeks of the project
were used on tutorials and gathering pictures for the website. As the software was not familiar to the designer,
much time was spent searching for tutorials on specific functions. Eventually, the right tutorials were found and
the problems were overcome.
PROCESSES
The design template used for the project was followed very closely as it was planned in detail. The planning was
very useful as it gave the designer the overall picture of the website and how it would function. The only
changes the designer had made were the placement of the logo (from the top left to the centre), added text
beside the gallery in the home page and the services page was completely altered. It was first planned for just e-
mails to be placed there. However, the designer decided to use pictures as buttons and when clicked, it would
display the e-mail. This made the page more interesting and interactive. The developing phase was somewhat
efficient when the designer had sufficient knowledge to create some pages. As discussed, some tutorials had to
be searched to continue the website. All the webpages were made as separate files and this contributed to a
large problem. the designer searched for any tutorials that linked buttons to external swf files. Eventually, the
other webpages were exported then imported into the main webpage with different scenes.
PRODUCT
The features used in Adobe Flash include: symbol conversion, rectangle and text tool, transform and alignment
tool, publishing files, exporting and importing files, renaming scenes and Actionscript. The website has met the
initial aims effectively has the design template was followed very closely. The designer is very satisfied with the
final product as it fulfils the needs of the client. If this project can be done with a combination of software such
as Adobe Flash and Dreamweaver, it would have impacted greatly on the final product as it is easier to link and
edit pages with Adobe Dreamweaver.