ART DIRECTION / In Advertising / Term 4, Week 1-2

We began this course learning the structure of an advertising agency, and art direction’s role in it.

At the top of the hierarchy is Regional Managing Director, and below it are the head/leader of the divisions in an advertising agency. A big advertising agency would have 4 divisions, each responsible for a single aspect of the workflow.

4 divisions are as follow:

  • Client Service- this division handles anything that has to do with the client. They figure out what the client wants, do market research and come up with a report on their clients & market trends. It is led by the Account Service Director, followed by Account Manager and Account Executive.
  • Management & Finance- as the name suggests, this division handles the financial aspect of creating an advertisement. They do the budgeting; this budget is adjusted to the need of the advertisement. The team consists of Office Manager (lead), Accounting & Finance and Human Resources.
  • Marketing- this division handles the media of the advertisement’s publication; they decide on what medium would the advertisement be best marketed with, as well as being responsible for planning and buying the media (for example: a billboard, newspaper ad space). They also do research on potential clients and new projects. The team is led by Marketing Director, working alongside with Media Planner-Buyer and Researcher.
  • Creative- the creative division handles the creative process of making the advertisement, and its role comes a lot later in the workflow. This division is responsible for putting the visualisation of the advertisement accordingly to the creative brief, which has been created through research and brainstorms done by the previous 3 divisions (plus the head of the creative group, Creative Director). The hierarchy of creative division is as follow:
    1. Creative Director – leader of the division. Participates in the research and conclusion of creative brief. Reviews work done by the following workers.
    2. Group Head – assistant to Creative Director.
    3. Traffic – delegates task to the members of the division.
    4. Art Director – assists Graphic Designer by doing the research and decides what approach is “best” for the creative brief.
    5. Graphic Designer – does the graphic and the design of the advertisement.
    6. Copywriter – works with Graphic Designer to come up with witty, influential taglines.
    7. Visualiser – helps draw the scene/image for the advertisement before actual photoshoot with hired talents.
    8. Production

Any workers outside of these (animation team, photographer) will be hired by the company according to the necessity of the advertisement’s production. The reason why they aren’t permanent member of the agency is that it is far more efficient for the agency to just hire one directly on the occasion; they can match the required style for the particular advertisement better.

There are several types of agencies, and the one described above is a standard full-service agency.

  • Full Service Agency- take care of all the processes in the workflow, from strategic planning, to media buying, creative communication, digital media, and the running of the campaign itself.
  • In House Agency – a creative team inside a company that helps create the advertisements. They handle promotions, launching, discount and events.
  • Branding Agency- an agency that focuses on developing & creating brand identity, as well as the brand’s visual identity.
  • Graphic House- creates below-the-line mediums such as posters, logos, branding, direct mail and brochure. They’re a lot more focused on the graphic aspect rather than conception of the project.
  • Digital Promotion- a new “agency” that sprung up to life thanks to technological advancement. It handles social media campaign, augmented reality, etc.


The role of advertising comes in the awareness (how well people know about the product or brand?), positioning (what the products stands for in the market- for example, Apple’s MacBook Pro line stands as the “laptop ideal for creative workers”), consideration (customer’s consideration in buying the product- does it suit their needs? What about the price?) and preference (preference to the particular brand, or the design of the product) in the process of consumer communication and purchase. The next steps, shopping and purchase, are the role of sales promotor located in the store itself.

These are considerations in establishing strategy:

  1. Customer attitude and buying behaviour – who buys the product, of what class and age group? Where do they buy it, online or directly at the store? When do they buy it?
  2. Brand strategy – creating brand awareness
  3. Competitor strategy – brands of the same type of product will not say the same thing with each other. They’d be advertising different aspect & strength of their product; their unique selling point.
  4. Advertising strategy
  5. Trade environment – the environment in which the product is being sold
  6. Other external factors – – seasonal trend, weather, cultural / religious events that’d influence sales

The purpose of research in the process of creating an advertisement is to help identify consumers, look for new ideas in products & services, improve what is offered in products & services, pinpoint the causes of possible problems. To monitor activities, study promotional tools and help communication development.


Create a campaign revolving around the topic sports. Come up with 3 ideas and pick one issue – preferably one that has a significant problem that the campaign would be able to solve.

Idea 1

-Discussing sports as simple, inexpensive activities that can be done by anyone of any age and profession, as opposed to what people think of sports that caused them to be lazy to do it. Office workers can take stairs instead of elevator to reach their office, housewives can hula-hoop while watching drama series, students can walk or take bicycle to school ((when possible)), or jog while walking their pets. The campaign will show the benefits of changing people’s lifestyle to fit in these simple activities.

Idea 2

-Breaking social stigma on gender stereotyped sports (kickboxing, ballet, figure-skating, martial arts) so that the society would be more accepting towards these particular sports, hopefully encouraging parents to let their children learn any sports that they’re interested in.

Idea 3

(Idea 3 will be written)



IDEAS IN CONTEXT / Survey / Term 4, Week 2-3

Click here to fill out the survey!  jensen-pointing-o


From the research and survey, I’ve managed to gather some useful datas and more insight on catcalling (and sexual harassment on general).


I have been thinking on how to approach the issue and I’ve decided to take the “degrading” aspect of catcalling/sexual harassment and to show it in the poster as something that opens people’s insight on how society has been treating fellow humans.


The first idea is directed more to the people who does catcalling, with the image of a person walking by and a cat that turns its head to look at the audience of the poster. The slogan is “Too blind to get it right?”, as in, humans aren’t cat, if you gonna ‘catcall’ then you know what will be responding to it.

Second idea is a twist of the first idea, a more humorous approach. The human’s head (with provocative body figure) will be replaced with a cartoonish-looking cat. They say words are powerful; if you gonna ‘catcall’ so much, then perhaps all humans should be cats.

Third approach is more direct and straight forward- displaying a provocative part of human’s body and advertising it on the poster in the style of a fast-food advertisement. The message is to show society that humans, without fully realising it, are being treated like something for sale, something that’s so cheap and convenient. Development of this idea includes a poster-ception (the advertisment-looking poster is ‘stuck’ onto the gritty walls of the city, photographed and presented as another poster), as well as a poster-ception-ception (the advertisment-looking poster on the wall of city streets is compared with the poster/a similar image being displayed in a museum, separating “harassment” and “appreciation”).


Idea 4’s concept is based on “It’s not flattery if you’re …..”, where the posters will display a series of women in different hideous coverings (paper bag over their head- ashamed, masking tape over their mouth with the writings “don’t provoke” – silenced , female wearing karung goni(?) as outfit – scared ). This approach will be a bit more hyperbole & surreal.


Idea 5 features photographs of female with shopping label tag on their neck, saying their “catcall-o-meter”, level of their attractiveness, etc. This emphasises on sexual objectification and how male often give “gradings” to female based on their attractiveness, and how catcalling impacts female’s self-esteem & self-worth. If you’re cat called a lot, that means you’re attractive. If no, then it probably means that you’re ugly.

Current Moodboard (Nov 5)

(Creative brief will be written)

Research / Reading Material:

Catcalling and Rape Culture

Video: 10 Hours of Walking in NYC (108 instances of Catcalling)

Screen Shot 2016-11-06 at 6.22.28 PM.png


Catcalling – Jessica Valenti

Street Harassment x Psychological

Catcalling / Hate Crime?

Screen Shot 2016-11-06 at 7.00.44 PM.png
(“Misogyny hate crime” – what a hateful phrase.)

EDITORIAL / Magazine Study / Term 4, Week 2

This week we familiarised ourselves with the layout and structure of magazines & newspaper by creating a flatplan of them.






I did flatplans of 2 different magazines – Madame, a German edition fashion magazine and Architectural Digest so that I have the idea and comparison on how magazines of different genres differ in their structure & layout.

“Madame” has a more ‘playful’ layout, a lot of picture collages, using huge dropcap as one of the decorative element on the page. Each spread seems to have a different layout, although the overall consistency is supported by the continued use of same font style (Serif for Title & body text, Sansserif for captions, description & footers).

Architectural Digest’s layout is a lot more structured and more consistent from spread to spread. The overall look is clean, organized, made interestint with the stunning & pleasant interior images.

IDEAS IN CONTEXT/ Poster-on-Article / Term 4, Week 1-2

Week 1

This week we were introduced to this class- what it will be about, and of course, the timeline to our 2 projects.

In creating an advertisement, we have to understand the audience the advertisement is intended for; their background, demographic, cultural reference. An advertisement is basically a way of persuasion – when advertising products, they’d persuade people to buy it. In PSA (Public Service Announcement/Advertisement), what’s being communicated/persuaded is an idea and awareness on certain topics, for the betterment of life quality. PSAs are non-profit advertising. They’re usually is a campaign and runs for a period of time, which demands consistency of the quality despite the usually limited budget.

Types of Campaign:

  • Commercial Campaign. This type of campaign promotes commodity product and services by informing customers, or promotes individual & groups (political candidates, corporations). Can be found in almost any medium (print, radio broadcast, TV advertisement, online ad) as well as unconventional media and formats.
  • PSA Campaign. This campaign serves the public interest, usually run by non-profit organisations (Unicef, United Colors of Benneton), or government. The objective is to educate people on significant social issues to stimulate positive social changes. In creating a PSA, general knowledge and awareness on what is going around us is important; for one, it allows us to communicate better in a way that is relatable to the general public.
  • Cause Campaign (CSR – Corporate Social Responsibility). These campaigns are sponsored by corporates. It raises funds for non-profit organisations and run in paid media. They’re used in part to promote a corporation’s persona.

To kickstart this class, we begin with a light(?) exercise of making a poster out of a headline from newspaper.


Chosen article


I try to approach the topic from different sides – the “unemployed” factor (poor, ‘gabut’, confused) or the “educated” factor (hand holding a CV with a stamp ‘application denied’, or with a ‘poor future’ reflected on the wristwatch.)

Inspired from the poetry meme – how to display both unemployment and despite education in a relatable way? Heavy sarcasm to mock the system of the industry.

Week 2

This week we resumed working on our simple poster based on the newspaper headline.


Idea that came up to me after QC-ing. I was thinking of words that would rhyme with kantong kering and finally decided on “juling” – and it sort of fits the (so not) hyperbole of having worked so hard in school and ended up not getting any job in the end.
Vectorised draft

Feedback on poster:


Screen Shot 2016-10-29 at 9.40.52 PM.png
Revised poster
(This website has the commenting-revising-pointing out/marking functions as well as real-time comment/chat? :’D)



We also had to start coming up with idea for our PSA project, which will be about interpreting (current) local social issues in form of a poster. As a start of the brainstorming process, we were asked to think of 10 local issues and write them down on the board.

10 local social issues:

  • Fake vaccine
  • Unemployment
  • Jakarta Red Light District?
  • Tax amnesty anxiety
  • Education- constant change in curicculum
  • Sentence for sexual offender too short
  • Harassment in public transport
  • Increase in tobacco price
  • Prolonged trial (Jessica-Mirna case)
  • Catcalling (from abang” 🙂 )

I see catcalling as one of the most persistent issue in Jakarta (perhaps in other cities of Indonesia as well). Might be doing the poster based on this issue – but first, a research and survey needs to be done.

WEB AUTHORING / HTML, CSS & Grid? / Term 4, Week 2 – Grid Reference

This week we resumed our journey at codeacademy, starting the class with the catalogue HTML & CSS. The exercises in this catalogue weren’t so difficult because we have viewed the “Make a Website” exercises.


Exercise 1


Inserting body content


Trying out the varying header sizes.


Linking an image using <a> tag with href
Nesting a link inside a link. (Linked image that leads to an external link!)
Nested link in the flower image.
Badge acquired!


Exercise 2 

Creating your own webpage, starting with three short introductory paragraphs.
Nesting a link inside an image
Tips to indent the tags to make things easier to read
Creating an ordered list (parent tag <ol>, children tag <li>). Identations sort of mark the classification & made things easier to read
Enter a caption



Creating an unordered (bulleted) list. Parent tag <ul>, children tag <li>


Nesting an ordered list inside an unordered list. #Childception
How to write a “comment” in HTML that won’t be visible on the webpage.
Styling with HTML (super inefficient but doable)


(Helpful reminder)
(…Should’ve changed it to green instead of red)


Instead of typing <h1 style=”color: green; font-size:16px”>, I typed in <h1 style=”color: green” font-size: 32px”>, which ended up doubling the size of the header.


Font styling with HTML


Background color
Background color can be applied per sections.

(Catalogue to be continued & finished at home)

After our coding practice, the lecture was resumed with an explanation on grid and why & how it is in drawing a flat plan & wireframing a website.

Not too long ago, people were still struggling in the transition of print design to web design – what is a “good” and consistent web design? One of the earliest “good” web design work was done by Massimo Vignelli on the National Park Website, in which he implements the “Unigrid” system. Unigrid acts as a solution to large scale designs & production of many different publications.

Every design solution begins by defining the problem and establishing constraints.

Crate & Barrel ‘s website is also an example of the early, standard webpage displays (Product Display – thumbnails of picture lined up in a few columns an row which is like a gallery of pictures, Inventory Display – similar to a picture gallery but with explanation & details of the product, Text Forms – standard text display with navigation bar on the left and ad column on the right).

The starting / mid-range of a screen size is 1024px (wide) x 768px (tall), but the canvas area of a standard browser (when opened) is 960px x 650px and people strive to create a landing page has all the contents fitted in that area. Too much scrolling is ideal for smartphone / tablet viewing, but on desktop it is more of a bother.

Constraints are the mother of design invention.

In grid, there are units – basic building blocks of a grid (all uniform) and columns – grouping of units that create the visual structure of the page (not necessarily uniform). Though the definition differs when working with grids in print-based media, the application is pretty much the same.

In general, we want to create units in the multiple of 3 and 4. 12 is ideal because it is a multiple of both 3 & 4. 12 units can be made into 3 columns, or 2 columns of 6 units each, or 4 columns with 3 units each, or 6 columns with 2 units each – all these can be mixed and matched while structuring a webpage.

Wireframing Kompas’ landing page with preset grid guides 

 Wireframing Times (wip)

(FINISHED) HTML&CSS: Social Media Page

(I keep changing the image until the very end :’D)

Will definitely visit this exercise again to style it up better.

(Finished) HTML Basics III

Building tables using <table></table>


Adding rows and columns to the table (<tr> row <td> columns)


Adding the table’s header <thead>
Making one row equal 2 columns (column span: 2 columns)





Using the tag <span></span> to select a certain word that we’d like to modify.



Clickable Photo Page


Inserting images into table cells & linking them using <a></a> tag.

CSS: An Overview


Styling individual/collective parts using CSS. Any tags in HTML can be modified using CSS.


Utilising the selector <span> on CSS.


Using “em” (relative size).


Changing the style of how link appears (selector: the “a” tag. To remove the underline: “text-decoration:none”)


(Finished) CSS Selectors

Giving a division to the elements in html.


Styling in CSS with pseudo-class selector (add a colon after the selector, and insert the pseudo-class_selector)


Changing the color of the link when it is hovered on
Changing the color of visited links ( a:visited { color: xxxx } )
Styling the first/direct child of the paragraph.


Styling a specific element that is nested in another element.
Styling with class division
Styling with ID division


Creating borders


Styling the border, making it into dashed lines


(Finished) CSS Positioning 


(WIP) Building a Resume 


Still working on this part – I can’t get the placement of the text right.