Month: December 2015

Curly Kale


We are to design a brand for the college’s caterer. They are known as the Curly Kale, serving healthy food like vegetarian sambos and salads.Based on a meeting with Maria, her requirements are for us to come up with designs for the menu boards, signage, boards with quotes. To use a vintage themed and pastel colors. Below are key words from the brief:

  • healthy eating
  • Vintage styled Illustrations
  • international recipes/global cuisine
  • benefits of healthy eating
  • homemade
  • cultural gastronomy baked & cooked daily
  • humour
  • playful
  • open, friendly

List of requirements:

  1. Logo
  2. A4 Menu
  3. Chalkboard Menu
  4. Inspirational quote signs
  5. Benefits of healthy food poster
  6. Brand Identity


Below are images of the purple curly kale:

Vintage menus and restaurant logo design samples:

A Fresh colour combination with simple illustrations of food and drink made into a pattern.


Logos using vector images and block colors.

Simple design, block colours. Circular logo with text at the bottom.

Restaurant Logos

Sushi made into a person.

Restaurant Logos

A mushroom image at the beginning of the logo.

Restaurant Logos

Scribbly illustration and colored text.

Few ideas: to use illustrated figures to match the college logo, and also to represent the caterers and students. To focus on faces as the eye is always drawn to them.

Pin up girls as mascot:


Idea for quote boards, pin up girl and text:

Vegetable or food with chef body:

Kale outlines with moustache and beard: to represent the chef, Mr. Charlie.


More images of curly kale, study of a leaf:

Sites visited:

What is kale

Purple curly kale blossoms/flowers:

Ideas drawn with Adobe Illustrator:


Samples of Chalkboard designs

Idea was to use simple images that represent fantasy & magic. Example: hot air balloons zeppelin etc.

Here are images of the cafeteria in Coolock:

The Menu Board:

They have this timber table/counter in the Raheny branch as well. Idea is to paint each strip in different colours.


Charlie wanted to decorate the piano wall with a play me signage. It’s to encourage  students to play the piano. Idea is to use colourful picture frames from Ikea with either illustration of students/vege/fruits and quotes healthy eating benefits.IMG_20160113_112039IMG_20160113_110559

The boss aka Pablo Escobar aka Charlie. From Venezuela.


A copy of a typical menu:


A closer look at the menu board behind the counter.


A few colour Combinations:

Taken from this site:

pastel sunset color paletteColor Palette No. 1055

Colourful menu ideas: A simple illustration and few colours with white background, makes the text easier to read.

More logo ideas with pink, turquoise and brown colour combinations:

The idea was to illustrate faces as shown below to represent the caterers and students. Everyday people who everyone can relate to. Different colours to represent different fruits and vegetables. Each has their own personality.

Or to come up with illustrations based on ‘Limericks and Other Nonsense’ featured illustrations by Chwast, Reynold Ruffins, and Milton Glaser.

Taken from:






Character with vegetables as outfitspushpin5


Below are illustrations done with Adobe Illustrator & Photoshop:

Menu or Chalkboard Menu: (Chef’s head surrounded by fruits and vegetables, and balancing on oversized fruits, with a loudspeaker in hand:



From a distance, can’t really make out the words on the board. Need to come up with better fonts.Inspiration board:


Benefits of healthy eating:


Idea to use brown paper with black illustrations and handwritten text:

Victorian engravings:

The outcome: Using Clasica Striped Fonts, matches the illustrations.

victorian inspi

Final outcome:

Using brown paper with illustration and Clasica Striped fonts to match.

Poster for benefits of vege/fruits:




Inspirational Quote Signs:


Menu Template:


Blackboard Menu:


Experiment illustrating on newspaper prints:

Final Outcome:

Logo in colour, black & white:

A3 logo.jpg

Blackboard Menu:


Inspirational Quotes:


Benefits of healthy eating:



I was inspired by the illustrations of Push Pin Studios, especially issue #20 Limericks and other Nonsense. I loved the simplicity, the humour and had a vintage look to it. Inspired by those characters, I created my own and added colour to the vegetables and fruits to make them stand out. I used ball point pens and colour pencils to illustrate each character. The illustrations were made to look surreal and humourous by exaggerating the size of the vegetables and by making a man with a moustache wear a dress. The brown paper texture to enhance the illustrations and give the brand a uniformed look. The font I chosed was Clasica Striped font which was downloaded from It has striped lines which is similar to Victorian engraving and matches the illustrations. As for the blackboard, I chose white chalk colour and text so it could easily be read and be wiped off for changes. I chose coloured chalk for the headings as to stand out form the rest of the text. The logo or illustration will be printed out on paper that has adhesive on the back. Easily stick on the bottom or upper corner of the board. Business cards, letterheads and food labels could be printed on brown cards that could be purchased at KM & Evans or any stationery shop.

Art Nouveau (English European)

A typical Art Nouveau poster. A beautiful woman adorned with jewellery and headgear. Flowing lines inspired by flower stems.

A brief look at Art Nouveau:

Taken from:

Art Nouveau  or Jugendstil is an international philosophy and style of art, architecture and applied art – especially the decorative arts – that was most popular during 1890–1910.English uses the French name Art Nouveau (“new art”), but the style has many different names in other countries. A reaction to academic art of the 19th century, it was inspired by natural forms and structures, not only in flowers and plants, but also in curved lines. Architects tried to harmonize with the natural environment.

Art Nouveau is considered a “total” art style, embracing architecture, graphic art, interior design, and most of the decorative arts including jewellery, furniture, textiles, household silver and other utensils and lighting, as well as the fine arts. According to the philosophy of the style, art should be a way of life. For many well-off Europeans, it was possible to live in an art nouveau-inspired house with art nouveau furniture, silverware, fabrics, ceramics including tableware, jewellery, cigarette cases, etc. Artists desired to combine the fine arts and applied arts, even for utilitarian objects.

Maison de l’Art Nouveau (House of New Art) was the name of the gallery initiated in 1895 by the German art dealer Siegfried Bing in Paris that featured exclusively modern art.The fame of his gallery was increased at the 1900 Exposition Universelle, where he presented coordinated—in design and color—installations of modern furniture, tapestries and objets d’art. These decorative displays became so strongly associated with the style that the name of his gallery subsequently provided a commonly used term for the entire style. Thus the term “Art Nouveau” was created.

Part of the evolution of Art Nouveau were several international fairs which presented buildings and products designed in the new style. So, the 1888 Barcelona Universal Exposition marks the beginning of the Modernisme, with some buildings of Lluís Domènech i Montaner. The Exposition Universelle of 1900 in Paris, presented an overview of the ‘modern style’ in every medium. It achieved further recognition at the Esposizione Internazionale d’Arte Decorativa Moderna of 1902 in Turin, Italy, where designers exhibited from almost every European country where Art Nouveau was practiced.

Art Nouveau is usually known as Jugendstil  in Germany, as Modern  in Russia, as Modernisme in Catalonia (Spain), as Secession in Austria-Hungary and as Stile Liberty in Italy. Hence, it is known in various guises with frequent localised characteristics. Other local names were associated with the characteristics of its forms, its practitioners and their works, and schools of thought or study where it was popular. 

In other cases, important examples, well-known artists, and associated locations influenced the names. Hector Guimard’s Paris Métro entrances, for example, provided the term Style Métro, the popularity in Italy of Art Nouveau designs from London’s Liberty & Co department store resulted in its being known as the Stile Liberty (“Liberty style”), and, in the United States, it became known as the “Tiffany style” due to its association with Louis Comfort Tiffany. In Austria, a localised form of Art Nouveau was practised by artists of the Vienna Secession, and it is, therefore, known as the Sezessionstil (“Secession style”). As a stand-alone term, however, “Secession”  is used frequently to describe the general characteristics of Art Nouveau style outside Vienna, but mostly in areas of Austria-Hungary at the beginning of the 20th century. In the United Kingdom, it is associated with the activities of Charles Rennie Mackintosh in Glasgow, and is often known as the “Glasgow” style.

Form and character

La tournée du Chat Noir avec Rodolphe Salis (1896) by Théophile Steinlen

Although Art Nouveau acquired distinctly localised tendencies as its geographic spread increased, some general characteristics are indicative of the form. A description published in Pan magazine of Hermann Obrist’s wall hanging Cyclamen (1894) described it as “sudden violent curves generated by the crack of a whip”, which became well known during the early spread of Art Nouveau. Subsequently, not only did the work itself become better known as The Whiplash but the term “whiplash” is frequently applied to the characteristic curves employed by Art Nouveau artists. Such decorative “whiplash” motifs, formed by dynamic, undulating, and flowing lines in a syncopated rhythm and asymmetrical shape, are found throughout the architecture, painting, sculpture, and other forms of Art Nouveau design.

The origins of Art Nouveau are found in the resistance of the artist William Morris to the cluttered compositions and the revival tendencies of the 19th century and his theories that helped initiate the Arts and crafts movement. However, Arthur Mackmurdo’s book-cover for Wren’s City Churches (1883), with its rhythmic floral patterns, is often considered the first realisation of Art Nouveau. About the same time, the flat perspective and strong colors of Japanese wood block prints, especially those of Katsushika Hokusai, had a strong effect on the formulation of Art Nouveau. The Japonisme that was popular in Europe during the 1880s and 1890s was particularly influential on many artists with its organic forms and references to the natural world. Besides being adopted by artists like Emile Gallé and James Abbott McNeill Whistler, Japanese-inspired art and design was championed by the businessmen Siegfried Bing and Arthur Lasenby Liberty at their stores in Paris and London, respectively.

Relationship with contemporary styles and movements

Adele Bloch-Bauer 1 by Gustav Klimt.

As an art style, Art Nouveau has affinities with the Pre-Raphaelites and the Symbolist styles, and artists like Aubrey Beardsley, Alphonse Mucha, Edward Burne-Jones, Gustav Klimt and Jan Toorop could be classed in more than one of these styles.

Fine art and graphics

The Peacock Skirt, by Aubrey Beardsley, (1892)

A key influence was the Paris-based Czech artist Alphonse Mucha, who produced a lithographed poster, which appeared on 1 January 1895 in the streets of Paris as an advertisement for the play Gismonda by Victorien Sardou, featuring Sarah Bernhardt. Initially named Style Mucha, (Mucha Style), his style soon became known as Art Nouveau in France. Mucha’s work has continued to experience periodic revivals of interest for illustrators and artists.

These women were dubbed “Cherettes” because this imagery was so synonymous with Jules Cheret.

Art Nouveau inspired fonts:

Taken from:

Below are Powerpoint slides to summarize Art Nouveau:

Art Noveau



U.S. Commodore Matthew Calbraith Perry sails into Tokyo Bay, opening Japan to the West.


Charles Darwin, The Origin of Species,published.


France defeated in the Franco-Prussian War. Germany unified.


First impressionist exhibition held in Paris.

Morris & Co. established, promoting arts and crafts movement.



Thomas Edison demonstrates the electric light.


Construction begins on ten-story Home Insurance Building in Chicago, the first to use skyscraper engineering.

Term “art nouveau” appears in print for the first time, describing the Belgian artists’ group “Les XX.”


The first subway system opens in London.


Gottlieb Daimler and Karl Benz invent the first automobile run by an internal combustion engine.


The Eiffel Tower is built for the Paris World’s Fair.

New York
Tiffany Glass and
Decorating Company established.


Great Britain
Aubrey Beardsley design published in the first issue of the magazine The Studio.Paris
Japanese prints exhibition organized by Siegfried Bing.Henri de Toulouse-Lautrec paints Jane Avril at the Jardin de Paris.

Victor Horta designs
the Tassel House.

Columbian World’s Fair;
Adler and Sullivan design the Transportation Building.


Women win the right to vote in New Zealand, the first country to embrace female suffrage. In Belgium universal male suffrage is adopted.

Hector Guimard designs
Castel Béranger.


Claude Debussy completes L’après-midi d’une faune.

Siegfried Bing opens his gallery/shop L’Art Nouveau.Louis Comfort Tiffany exhibits at Bing’s opening of L’Art Nouveau.


The Lumière brothers screen the first moving picture–of workers leaving a factory.

Charles Rennie Mackintosh and
George Walton design
Buchanan Street tearooms.Brussels
World’s Fair: Henry van de Velde and Victor Horta show designs.


United Workshops for Art in Handicraft founded.Vienna
Josef Olbrich designs
Secession Building.Gustav Klimt paints Pallas Athene.

Exhibition of Italian decorative arts.


European and American troops are sent to quell the Boxer Rebellion in China.

South Kensington Museum becomes Victoria and Albert Museum.Paris
Hector Guimard designs
Castel Henriette.René Lalique designs Dragonfly woman corsage ornament.


Thorstein Veblen, The Theory of the Leisure Class, published.

Charles Robert Ashbee and Charles Rennie Mackintosh exhibit to great acclaim at Eighth Secession Exhibition, Vienna.Paris
Loïe Fuller Pavilion, Pavilion Bing, and other Art Nouveau designs triumph at the World’s Fair.Paris metro opens using Hector Guimard’s Metro station entrances.


Sigmund Freud, The Interpretation of Dreams, published.

Émile Gallé made first president of École de Nancy.


Queen Victoria dies after sixty-three-year reign that saw vast expansion of British colonial rule.


Americans Wilbur and Orville Wright make the first manned flight at Kitty Hawk.

Pierre and Marie Curie share Nobel Prize for discovery of radium.


Albert Einstein develops the special theory of relativity.

Exhibition at Salon d’automne by artists dubbed “les fauves.”

Antoní Gaudí designs Casa Milá.


Frank Lloyd Wright designs Robie House.


Completion of Glasgow School of Art.


Venice Biennale includes Gustav Klimt.


Jan Kotêra founds the Union of Czech Artwork.


Igor Stravinsky, Le sacre du printemps,performed.

Vienna Workshops go into liquidation.


Assassination of Archduke Ferdinand triggers World War I.

A blog focusing on Art Nouveau:

Blog by Olga Harmsen

Bibliography / References /Links

REF: Duncan, Alastair. Art Nouveau. World of Art. New York: Thames and Hudson, 1994. ISBN 0-500-20273-7

REF: Kerr, Gordon, Art Nouveau. United Kingdom: Pulteney Press. ISBN 978-I-906734-64-0

REF: Justin Wolf. (29th November 2015) The Art Story. Modern art insight.

Available at: URL [Accessed 29 December 2015}

REF: Greenhalgh Paul, Essential Art Noveau. London, V&A Publications, 2000 ISBN 1851772960

REF: Visual Arts Encyclopedia

Available at:

REF: Richard Whitehouse,web design by Marbeth Schon Copyright ©  Modern Silver magazine 2001

Available at:

REF: Blooms Hotel, Artwork by James Earley,

Available at:


Source of Illustrations/images

REF: Sumayyah Bitar, S.B. (2015).

Available at: [Accessed 29 December 2015].

REF: Lanisatu (2015). Art Noveau swirls free vector.

Available at: [Accessed 29 December 2015].

REF: Songs of Innocence book cover by William Blake.

Available at: 29 December 2015].

REF:  Photo of William Morris.

Available at:

[Accessed 29 December 2015].

REF: Arthur Mackmurdo Chair.

Available at: [Accessed 29 December 2015].

REF:     Wren City Churches cover by A.H Mackmurdo

Available at:


REF: Photographer: Frederick Hollyer, England, Journal: Photographische Rundschau, 1902

Atelier Meisenbach, Riffarth & Co. Year 1902

Available at:

REF: Flora’s Feast by Walter Crane.

Available at:  [Accessed 29 December 2015]

REF: Available at:

REF: Blog about getting to know Art Noveau

Available at:[Accessed 30 December 2015]

REF:  Paris Metro

Available at:[Accessed 30th Dec 2015]

REF: La Sagrada Familia

Available at:

REF: Exposition Universelle (The Curve in the Line)

Available at:

REF: The Peacock Skirt, Aubrey Beardsley 1894

Available at:

REF: A comedy of Sighs poster, Aubrey Beardsley 1894. Victoria & Albert Museum, London, England

Available at:

REF: F. Champenois Imprimeue Editeur, 1897, Lithograph, Art Renewal Center Museum, Image 4411

Available at:

REF: Biscuits Lefèvre-Utile, 1896, lithograph, Art Renewal Center Museum.

Available at:

REF: Blooms Hotel, Inputout article

Available at:

REF: Judith and the head of Holfernes, Lucie Pierron

Available at:





Responsive Web Design

We are to redesign our portfolio website and come up with a responsive website that can be viewed on different viewports from desktop to tablets to mobile phones.


Here is a brief info on RWD:

Taken from:

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device.

Grid use in web design

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements with pixels, and some are ‘fluid’, meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.

Link to a responsive grid system website:

  • The viewport is the user’s visible area of a web page
  • Setting The Viewport

    HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

    You should include the following <meta> viewport element in all your web pages:

  • <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
  • A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window

Looking at existing illustrators websites for inspiration

Here are the  screen grabs & links:




  • Gallery using carousel style
  • Name in bold letters
  • Full-screen image of work/illustration and navigation bar on the side
  • my idea is to use negative space in black to frame the image



  • Image in the middle of screen, name on the middle of image,navigation bar on top of image.
  • plenty of negative space around image




  • Name as header on left corner
  • navigation bar at top
  • scroll down for images






  • header and navigation bar together
  • cubes of images

Tutorial on how to make a responsive website/cv:

More Samples:

  • One image, black background, fonts in white and grey, nav bar on the left. Plenty of negative space.
  • Different sizes of text, bold and light.


  • Logo as main text with nav bar at bottom. Minimal!

Screen Shot 2015-12-15 at 10.12.00

About page: Image and play with typographyScreen Shot 2015-12-15 at 10.13.09

Looking at websites with creative typography:

16 Websites with Gorgeous Typography

Screen Shot 2015-12-15 at 10.24.01

About page sample: Looking at Spacing between paragraphs. Highlighted points/linksScreen Shot 2015-12-15 at 10.36.56

Screen Shot 2015-12-15 at 10.33.43

Wanted a navigation bar with a circular background. Found code info on this website:

How to Create Circles with CSS

  • Need to make gaps between the circles and background colour changes when cursor hovers on it.
  • Art and dolls gallery: Wanted to make circular images. Got the  code from this site:

  • The code allows the image to be circular and animated.
  • Have to figure out how to link thumbnail images to bigger images along with information about the artworks.

More websites for inspiration:

  • Nav bar on the right, logo on left and one colour with one image

Design Screenshot

  • Block colour and minimal content

Design Screenshot

  • Image in the center, black background

Design Screenshot

Sketches drawn in notebook:

Scan_20160111 (4)Scan_20160111 (5)Scan_20160111 (6)Scan_20160111 (7)Scan_20160111 (8)Scan_20160111 (2)Scan_20160111 (3)

After looking at different websites available online here is what I came up with:

Screengrabs of web pages:

Home Page 1:

Screen Shot 2016-01-07 at 10.31.07

Index page, need to maximize the main image, Email link and navigation bar needs to be styled when minimized (mobile view).

Think it’s too plain, not evenly placed, too much white space. Used colors to draw the eye. Picked candy colors like pink and turquoise to show playfulness.

Gallery page:

Still think the image on the left is too small or does not compliment the gallery.

Screen Shot 2016-01-07 at 10.32.50

Art & Dolls page: need to centralize the carousel container, & add text to describe artworks.Screen Shot 2016-01-07 at 10.34.11

C.V page: need to get computer skills container to be in line with work experience.

Screen Shot 2016-01-07 at 10.34.47


Another option:

Index page 2:

Picked the color black to compliment illustrations. Black is associated with power, elegance, formality, and mystery.

Turquoise: The color turquoise is associated with meanings of refreshing, feminine, calming, sophisticated, energy, wisdom, serenity, wholeness, creativity, good luck,  friendship, love, joy, tranquility, patience, intuition, and loyalty. Pretty much everything.

Red: strong colour, to draw the eye.

Screen Shot 2016-01-07 at 10.40.14

Need to downsize the text, bold for headings and light for descriptions.

Website for popular website fonts:

Looking at different fonts:

C.V Page:Screen Shot 2016-01-07 at 10.41.42

Need to highlight/change the colour of links- an indication of a link. Resize the text.

Gallery Page:

Screen Shot 2016-01-07 at 10.42.19

The animation moves the images and shows turquoise blank background and edge of images. Need to come up with a better solution to display imagesScreen Shot 2016-01-07 at 10.42.59


Final outcome

Home page: Links highlighted red when mouse hovers over text.


C.V page: Links highlighted red when cursor hovers over text. Added an image of a doll on the right side to balance the page. Also to show the end product of my sewing skills.


Art & Dolls Gallery, carousel style.


I was not happy with the art and dolls gallery. After uncrossing my eyes and greyer hair I did a few more tweaks and here is the final final outcome:

Made the image smaller on the right.


Styled the Art and Dolls Gallery to match the home & C.V page. Black background with logo and nav bar.


Feedback from lecturer 12/1/16:

To remove text and just use icons for links at the bottom of  the paragraph as users are familiar with the icons. Do not need text to explain them.


Also to make navigation bar responsive, nav bar too long draws the eye downwards.  I need a horizontal drop down menu:

Tried with tutorials from these websites, but when codes are added on the rest of the paragraph disappears. Looked at these websites for responsive dropdown menus: