ASSIGNMENT ONE
CO N T E NT S TH E BR IEF
T IM E L IN E
RESEARCH
S TOR Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
TH E BR IE F
T IM E L IN E
RESEARCH
S TOR Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
THE BRIEF CREATE AN ANIMATED TEASER TO PROMOTE A NEW LOCAL TRENDY INDIE CAFÉ IN TOWN
OBJECTIVE •
PRACTICE & EXPLORE THE CREATION OF AN
REQUIREMENTS •
ANIMATED TEASER FOR A WEBSITE USING ADOBE EDGE ANIMATE
USE REAL TEXT, VECTOR IMAGES AND IMAGES IN THE CREATION OF THE TEASER
•
IMAGES CAN BE ANY IMAGES RELATING TO THE DESIGN, EITHER ONLINE OR PHOTOGRAPHED
SPECIFICATIONS •
MINIMUM WIDTH OF 960 X 700 PIXELS OR MORE
•
MINIMUM DURATION OF 10 SEC ONWARDS
ASSESSMENT •
DESIGN SKILLS, ADOBE EDGE ANIMATE TECHNICAL SKILLS
•
EFFECTIVENESS OF THE TEASER AND ITS MESSAGE (USP)
TIMELINE
RESEARCH
S TOR Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
TH E BR IEF
R E F L E C T IO N S
AUGUST
MY TIMELINE MON
3 10
TUES
4 11
Define the USPs
WED
5
Start research on cafés
12
18
19
24
25
26
Finish Frame 3
31
6
FRI
7
SAT
SUN
1
2
8
9 Select café
13
14
15
16
Start on illustration
Moodboard
17
Finish Frame 1
THURS
20
21
22
23
27
28
29
30
Finish Frame 2
Finish Frame 4
Start on execution
SEPTEMBER
MY TIMELINE MON
TUES
WED
THURS
FRI
SAT
1
2
3
4
8
9
10
11
12
13
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
7
5
SUN
Prototype: Feedback
6
Refinement
14 SUBMISSION
30
MY TIMELINE
START
PROJECT
RESEARCH
STRATEGY
EXPLORATION
DEVELOPMENT
REFINEMENT
END
RESEARCH
TH E BR IEF
T IM E L IN E
S TOR Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
RESEARCH CREATE AN ANIMATED TEASER TO PROMOTE A NEW LOCAL TRENDY INDIE CAFÉ IN TOWN
Must be recently set up from year 2005 onwards.
A small restaurant selling light meals and drinks OR a bar or nightclub.
NEW CAFÉS 1. Rabbit Carrot Gun
3. Loysel’s Toy
character. They use communal
USP: Eat, drink and sleep. They
USP: Located along the Kallang
tables (Chinese tradition).
offer suites above the restaurant.
Riverside Park. Unique bespoke
All in a traditionally built
blends called 1,000 Cups. In line
5. The Bravery
Singaporean shophouse.
with serving the surrounding
USP: Serves exceptional coffee.
community, they also have 2. Chye Seng Huat
commuter bicycles for rent.
USP: Concept bar provides a one
6. Group Therapy USP: 100% Arabica beans freshly
of its kind coffee experience with
4. Ronin
ground on premise. Comfort,
a 360-degree view of the bar. The
USP: Nice interior design, dim
warm hospitality, good food and
CSHH Coffee Bar resides within
and broody. Hidden cafe: no
drinks. Café in the day, the space
Chye Seng Huat Hardware.
social media site. Underground
is used for events at night.
7. The Tuckshop
surroundings, friendly relaxed
guarantee consistency for every
USP: Set up by an Englishman,
service and generous portions.
cup of coffee.
an Italian, a Frenchman and a
Set up in 1999 (not very recent).
Singaporean. A social space
13. Kith
inspired by everything local.
10. Chopsuey Café
USP: Named for their philosophy
To them it means someone
USP: An East meets West.
and intimate atmosphere, Kith
who supports their ‘local’
Serves an array of Chinese
takes prides on their coffee and
neighbourhood wherever in
comfort favourites and new
delicious, fuss-free dishes rally
the world they may come from.
interpretations of traditional
in a compelling invitation, serving
Hence, The Tuckshop: ‘Made
foods influenced by the Anglo-
up simple dishes from the heart.
by Locals’. They have another
Chinese experience in the UK, US
communal social and event
and Australia.
space located right next to The Tuckshop called The Recess.
14. Froth USP: Situated at the lobby of Big
11. Windowsill Pies
Hotel (near school). The chef
USP: Artisanal pies and tarts.
used to work at Tippling Club.
8. Shop Wonderland
Serves contemporary Asian
USP: Houses a café, florist, retail
12. Coffee Man Coffee Roasters
cuisine. Froth aims to please
and workshops located along the
USP: Apply cherry picking -
locals and tourists as well.
quaint street of Haji Lane.
technique to get dibs on the best beans. Use roasting techniques
14. Kilo
9. PS. Café
honed from years of experience,
USP: The name ‘Kilo’ actually
USP: Detailed interiors, lush
and the latest roasting tech to
comes from the phonetic name
of the half-blue, half-yellow
Unlike other cafés, The Refinery is unique because it targets not just at ordinary café seekers but also towards creative people which I thought was an interesting selling point to tap on.
nautical flag for ‘K’, which signals the message “We wish to communicate with you.”Their aim is to communicate moments defined by hearty food, soulful music, warm conversations, and unforgettable occasions. 15. The Refinery USP: A community for creatives. You get three concepts rolled into one: Yakitori restaurant (first floor), a bespoke cocktail bar (second floor) and a craft workshop (third floor).
I chose to work on The Refinery because it meets the brief of a "new indie café" as it was set up in December 2014.
However, as there is an increasing trend in indie cafés sprouting in Singapore, there is a need for The Refinery to adapt to the changing needs of the consumers in order to stay relevant in the competitive F&B industry. Based on design thinking research, I have identified some key issues that The Refinery is facing which calls a need for a re-design and identity for the café. Although I understand that this assignment calls for a creation of a new website and teaser design to an existing brand, I also feel that there should be a purpose for such agenda. Therefore the objectives are aligned in a way beneficial to the company and it is not just another re-design without a reason beacause like the saying goes, “If it ain't broke, don't fix it.” - Bert Lance.
BASIC UNDERSTANDING
Origin: The Refinery is a brand new concept jointly developed by the crafty folks of The General Co and the space gurus of Architology. It officially opened its doors on the 12th Dec 2014. Concept: Part casual dining
Aims: Redefine casual dining and
Features and Services: The designer
restaurant, part mixology bar and
social drinking, as well as to defunct
workspace situated at the third level
part designer workspace, The cafĂŠ
the notion that good food and quality
houses a community of aspiring
brings a pool of talented individuals
drinks must be expensive. It's all
craftsmen and designers who yearn
from the fields of culinary, mixology,
about honest food cooked with refined
to create new amazing goods and
craftsmanship and design together
techniques, and classic drinks mixed
services for everyone.
into a 3-storey complex.
with a little twist.
THE SITUATION
COMEPTITIVE LANDSCAPE The café scene in Singapore is highly
discover new places to check out. So
saturated and at almost every corner or
long as the hype is here, it makes it more
eating place you go, there is a café. This
challenging for cafés to stand out.
leads to an increase in food blogs as well. Even apps are designed to help people Left: CafeSG | cafesg.bigspoon.sg Top: LadyIronChef | ladyironchef.com
DEFINING THE AUDIENCE DEMOGRAPHIC
There are two kinds of people
alcoholic drinks. Some who have a
who patronise the café. The most
family would bring their kids along
common ones are young adults
for meals. These people belong to a
aged 18 to 25 who take wish to be
middle to high income range. They
identified as a "hipster", whether or
are spontaneous and are active in
not they admit it. They like to do café
being social and trendy.
hopping as they are adventurous. There is however, a lack of creatives
CONSUMER TRENDS
The other type are adults aged 25
who frequent at The Refinery which is
to 40 who go to The Refinery for
what the company is trying to target.
There is growth of middle-
These people are willing to pay
income consumers in the
as long as it makes them look
developing nations and more
good and feel good.
younger generations are able to afford more high end goods. This resulted in the birth of cafés in the F&B industry where they are priced higher because they may be artisanal or they have an attractive dining experience; setting or service.
COMPETITOR ANALYSIS
THE TUCKSHOP The Tuckshop's website and identity has a very similar vibe and style as The Refinery's. Their website is like an inverse of each other's. This makes their identity not very special and easily confusing. thetuckshop.com.sg
CURRENT BRAND ELEMENTS
Logo
Colours
Typography
A desciptive logo. Shows that they take pride in their cafe location as well as establishment date. Centralised in its layout, this detail shall be referred to when designing the layout for the animation.
Black and white are their primary colours. Their secodnary colours are both warm and cool tones as seen in their furniture, cutlery and photography filter choices.
Their logo consists of sans serif typefaces. The brand name is stylised with a drop shadow. In their menu design as well as decorative posters that they use in their store uses the calligraphic script typefaces. The usage of these typefaces are trendy and seen in many other cafes as well.
CURRENT BRAND ELEMENTS
Photography
Website
Using a top shot angle to capture their images, cool toned filters are also applied to photos that they post on their social media sites.
Their website is greeted with a micro The overall website is easy to page that showcases a slideshow navigate although the overlay of text background of images of their cafe. on images makes it hard to read. The logo is placed extremely tiny to the extend that it is partly illegible.
CURRENT BRAND ELEMENTS
Illustration An interesting design element that they have is the illustration on their wall mural. The design is placed on a large wall on the first level which is hardly unoticeable. What makes this stand out is that it is not very cohesive with the rest of the design style. This illustration speaks of their personality and represents their creativity which is important as they are trying to create a design community within their cafĂŠ.
IDENTIFYING PROBLEMS KEY ISSUES • Does not attract proposed target audience • The design style is not cohesive
• People do not know much of their existing workshop space • People do not associate them for their USP
• Too many indie cafés, everything looks similar
• Needs more personality
EXPECTATION VS REALITY The aims of The Refinery is to target at creatives but no one truly identifies The Refinery as a creative community. Hence, with the aid of design, it can help realign the perspectives of consumers and remind them of the uniqueness of The Refinery. The current identity design has veered off their desired brand positioning and needs to be realigned so that they can stand out from the other cafés.
WHITESPACE ANALYSIS Chopsuey Café
The Bravery
The Tuckshop
Kith
The Refinery
Ronin
Kilo
PS. Café
MODERN
In order to stand out, an analysis has to done to know what the competitors out there are doing so that they can find a unique sweet spot. In this research, I wanted to know what the common look and feel is that cafés are using and with that, I will then position The Refinery at the style with the least saturated look.
Rabbit Carrot Gun
Group Therapy
Loysel's Toy
Chye Seng Huat
Froth
BLACK & WHITE
VINTAGE
PS. Café
SWEET SPOT
FUN, LOUD, VIBRANT
The Pantry at Shop Wonderland
Kith
CALMING
FLORAL
SOLUTION
PROPOSITION A re-design that aims to promote The Refinery's USPs. This includes a website re-design which will include a teaser as well. Their new design would go in the direction of a fun, vibrant and loud style as determined by the whitespace exercise.
TH E BR IEF
T IM E L IN E
RESEARCH
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
S TO R Y B OAR D
R E F L E C T IO N S
THE USPs MESSAGES TO CONVEY •
A community for creatives
•
An avenue for people to eat, drink and create
•
3-storey complex that consists of Level 1: Casual Yakitori restaurant
Level 1
Level 2: Mixology Bar Level 3: Designer Workspace
Level 2
Level 3
TH E BR IEF
S TO R Y B OAR D
T IM E L IN E
M OO DB OA RD
RESEARCH
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
MOODBOARD
MOODBOARD
The design style observed in the moodboard is chosen to give the brand a more quirky,
bubbly, youthful and vibrant
outlook to make the brand more personable, in order for them to reach out to their target audience; youths and creatives.
MOODBOARD
Song 1:
Song 2:
Growing up, I use to play games from the game site 'Orisinal' and I know that they have a variety of decent music. This song is from the game 'Milk the Cow'. The whistling in the song evokes a vintage old style kind of vibe that did not quite match the design even though it is a plesant and cheerful song.
The next song I shortlisted is from the game 'Carrot Track' which is also from the Orisinal site. I sampled this song because it a very happy vibe but when I tried to play it with my animation, somehow this song is just way too cheerful and the pacing does not go well with my video.
The key to a good animation is the correct selection of the audio track. It has to bring out the vibe and personality of the tone of the design. It is also crucial to sync the sound with the elements in the video so that the pacing matches. Here are the top three tracks that I narrowed down from my browsing list. Mainly the keywords when searching for the audio that I have used are "fun, happy, cheerful, upbeat, positive and fast".
Song 3:
At last from many other songs I have listened to, I chose to use this song for my video. 'On Top of the World' has a upbeat pace to it, the guitar's melody syncs well with the pace of the video and the clapping noises makes it a fast and cheery song. Furthermore, I thought
that this song would match the target audience without it being overly cheerful like the other songs that I have sampled. Also, I spefically chose the instrumental version of the song so that it will not be too heavy and confusing when the the viewer watches it.
T IM E L IN E
RESEARCH
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
TH E BR IEF
S TOR Y B OAR D
R E F L E C T IO N S
STORYBOARD
STORYBOARD
STORYBOARD
DIGITAL STORYBOARD Frame 1
Frame 2
Frame 3
Frame 4
LOOKING AHEAD
Given that the first assignment was to create an animated teaser for the website, I felt that it is important to plan ahead and know roughly what the website features so that the information in the teaser is refreshing and different from the contents in the website. I did a rough sketch of what I want the website design to look like.
LOOKING AHEAD
LOOKING AHEAD R - Respite
E - Established
F - Founder
I - Initiate
N - Navigate
E - Exquisite
R - Recipe
Y - Yakitori
RESPITE
FOUNDER
EXQUISITE
I wanted to show that the ambience in The Refinery is the place for people to take a break and enjoy. The page will be illustrated to show the café's interior design. I want this to be interactive that they can click on the buttons as light switches so they can see the morning and night view of the café. It is important to show the café's interior because it is an opportunity to mention that some of the furniture is actually crafted from the workshop upstairs such as the copper light fixtures.
The Refinery is a collaboration between Bu Shukun, design director of Architology Interiors, and Colin Chen, creative director of The General Company. This can be shown through illustrations of their faces, namecards etc.
Located in level 2 is the mixology bar. As they serve a range of alcohol, they can feature their unique blends and mixtures here. It can be interactive in a way that when clicked on a particular beverage, the preparation for the drink happens.
ESTABLSHED As stated in the logo, The Refinery is a new café that only recently opened it's doors in late 2014. This detail can be shown through a calendar which is interactive because the pages will flip and they will show the events on each day such as "New menu released" or "ABC Workshop".
INITIATE In order to get people to use their workshop for designing, this page can showcase examples of what are the possible things that can be done or have been done previously. This serves as an inspiration for people to start on a project in their space. NAVIGATE Situated in Jalan Besar at the southeastern district in central of Singapore, directions of what buses to take or roads to drive to get to the café can be shown.
RECIPE When clicked on the illustrated ingredients, a new window will open and show the menu in PDF. YAKITORI Their flame grilled process can be shown here to show how they cook their yakitori.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
RE FIN EM EN T
FE ED BA CK
R E F L E C T IO N S
IL LU ST RA TI ON CH AL LE NG ES
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image I wanted to look for food images so I went to The Refinery's social media site and found some images of the food they serve. In order to highlight that it is a cafĂŠ, I chose to use a common dish that cafĂŠs usually serve- waffles with ice cream. I also chose this image because I thought that the sauce dripping down could be designed to be like a stop motion animation as seen in the frames below.
Frame 3 to 6: Stop motion effect
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image Also on their social media site, I found an image of coffee as a representation of the drinks they serve. What I like about this image is that the details of the foam on top of the coffee could be tied in with the previous stop motion animation effect. I also drew steam on top of the hot coffee so that the image becomes more interesting. I drew the illustration over a yellow background as a guide so that the steam is visible.
Frame 3 to 6: Stop motion effect
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image Besides food and drinks, I needed to find an image for the category for "Create" and I chose to find some tools that designers use when they are making a project. I like to inject colours into the illustration to make it more quirky and cohesive with the moodboard style.
Frame 3 to 6: Stop motion effect
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image I wanted to capture the building of The Refinery because it is special unlike most cafĂŠs which only has one level to themselves. The words "115 | KG" actually tells you their location which is at 115 Kings George Avenue.
Frame 3: Final illustration
ILLUSTRATION Frames 1-6: Testing of typefaces In order to make the series look cohesive, I decided to design the letters from scratch. Before I did that, I tried to match some typefaces with ones that are quite similar to the logo's typeface to see whether it will match and if it is effective in bringing out the quirky and fun style that the moodboard portrays.
Frame 7: Final typeface design
ILLUSTRATION Frame 1: The logo
Frame 2: Typeface that resembles logo I also used the typeface "Din" which is very similar to the logo's so that visually, the design feels united. From there, I introduced more colours and added drop shadows to give it a more dynamic feel like the logo has.
Drop Shadow
Outline
The usage of this typeface is only for short words and to give them emphasis so they stand out. Example: "THIS IS OUR CREATIVE COMMUNITY". The important word is "creative" and only that word would be give this type treatment. The other words would be hand written.
ILLUSTRATION Frame 1: Typeface Design
Frame 2: Moodboard
These are hand written typefaces that take inspiration from the 'calculator' font as seen in the moodboard. The reason for doing so is that to imitate how things are now digitalised like how it became an abacus to a digital calculator. Technology has come so far.
In order to suit the style of the design, The type that I have created is towards a more freehand and casual look as seen in the way that the edges are smoother and less fixed. This gives it a more fun vibe to it. The process starts from drawing the letters on a tablet and then outlining it in Illustrator and then using the pen tool to take away anchor points to minimise the edges to make it more smooth. The last few steps involve drop shadow and colour.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE N CE S
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
BOOK REFERENCES
After knowing the design was illustration based, I went to the Central Library near school to borrow this book entitled 'Illustration Next' by Ana Benaroya. I chose to take this book home as this book compiles illustrations which is very close to the moodboard's stylisation.
Some of the illustration inspiration came from the designer, Kyle Platts. His illustration style is fun and exciting. I especially like the colours he used in his design and the details given to the drawings like the brush strokes help to show movement and texture. Here are some of his other works that I saw online.
BOOK REFERENCES The author, Ana herself, shared some of her designs and she also answered a few questions (which may be ask by herself haha). In the book, there is this reply that made me reflect on my illustration. The question was "How do you know when to stop?" and she said "...I try to allow things to flow naturallly from me rather than over intellectualise." This helped me to understand how to draw freely and not be too harsh on making it "correct", or being too "realstic" which is what the moodboard is not about.
Overall, I really enjoyed how she illustrated these cereal packaging. The line work has a sense of freehand look to it, they are not perfectly skewed which is the beauty of it. She managed to inject some humour as well which I found to be hilarious.
That is Ana and on her Tumblr page, her bio writes "I love hot sauce, muscular men, and bright colors. When not drawing, I often am contemplating the meaning of life." I felt that this was the kind of brand personality that The Refinery is aiming for.
BOOK REFERENCES
Another book on illustration was "Illustrator: The Early Years" by Tom Schamp. Most of his designs are illustrated to make it look like a "painting", he uses brushes that mimic real painting brushes to create the strokes and he uses a lot of it with different tones so that the design looks more refined.
If you take a closer look at this image, it is actually a side way view of the book being opened and it shows the contents of what is inside of the box and I thought that this was pretty interesting concept and maybe I can use this idea for my website design.
The choice of colours that he uses heavily inspired my illustration. The colours are rich and vibrant. It uses both cool and warm tones and has high contrast to show details clearly.
BOOK REFERENCES
The last book I borrowed was "Adobe Edge Animate Classroom in A Book". I was afraid that I would get lost along the way when executing the video so I played safe and took this book home. So far, what I have learned in class was sufficient to keep process manageable.
It did help by giving me tips such as the "special paste options". I learned what each of the paste options were and their functions. This helped me to in being efficient in the animation process.
ONLINE REFERENCES I also looked at online videos such as 'Best Friends | Disney Mashup' by Disney (0:00 to 0:03). I like the intro of the video where the text is a bit skewed and I tried to mimic it in my video as well by adjusting the 'Transform' tool.
I also went to Interbrand's website to view some of their videos of their works and I saw this animation they did for 'Qualcomm' and what got me inspired was the part (00:07 to 00:09) where the logo is transparent and transitions into a solid logo.
Another animation that inspired me was the animated logo treatment as seen in 'Latam' (2:38 to 2:41). The logo will appear from a small to larger scale while it animates. I tried to do that with The Refinery's logo as well.
Click to open in browser
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
EXECUTION
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
EXECUTION Step 1:
Frame 1:
Set the stage to 1474px X 768px as it fits perfectly in my Chrome browser.
The first frame is important get right to set the pace as the rest of the video will work from there. Frame 2:
Step 2: Set the Responsive Scaling and Center Stage to 'Both'
Step 3: I divided my animation into 4 frames which were dependent on the background colour of the animation.
This is where most of the sound effects are placed and it is tricky to get the animation to be in sync with the sound effects. Frame 3: Notice that at "ALL OF THIS HAPPENS", the words get cut off when they touch the border. This is done intentionally so that it does not overlap the border when it moves out of the screen. Frame 4:
Step 4: Converting mp3 files to ogg and importing them into the timeline. On individual tracks, to set whether to have autoplay or not.
The last frame involves the button to replay the video as well as a button to direct the page to the official website.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE N GE S
R E F L E C T IO N S
CHALLENGES Challenge 1: I treid to prview my animation in my Chrome browser but the page would not load. I rembered that the icon "!" meant errors so I viewed it and it said that CCS filters are not supported. I had to remove a lot of filters such as 'Hue Rotate' and 'Blur' which I have applied to the animation. Challenge 2: When importing an image, this popped up and I knew that it was the file name that was not typed correctly. Naming is very sensitive to such programs so I took note not to do things such as capitalise file names.
Challenge 3: All of a sudden, this popped up and I had to save my animation and restart the software.
CHALLENGES Challenge 4:
Challenge 5:
There was once when I tried to preview my animation in the broswer and this pop up appeared. I had no clue what this meant and so I clicked "ok" and I went and reclick to preview in browser and the animation still did not load so I quit Edge and reopened the file and it managed to play on the browser.
One of the most challenging thing was the pacing of the animation and the audio. I tried to make it sync as much as possible. It was time consuming to adjust the keyframes so it plays at the correct timing and not out of place, not too fast or too slow.
This error repeatedly happened throughout my designing process.
Challenge 6: After I have set all the audio in and loop the video in my browser, certain tracks were not looped so I tried to enable 'Autoplay on each track' but it would only just play all the audio at the start which is not what I want. I also tried to label the start of the stage as "loop" and Open Actions to the button to make it Click > Playback > Stage> ("loop"). This made it loop but the audio does not. Then I tried Playback > Replay > Stage instead and it worked.
CHALLENGES
Challenge 7: I also tried creating a spritesheet of the animated logo. I wanted it to have a transition of the letter from transparent to solid white. However, after importing it into edge animate and adjusting the values, the preview of the animation does not look as smooth as I want it to be.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
R E F L E C T IO N S
FEEDBACK Q: What is your first impression of the design? Is everything that should be included in the design there? Does the design seem appropriate for the stated purpose? Person A, aged 22:
Person C, aged 20:
The video is good but the audio can be improved. Maybe add more sound effects to it? The alignment of the space is uneven through the second frame. (as seen below) The pacing can be imporved. In terms of illustration, it is appropriate.
I like the sound effects but the paint brush sound can be softer, right now it's too loud. The music comes on too loud and sudden at the start. Maybe can have a transition from soft to loud.
Person D, aged 32: I like the sound effects, it makes the video more interesting especially when the teaser is pretty long. Overall design is more interesting and unique, I think it helps to give The Refinery more character and helps them to stand out. Person B, aged 20: I like the stop motion effect. I think there should be an indicator or a button to link the teaser to the website.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
RE FI N EM EN T R E F L E C T IO N S
FE ED BA CK
ILL US TR AT ION
CH AL LE NG ES
REFINEMENT
Audio:
Layout:
More sound effects were added to make the animation more interesting.
Mostly centralised to strike a balance as seen in the logo itself.
Colour:
Usability:
Contrasting of colours to ensure readability of text.
Buttons to replay the video and to link to the website.
TH E BR IEF
T IM E L IN E
RESEARCH
S TO R Y B OAR D
MO OD BO AR D
TH E US Ps
E X E C U T IO N
RE FE RE NC ES
ILL US TR AT ION
RE FIN EM EN T
FE ED BA CK
CH AL LE NG ES
REFLECTIONS
REFLECTION Overall I found the project to be a very fun one because I got to re-interpretate the brand and use animation to bring it to life. I will admit that the software, Edge Animate may be a little difficult to master at first as compared to After Effects but after a while, it gets easier to use and it can be fun as well. When creating videos, After Effects is a better tool to use because most of the effect presets are there where I could do things such as create 3D layers so I can toggle with the X,Y,Z orientations. It was also hard to fix errors because not a lot of support is found on the web as Edge is a pretty new software. In the age of a digital revolution, browsers are becoming less Flash friendly and moving towards HTML5, CSS3 and JavaScript. Edge Animate has succeeded the Flash platform which is why it is essential to be equipped with knowledge on how to operate the software so that I am a relevant designer and not lacking behind. I am looking forward to designing the website!
ASSIGNMENT TWO
CO N T E NT S TH E BR IEF
T IM E L IN E
RE FE RE NC ES
SI TE MAP
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FIN EM EN T
RESEARCH S O L U T IO N
ILL US TR AT ION
FE ED BA CK
TH E BR IE F
T IM E L IN E
RE FE RE NC ES
SI TE MAP
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FIN EM EN T
RESEARCH S O L U T IO N
ILL US TR AT ION
FE ED BA CK
THE BRIEF CREATE AN INTERACTIVE WEBSITE FOR THE TRENDY AND INDIE CAFÉ YOU HAVE CHOSEN IN ASSIGNMENT 1
Not static, must be enagaging The Refinery Café
OBJECTIVE
REQUIREMENTS
• THE OBJECTIVE IS TO PRACTICE & EXPLORE
• GATHER ALL THE INFORMATION NEEDED FOR
THE CREATION OF AN INTERACTIVE WEBSITE
YOUR CHOSEN CAFE. DESIGN AND ORGANIZE THE
DESIGN USING ADOBE EDGE ANIMATE
INFORMATION INTO SUITABLE SECTIONS BASING ON THE THE CAFE'S UNIQUE SELLING POINT, FEATURES,
SPECIFICATIONS •
POPULAR FOOD... ETC. YOU CAN USE A SITE MAP TO HELP YOU MAP AND ORGANIZE THE CONTENT DESIGN
THE WIDTH OF THE WEBSITE WILL BE BASED ON THE CURRENT TREND SIZE OF AT LEAST 960 PIXELS OR MORE
•
•
• THE NAVIGATION SHOULD BE CLEAR AND SIMPLE FOR
THE HEIGHT OF THE SITE DEPENDS ON YOUR DESIGN AND
USER TO NAVIGATE, BUT EXCITING AND ATTRACTIVE TO
CONTENT DESIGNED
ATTRACT THE USER. USER SHOULD BE ABLE TO FIND ALL THE INFORMATION PERTAINING TO THE CAFE THEY
YOU ARE TO CREATE AT LEAST A MINIMUM OF 4 SECTIONS
NEED AFTER BROWSING THE SITE
OR MORE •
ASSESSMENT
USER MUST BE ABLE TO NAVIGATE AND ACCESS ALL SECTIONS OF THE SITE WHEREVER SECTION THEY ARE AT
•
YOU ARE TO ALIGN THE SITE TO THE CENTER OF THE
SCREEN •
YOU CAN DESIGN THE SITE BACKGROUND IF YOU WISH
•
YOU MAY INCLUDE MUSIC OR SOUND EFFECTS TO ENHANCE SITE IF YOU WISH
•
DESIGN SKILLS AND ADOBE EDGE ANIMATE TECHNICAL SKILLS
• EFFECTIVENESS OF THE WEBSITE AND ITS OBJECTIVES
TH E BR IEF
TIMELINE
RE FE RE NC ES
SI TE MAP
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FIN EM EN T
RESEARCH S O L U T IO N
ILL US TR AT ION
FE ED BA CK
OCTOBER
MY TIMELINE MON
TUES
WED
THURS
FRI
1
2
Edit Assignment 1
5
6
7
Sitemap
8
SAT
SUN
3
4
Organise information
9
Drafts
10
11
Start on illustration
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Finish Frame 2
Start on execution
Refinement
Finish Frame 3
Finish Frame 1
Finish Frame 4
Presentation board
Finish Frame 5
NOVEMBER
MY TIMELINE MON
TUES
WED
THURS
FRI
SAT
2
SUN 1
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
SUBMISSION
30
MY TIMELINE
START
PROJECT
RESEARCH
STRATEGY
EXECUTION: ILLUSTRATIONS
EXECUTION: EDGE ANIMATE
REFINEMENT
END
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FIN EM EN T
ILL US TR AT ION
FE ED BA CK
CONTENT RESEARCH This research aims at examining the current content on their official website.
SPLASH SCREEN On the very first page, the splash screen shows a fullscreen background image slideshow that loops the photos automatically. The words written are rather hard to read as the images that they use are quite crowded and complicated. In examining the photography style, I noticed that they intentionally try to capture photos from a top view angle. The text reads "WELCOME to something really amazing". What I did not like about this was that the logo is unreadable and almost non-existent. With the new website design, I would ensure that the logo is readable and noticeable.
CONTENT RESEARCH FACEBOOK PHOTOS These images are extracted from their Facebook Page, which further highlights the concept of photography using the top shot angle. You can tell that they intentionally try to be consistent through featuring top shot images on their social media. I thought that this could be a unique feature and I wanted to retain this idea for the website to make it more cohesive with their current branding.
CONTENT RESEARCH
HOME PAGE The home page uses the same concept of the background image slideshow and the navigation bar is located at the top of the page.
CONTENT RESEARCH
HOME PAGE As the user scrolls down the home page, they are informed of the operating hours of the restaurant. I felt that this bit of information could be properly placed into another page so that it is not complicated for the users to search for details. A more systematic layout can greatly enhance the user experience. Also, with an engaging navigation, readers will then spend time to explore your website rather than to just place information in an unorganised manner.
CONTENT RESEARCH
HOME PAGE The home page does not end there, towards the bottom end of the page, they had embedded an interactive Google Maps which I found was rather annoying because as I scrolled down towards the bottom of the page, my cursor got stuck in the maps, so instead of going down, I was acutally zooming in and out of the Google Maps. Although they had left space at the sides of the screen so that the cursor could be placed there, I still feel like it is quite irritating and if this were to be viewed on the mobile site, it could be even harder to scroll down. Therefore, I still want to have the Google Maps for the website but I would direct the users to do so via clicking on a button which opens the Maps a new window.
CONTENT RESEARCH
RESERVATIONS On the third icon of the navigation buttons is called "Reservations" which is linked to the application "Chope" which allows customers to book tables instantly prior to going down or even giving the cafĂŠ a ring. As this is a useful tool, I made sure to include this feature in the new website but instead of having it as one of the navigation tabs, it would be more appropriate to place it under a "Contact" section.
CONTENT RESEARCH
GRILL BAR This page features an interactive slideshow of images of food and people. The slideshow can be clicked to change the images and without clicking, it will automatically change as well. Noticing that there were no accompanying description about their girll bar on the website makes this a rather inadequate and lacking page in terms of design as well as content. Even the images did not say what dish they were which makes this very boring and uninformative. With the improved new website, I would incorporate some text to go along as well as incorporating some interactive features so users will bother to read and explore.
CONTENT RESEARCH
DINNER MENU When the button "Dinner Menu" is clicked a new window is opened where it leads to an online PDF. I like the idea of an online menu but I did not like how it was made available through the main navigation header buttons. The new website shall have the same feature but only accessible through a proper page layout with buttons.
CONTENT RESEARCH
LUNCH AND BRUNCH MENU This menu concept appears to be repeated for the lunch and brunch menus where the buttons are placed on the header navigation panel.
CONTENT RESEARCH
WORKSPACE This is a better page than the Grill Bar as there are proper explanations to describe what this workspace is all about. They also included an email so that users can send any enquiries over should they need any assistance.
CONTENT RESEARCH
WORKSPACE Just like the Grill Bar page, the Workspace page contains an interactive slideshow at the bottom of the page, just that now they included icons for users to select what image they would like to preview. This makes it rather inconsistent and still uninformative without any captions to the images.
CONTENT RESEARCH
EVENTS The event page only features an image with a email as a text below it. I thought that this page could be combined with a new page where they can share their contact details so that the events page would not be so empty.
CONTENT RESEARCH
GALLERY Straightforward as it sounds, the Gallery page features tons of images which is repetitive as they have used them in all the other pages as well. Still, no accompanying text is given, making this a very uninteresting design.
CONTENT RESEARCH
CONTACT Another repetitive feature, the Google Maps and Chope button is placed in the contact page which goes to show that they had poorly organised their website, using repetitive information just to fill in the spaces.
CONTENT RESEARCH
MINOR DETAILS A minor detail is seen in the website tab title that says "The Refinery". To make it more consistent, the new website should have the same title. Also, I realised that the website did not incorporate any "ALL RIGHTS RESERVED." into their page, so I decided to include one for them. All these minor details help to make the website look more official and completed.
CONTENT SUMMARY
After a thorough website observation, it can be concluded that the new website should be more organised, interactive and descriptive. The navigation should be shortened to be more concised but still including the essentials: Home page, Grill, Bar, Workspace and a Contact page. Try not to have repetitive content such as placing the map on two pages. Have a clear navigation system design.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
SOLUTION
CH AL LE NG ES
E X E C U T IO N
ILL US TR AT ION
R E F L E C T IO N S
RE FIN EM EN T
FE ED BA CK
THE USPs
A recap on the USPs that need to be conveyed in the website design Level 1
MESSAGES TO CONVEY •
A community for creatives
•
An avenue for people to eat, drink and create
•
3-storey complex that consists of Level 1: Casual Yakitori restaurant
Level 2
Level 3
Level 2: Mixology Bar Level 3: Designer Workspace
CONCEPT
Elevator Concept
Top Shot Concept
THE PROPOSITION Keeping in mind of maintaining a direction of a fun and vibrant branding, the new concept aims to retell the USPs in a more engaging and creative manner. The elevator concept helps to depict the three levels of offerings. On each level, a top view on each of the offerings is being captured and shown. With this, The Refinery's website will be more engaging and interesting to surf.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SIT E MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
ILL US TR AT ION
R E F L E C T IO N S
RE FIN EM EN T
FE ED BA CK
SKETCHES
SKETCHES
SKETCHES
SKETCHES
SKETCHES
SKETCHES
SKETCHES
SITE MAP Teaser Assignment 1 REPLAY TEASER
GO TO WEBSITE
Website
THE GRILL
BRUNCH MENU
LUNCH MENU
THE BAR
THE WORKSPACE
DINNER MENU
CONTACT
Assignment 2
EMAIL LINK
GOOGLE MAPS
MAKE RESERVATION
EMAIL LINK
TH E BR IEF
RE FE RE N CE S
T IM E L IN E SI TE MAP
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FIN EM EN T
RESEARCH S O L U T IO N
ILL US TR AT ION
FE ED BA CK
VISUAL REFERENCES I find that it is rather rare to see illustrations of items in top shot as compared to images taken from a camera. With that, the website strives to be unique and interesting to their For the elevator concept, I wanted to use the floor indicators as a way to show which level of the cafĂŠ is target audience. being featured.
I wanted to show images from the top view, this would apply to food illustrations, drinks and design tools as well.
ONLINE REFERENCES Taking references from online websites such as Andrew McCarthy. I like the animation concept of scrolling down to reveal different imageries. I applied this idea with the elevator concept that when it switches from one frame to another, the content will switch with minor differences.
Click to open in browser
I also looked at a website called 'Le Mugs' and I found the button that says "scroll down", in the middle of the website to be very helpful as its a prompter to tell users that the page had more to reveal, and that it uses a vertical layout.
In the same website 'Le Mugs', they used buttons to help users to navigate from one page to another. This is very useful rather than to always click on the button in the middle of the page.
This website, 'SoleilNoir', it combines the idea of scrolling down to reveal images as well as having buttons for navigations. However, with too many buttons, it may be confusing for the users to navigate through the site.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
IL LU ST RA TI ON
R E F L E C T IO N S
RE FIN EM EN T
FE ED BA CK
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image
Only images with top view of the food are selected to be drawn. I added colours to the cutlery to make it more cohesive with the proposed moodboard for the re-branding.
Frame 3: Illustration
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image
I did not really stick close to the image but went ahead to freely imagine how the skewers could look like. Since this dish was a Yakitori, that meant that it belonged to the Japanese. With that, the choice of colour for the cutlery was chosen to reflect the style and vibe to reemphasise its origins.
Frame 3: Illustration
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image
As I could not find images of the drinks in The Refinery, I had to resort to Googling images. I purposely chose this image because it had an "umbrella" on the drink, which tells people that it is an alcoholic beverage, which can be quite hard to distinguish when its being drawn from the top view.
Frame 3: Illustration
ILLUSTRATION Frame 1: Original Image
Frame 2: Tracing over orignal image
I also specifically chose this as an alcoholic drink as the mint leaves helps to convey the idea of a cocktail beverage.
Frame 3: Illustration
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
EXECUTION
R E F L E C T IO N S
RE FIN EM EN T
ILL US TR AT ION
FE ED BA CK
EXECUTION Layer Organisation: It is crucial for me to have a very organised layer set as my website is mostly illustration based, and there are a lot of assets to handle. This meant that the naming, positioning and colour code of each layer had to be in order.
Stage Size: After calculating how much space is needed for the website, I set the stage to 1478px X 3840px as it fits perfectly in my Chrome browser, and the width is the same as Assignment 1. As this website uses a vertical layout, the height is many times longer than the width.
EXECUTION Hover effect: This is an example of how I would create a hover effect. 1. The first step is to convert the layer to a symbol. 2. Next, in the symbol section, animate the effect that you would like to see. 3. At the start of the timeline, issue a trigger > playback> stop> select the symbol you just created. 4. Create a label on the timeline at the start of the animation. Give it a name, remember that name. 5. Return to the stage. On the symbol layer, issue a trigger > mouseover> playback > play > select the symbol.
These are some of the symbols I have used.
6. Add a new trigger > mouseout > play from > select the symbol > type in ("thenameofthelayer")
EXECUTION Preloader: I added a text layer as well as used an image to set as a background colour.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE N GE S R E F L E C T IO N S
E X E C U T IO N
RE FIN EM EN T
ILL US TR AT ION
FE ED BA CK
CHALLENGES
Challenge 1: Perhaps I was being too ambitious when I tried to design a preloader animation on Photoshop because when I tried to play it on a web browser, it only played two frames of the preloader animation which was pointless, because users would not understand what the message was without showing the entire preloader.
Even though the animation was set with "No Delay", instead of "0.2 seconds", the preloader would still not load completely but it will direct to the website instead. Hence, I have decided to use Edge's existing preloader and to spice it up, I added text and a background colour to make it appear more cohesive with the design.
CHALLENGES
Challenge 2: Another challenge I faced was to try and link the buttons from the homepage to the individual pages itself. As the buttons on the homepage were part of an animation, they were located inside a symbol and when I commanded it to link to an anchor outside of the symbol, it would not work. After thinking it through, I realised that
this is afterall, not that difficult to solve. What I did was to create a new set of anchor boxes in the symbol itself and linked the buttons to it. This challenge prompted me to think very logically. Thankfully, this method managed to solve the issue.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
ILL US TR AT ION
R E F L E C T IO N S
RE FIN EM EN T
FE ED BA CK
FEEDBACK Q: What is your first impression of the design? Was the navigation easy? Did you manage to retrieve information easily? Is the layout organised? Person A, aged 18: I like the illustration design, the layout is easy to navigate and understand. The colours are appealing and legible. Person B, aged 20: The design is good, but can the logo be placed on each page? Or is it too much? Maybe you can try to drop the opacity lower for the images of the non-selected items from pages 2-4. Person C, aged 19:
Person D, aged 32:
The design looks better than the previous website that they did. The design managed to capture my attention from the start. It is organised, navigating from page to page was not a chore.
The teaser matches the website. It looks cohesive. Maybe you can do a few mock ups of the delieverables, besides the website itself to show that the rebranding can apply to more than just the screen. The website is organised nealty, no trouble with navigation.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
R E F L E C T IO N S
RE FI N EM EN T
ILL US TR AT ION FE ED BA CK
REFINEMENT
After listening to the feedback from Kelvin regarding the teaser design in Assignment 1, I have decided to minimise the size of the images so that it will not take up a lot of space, which will eventually affect the animation. By doing so, the images had to be "Save for Web" on Photoshop.
I realised that the files that were taking up a lot of space came from the background image. Thus, I have decided to stick with only one background image instead of the previous 5 backgrounds. This greatly helped to reduce the overall file size.
Previously the file size for images was at 13.7MB, currently it is reduced to only 3.9MB.
TH E BR IEF
T IM E L IN E
RESEARCH
RE FE RE NC ES
SI TE MAP
S O L U T IO N
CH AL LE NG ES
E X E C U T IO N
REFLECTIONS
RE FIN EM EN T
ILL US TR AT ION FE ED BA CK
REFLECTIONS This module has taught me valuable skills that are beneficial in today's modern and fast-paced society. I found the design process to be a little tough at first when I had faced with unresponsive design and errors but as logical as it gets, there must somehow be something that I must have done wrongly for such instances to occur. With that, I find softwares like Edge Animate to be logical and theoretical in the sense that it does exactly what you tell them to. And so, it is crucial to first understand the basics of operating Edge and knowledge on coding is definitely an extra benefit. I am actually very impressed with Edge as it manages to not only animate teasers but to code a website from scratch as well. Instead of relying on more than one software, Edge is slowly replacing the other programs like Dreamweaver and After Effects.