ART DIRECTION / Assignment Progress / Week 9 – Term Break

I have thought of numerous different concept since the last one, because it looked too lifestyle & doesn’t show much about the sports/exercising part.

One idea that popped up to me was to make the poster’s visual look something like a motion capture image (a person doing morning run to a businessman, two people dancing till they meet and finally became a family – a literal visual interpretation of “this exercise made me who I am” kind of thing). This idea was inspired by composite image of jumps done by figure skaters.

moodboard_visual-design-references-02
Visual design references / moodboard

The other concept is to create an imagery of surrealist object by combining lifestyle things (accessories, gadget) and exercising equipments together. The message of the campaign, through the objects being morphed together, is to tell people that lifestyle and exercising actually comes hand in hand.

moodboard_visual-design-references-03
Visual design references / Moodboard
do-both
Draft visualisation of concept 3

The tagline is rather provocative (feels too long though, have to work on it still) to grab attention.

Other items that will be morphed =

  • Earring & Hula hoop
  • Phone & weightlift

do-both_2

WEB AUTHORING / Website Progress / Term 4, Term Break

Inspirations & coding help!

https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

screen-shot-2017-01-01-at-6-01-56-pm
Helpful javascript library to add responsive audio to the page. Will use this for my discography page!
screen-shot-2017-01-01-at-5-52-33-pm
slideToggle function;  will use this to build the discography page (where clicking on the image will trigger a drop down which contains track list & audio preview)

Progress so far with the website:

  • Edited the navbar (tried to make it transparent. Needs a new font though)
  • Edited the background
  • Am thinking of editing the discography page; the carousel doesn’t feel effective at all.
  • Footer not fixed yet

This slideshow requires JavaScript.

Fullscreen view

960px view

Small device view

29/12/2016

screen-shot-2016-12-29-at-10-29-25-am
Can’t seem to get that button right. ughhhh.

screen-shot-2016-12-29-at-10-27-23-amscreen-shot-2016-12-29-at-10-26-33-amscreen-shot-2016-12-29-at-10-24-25-am

screen-shot-2016-12-29-at-9-37-22-am
Changed the discography page – text too small?
screen-shot-2016-12-29-at-9-36-58-am
Tour page as sleek as ever
screen-shot-2016-12-29-at-9-36-39-am
End page / footer
screen-shot-2016-12-29-at-9-36-29-am
Tour-Contact page
screen-shot-2016-12-29-at-9-36-17-am
Discography page

screen-shot-2016-12-29-at-9-36-07-amscreen-shot-2016-12-29-at-9-35-49-amscreen-shot-2016-12-29-at-9-35-35-am

01/01/2017 

So I tried to do the dropdown function with javascript/jquery, but it didn’t work at all (not to mention the jquery is really messy? What on earth happened to it?), so I ended up using the bootstrap built-in Accordion function (I copied the div classes and collapse functions onto my own div class).screen-shot-2017-01-01-at-8-16-21-pm

screen-shot-2017-01-01-at-8-31-57-pm
Desktop view; Some images need to be edited so it is darker (to improve text visibility). Description seems a bit too small (it was set it at 0.5em)

screen-shot-2017-01-01-at-8-32-08-pm

screen-shot-2017-01-01-at-8-32-20-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-27-pm
Panel expanded
screen-shot-2017-01-01-at-8-32-42-pm
Smaller device view

screen-shot-2017-01-01-at-8-32-54-pm

screen-shot-2017-01-01-at-8-33-13-pm
Small device view

It still look like a mess when the browser size is small.

The problem I have with this is that when the page loads, it shows the panel directly instead of hiding it. Will fix this issue soon.

IDEAS IN CONTEXT / Coffee Shop Survey ! / Term 4, Term Break

During the first week of term break we took the chance to visit some coffee shops and restaurants and interviewed them!

(Survey / Interview Transcript to be written)

Monday 19/12/16

Cafe Batavia, Kota Tua

Historia Food & Bar

Tuesday, 20/12/16

Colette & Lola (Puri Indah Mall branch)

FEAT. GUEST STAR OF THE DAY RARAS

Dancing Goat, Puri, Jakarta Barat

doumo Coffee House Business Plan

IDEAS IN CONTEXT / Assignment Progress / Term 4, Week 9

(Sketches will be inserted)

Week 9 QC Feedback & Tasks

I’ll be working on the strategic plan and business plan throughout the holiday, calculating startup expenses for the coffee shop, budget as well as establishing the brand identity & visual. So far the logo sketches have been on track with the keywords (homey, cozy, playful & youthful) but it needs more development.

 

screen-shot-2016-12-17-at-9-51-44-pmscreen-shot-2016-12-17-at-9-51-51-pm

WIP _ Strategic Plan

WEB AUTHORING / Assignment Progress / Term 4, Week 9

Inspirations:

https://www.behance.net/gallery/41508597/WRSDESIGN-UI-UX-webdesign-(LIVE)

Progress so far with website prototype:

screen-shot-2016-12-11-at-12-32-58-pm

screen-shot-2016-12-11-at-12-34-15-pm
Making the header (using code guideline from codecademy)

screen-shot-2016-12-11-at-3-11-25-pmscreen-shot-2016-12-11-at-3-13-41-pmscreen-shot-2016-12-11-at-3-13-48-pmscreen-shot-2016-12-11-at-3-13-51-pmscreen-shot-2016-12-11-at-3-43-06-pm

screen-shot-2016-12-11-at-3-43-10-pm
Text currently still come from the image itself. Will change this up soon.
screen-shot-2016-12-11-at-3-44-19-pm
Smaller view poses a problem.
screen-shot-2016-12-11-at-3-44-28-pm
Nav bar / header not properly coded yet

screen-shot-2016-12-11-at-9-33-23-pmscreen-shot-2016-12-11-at-10-02-15-pmscreen-shot-2016-12-11-at-10-02-36-pmscreen-shot-2016-12-11-at-10-02-54-pmscreen-shot-2016-12-11-at-10-03-36-pmscreen-shot-2016-12-11-at-10-03-47-pmscreen-shot-2016-12-11-at-10-04-00-pmscreen-shot-2016-12-11-at-10-04-10-pm

screen-shot-2016-12-12-at-1-14-12-pm
Found this nice color “rosybrown” that suits the feel.

screen-shot-2016-12-12-at-1-25-35-pm

screen-shot-2016-12-12-at-1-30-39-pm
Stylising the font

screen-shot-2016-12-12-at-1-30-49-pmscreen-shot-2016-12-12-at-1-30-58-pmscreen-shot-2016-12-12-at-1-42-39-pm

screen-shot-2016-12-12-at-1-42-49-pm
Caption still a bit too small
screen-shot-2016-12-12-at-1-43-25-pm
Nested a button onto the carousel

screen-shot-2016-12-12-at-1-43-51-pm

screen-shot-2016-12-12-at-2-08-18-pm
Making the tour page with jumbotron
screen-shot-2016-12-12-at-2-09-46-pm
Ditched the jumbotron idea.

screen-shot-2016-12-12-at-2-11-48-pmscreen-shot-2016-12-12-at-2-14-00-pmscreen-shot-2016-12-12-at-2-14-32-pmscreen-shot-2016-12-12-at-2-14-42-pm

screen-shot-2016-12-12-at-2-16-13-pm
Justified buttons

screen-shot-2016-12-12-at-2-16-43-pm

screen-shot-2016-12-12-at-2-17-24-pm
(So happy I came up with this by accident ahahahhaha)

screen-shot-2016-12-12-at-2-20-43-pm

screen-shot-2016-12-12-at-2-26-24-pm
Gif quality not the best though. Not too sure on how to compensate with this 😦

screen-shot-2016-12-12-at-2-26-36-pm

screen-shot-2016-12-12-at-2-55-05-pm
Fixed the navbar – it’s now fixed onto the top

screen-shot-2016-12-12-at-2-55-14-pmscreen-shot-2016-12-12-at-2-55-38-pmscreen-shot-2016-12-12-at-2-56-27-pmscreen-shot-2016-12-12-at-2-56-43-pm

screen-shot-2016-12-12-at-3-13-45-pm
Decided to place the album caption below the image for better readability. Might change the entire layout & image for this section though.
screen-shot-2016-12-13-at-9-29-50-am
added animate css

This slideshow requires JavaScript.

 

ART DIRECTION / Assignment Progress / Term 4, Week 7-8

The first concept of the campaign is to introduce the benefits of including physical activity & exercising in lifestyle, in order to change people’s mindset that exercising is a tiring thing that they cannot afford to squeeze into their hectic urban lifestyle.

sketchessketches-2

sketches-1
(2nd concept)

sketches-3

I was told that I’d be needing more variations to the visuals of the poster, variation on how to convey the “secrets”. Originally I came up with the Superman-pose idea due to the word ‘ace’, which I relate to hero. Superman hides his secret beneath his shirt, and he opens it to reveal the “S” sign. In the picture, the people will be revealing the secret of exercising and benefit that it brought to them. However, the campaign name “healthy secrets” would be more appropriate than “ACExercise”.

Second and third concept is a bit more complicated on its execution, as it is to make a challenge out of exercising & make it a trend on social media. Third concept is to do crowd controlling on exercises (taking up stairs, flash-mob in the park, etc.). The concept is inspired by the social experiment of when people see three or more people look up to the sky, most will automatically follow it even though there seems to be nothing.

Visualisation of Concept 1

screen-shot-2016-12-10-at-7-13-03-pm
Developing a simple logo for the campaign. Will explore more on the letter “C”.
screen-shot-2016-12-10-at-10-03-39-pm
Image seems too dull and serious for it to be bright, fun and encouraging.
Mockup_1.jpg
Changed the background color so it looks brighter. His ‘secret exercise’ would be dancing, and the earphone he is grabbing is the representation of dancing & music.

Visual Design Reference

 

 

PACKAGING / Package Exploration / Term 4, Week 7-8

Out of the two logos, the one with the light switch “LI” was deemed the most suitable. I have to tidy up the kerning & baseline, however, as well as thickening the stroke for the “LI”.

Early digital mockup explorations

week-8_packaging-02week-8_packaging-03week-8_packaging-05week-8_packaging-04week-8_packaging-07week-8_packaging-06

week-8_packaging-08
Shave On Shaving Kit Series (Needs more exploration)
screen-shot-2016-12-09-at-9-55-57-am
QC: Thickened the ON
screen-shot-2016-12-09-at-10-05-39-am
the “Refreshing mouthspray” should be larger and the rest should be under 3 lines
week-8_packaging-10
Mouth spray packaging; top left version was modified so that the “ON” looks less redundant (when it is repeated by the logo)

 

IDEAS IN CONTEXT / Assignment Progress / Term 4, Week 7-8

We started working on the narrative for our coffee shop brand, brainstorming for the overall look & feel in relation to the narrative and how to tie them all together.

Idea Brainstorm Ppt & Case Study

(Sketches will be inserted)

screen-shot-2016-12-08-at-12-06-45-am
Short Summary on the coffee shop. Will add more on promotional media & identify consumer related problems

Quick logo exploration based on the four keywords

 

WEB AUTHORING / Prototype? / Term 4, Week 8

On this week’s episode of Crash Coding…

 

I opted to do my website in Dreamweaver, in favour of the bootstrap components (which I really need to learn more about).

I also realise that I need to return to codeacademy as soon as possible because I’ve forgotten quite a lot on how to code specific functions & css styling.

screen-shot-2016-12-07-at-8-09-46-am
(Have yet to figure out how to place the buttons center aligned & on the middle of the image)
screen-shot-2016-12-07-at-8-11-05-am
Linked the “English” button to the Parallax page. Haven’t changed the navigation bar yet (honestly I forgot how to duplicate the links wow)
screen-shot-2016-12-07-at-8-11-27-am
Carousel! The captions will definitely have to be larger than that; haven’t styled the font either.

http://getbootstrap.com

screen-shot-2016-12-07-at-8-16-37-am
Will definitely be useful very soon.

11/12/16

How To Parallax (Css)

Trying Parallax Effect

CSS Styling_Opacity

After seeing these guidelines, I think I’m going to change the concept of my website – I’ll probably make them all in one page, rather than having 2 pages (landing page – home parallax) like I originally intented to.

Will update with Codecademy and website progress soon!