Simon Griffee
Design consulting, art direction, photography.

December 2015

2015

Published 2015 December 31

Just over a year ago we arrived in NYC during a cold night and used wifi at a McDonald’s at 3am in order to contact the person responsible for the place we would stay at for the first month near 137th street. Amber immersed indoors to work and I outside despite the weather. After the first month we moved further up Harlem to 145th street with Gianni and Maude.

I got my first job by walking around the Columbia campus and finding a notice looking for a graphic design student in the History department. I wrote and was called in to work a few hours a week with the lovely staff at the Italian Academy after convincing them that I am a life-long student.

After four months we moved to an old apartment by the campus on 114th Street, sublet from two nice History professors, and I got my second job helping a legendary street photographer and his family pack and move from New York City to Beacon. I got in touch with Bruce again through a nice person called Cameron from Magnum Photos who I met after doing a workshop with Peter Van-Agtmael, another nice person recommended to me by my friend Mino. I’m very happy to be friends with Bruce and his family — such special people, the Gildens, cats included!

Meeting photographers on the street has been a highlight of living in New York and I am glad to have spoken to many. The first was Omar Robles who encouraged me (along with Emelyne) to try Instagram. I still don’t know what to think about it other than perhaps this: There is a strong, instinctual human desire for visual communication, and people and companies are taking advantage of it. I even attended a meetup, though ultimately the act of photography is, to me, a solitary one.

During summer I had reunions with four childhood friends from Brazil and one I met in Tunisia when I was really learning English. One of them is a fashion photographer who pointed out I accidentally took a picture of a well-known model on the street. I visited MIT, a place I liked a lot and hope to return to for a while some day.

I made new friends including Mike and then Isaac from K&M Camera, the latter who led me to get New York to Nuova Scotia and to go see Robert Frank and June Leaf’s door. I visited Google (thanks, Gino!) and visited Michigan three times, including for one wedding, and Thomas, West Virginia, once. I met Geoff Dyer and Sally Mann and even Drew and Carolyn came to visit!

I cried when I heard Leonard Nimoy had died. B.B. King is also gone, as is Hermann Zapf and a friend called Corey whom I hadn’t seen for a long time.

During my walks photographing the city I passed in front of a chip shop 20 minutes before an explosion that killed two people and subsequently destroyed the building by fire. Death reminds me to make the most of life’s moments, and not worry too much.

Earlier in the year I designed an international symbol for an observer and it was accepted by the Unicode Consortium so you may see it in your emoji list on your mobile phone in the future! I attended one makeathon and hackathon related to blockchain technology which may be part of the answer for a basic income for all human beings on the planet and found an M-Class Earth-like planet in the Elite simulation I enjoy retiring to at times in the evening and dedicated it to my late father.

We moved to Inwood, which was a pleasant surprise. I did not know one could live next to an old forest in Manhattan. There is a lot of good food all around us, we hear, but we have only been able to afford to eat at home while getting settled in New York City. Only free (or highly discounted, due to Amber’s student status) concerts and museums, too: NYPL Public Eye and Cooper Hewitt exhibitions; Bob Dylan’s Highway 61 Revisited, released 50 years ago, performed in its entirety by Fiona Apple and Watkins Family Hour house band and guests (my favorite performances were Fiona’s A Mistake and Shawn Colvin’s cover of Ballad of a Thin Man); Shakespeare’s The Tempest at Marcus Garvey park; Tosca at Lincoln center together with Amber’s advanced Italian class; Magdalena Baczewska’s concert, for which I made a poster; Photographer meetups on Tuesdays at Doctor Thoms’ (thanks Theo, Mike, Tanner and Robert!)

My ‘Palm Sunday’ photograph was in the Penumbra member show at Soho Photo Gallery — my first exhibited work in New York.

Towards the end of the year I began working for my graphic design mentor Milton Glaser, Sue and Dan in the legendary studio on 32nd Street. I had only met Milton through his work and still find it hard to believe and am amazed to be in the studio where the words ‘Art is Work’ are written on the door.

I like to remember the good things happening around the world, and how small we all are in reality. Yes, 2015 was also a year of progress for people living together.

Onwards, Spaceship Earth!

—Simon, writing from Rome, with my mom, my brother, and Amber, who has worked incredibly hard this year (though she makes it look easy!), and without whom I would not have experienced anything close to 2015.

Milton Glaser Studio

It was after reading Milton’s book Graphic Design that I decided to be a designer in addition to a photographer, and the chance to work with Milton was a transformative experience that inspired me to begin drawing again as I had in my childhood.

Some examples of work I did at Milton Glaser’s studio:

Brazilian Pizza.

A poster in progress that I called a ‘Brazilian Pizza’, as it reminded me of one, even though it had nothing to do with pizza or Brazil. ¶ One of many things I learned working with Milton is the value and necessity of leaving room to experiment and to play, to allow your mind and hand to take you on unexpected directions, especially in the initial exploratory phases of a project. ¶ There’s a wonderful video (transcript) of John Cleese speaking about creativity that touches on these themes. He speaks of the open and closed modes of the brain and the necessity and timing of play and of work. Warmly recommended.

Horse logo. Horse pattern.

A logotype and pattern using a horse element. ¶ When I mentioned it reminded me of Picasso’s bull study he said I should be quiet otherwise, I would end up revealing most of his secrets!

Horse patterns applied to bags.

Visual mockup of the horse pattern applied to bags.

A copy of one of Milton’s drawings of Monet.

While working on an image catalogue application for the studio I had the opportunity to see many of Milton’s drawings — a real treat! I’d sometimes draw a copy of my favorites on whatever was at hand.

A black and white photograph of Milton and Sue.

Milton and Sue, New York City, December 2015

For Simon with thanks for all your help. Milton Glaser.

Milton Glaser

Columbia University, New York City, December 2015

Published 2015 December 24

125th Street Station, New York City, December 2015

Published 2015 December 24

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 22

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 21

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 20

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 19

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 19

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 17

Drawing for Amber, New York City, December 2015

Published 2015 December 16

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 15

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 14

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 13

The Lost Library at the Waldorf Astoria, New York City, December 2015

Published 2015 December 13

Broadway Near Union Square, New York City, October 2015

Published 2015 December 9

Washington Square Park, New York City, October 2015

Published 2015 December 8

Milton and Sue, New York City, December 2015

Published 2015 December 8

Washington Square Park, New York City, October 2015

Published 2015 December 7

Herald Square, New York City, October 2015

Published 2015 December 6

East Houston Street, New York City, November 2015

Published 2015 December 5

7th Avenue and Cristopher Street, New York City, September 2015

Published 2015 December 3

Websites

A few websites I have made in the past.

International Plant Protection Convention website homepage sketch.

Sketch of the homepage with a drawing of Darwin who I imagined at the time would be a potential user of the site if he were alive.

International Plant Protection Convention website redesign.

Homepage.

International Plant Protection Convention website redesign admin page.

Admin page.

International Plant Protection Convention website redesign text editing system.

Text editing system.

International Plant Protection Convention design docs example.

Design documentation page example.

International Plant Protection Convention website 2015 redesign.

Latest version (2015), built with Django and Mezzanine CMS.

International Plant Protection Convention

User experience design, graphic and identity design, HTML markup, CSS, JavaScript, user testing, debugging.

The IPPC is an international agreement on plant health to protect cultivated and wild plants by preventing the introduction and spread of pests.

Problem

The existing IPPC site contained a wealth of information which was difficult to access in an unclear hierarchy. Navigation was difficult for visitors, content updates were complex for staff and the site lacked a visual voice.

Solution

I worked with IPPC staff to produce a new www.ippc.int design based on web standards.

A design process was carried out which consisted of the following:

  1. Identify main site user groups
  2. Understand site content and organize it into logical sections
  3. Create wireframe and visual design mockups based on findings from the above
  4. Create code templates based on the visual designs
  5. User testing and modifications
  6. Site launch

After the IPPC’s main audiences were identified the information architecture was drawn out and a wireframe prototype was created which allowed direct use in a browser and better initial feedback.

A visual design was chosen from a series of mockups which were presented to the IPPC Secretariat.

Site elements were separated into clean code consisting of semantic HTML for content, CSS for layout and visual presentation and JavaScript for accessibility-enhancing behaviors such as text-resizing. Page templates using this code were produced for the IPPC programmer to implement.

I then created a custom backend administration interface design for the website which makes management and updates much easier for IPPC and countries’ staff to use.

User testing was carried out with www.ippc.int audience members and staff and modifications were made based on test results before, during and after the new site launch to identify and resolve problems.

Throughout the project I worked closely with IPPC staff both remotely and in the Food and Agriculture Organization offices which I eventually joined as a staff member.

Work Done

User experience design, graphic and identity design, HTML markup, CSS, JavaScript, user testing, debugging.

See also:

Food News website homepage.

Food News website homepage.

Food News on the Hacker News front page. Below is the blog post announcing the project.

♨ Food News is a website to publish and discuss links about healthy sustainable food, ranked by readers. It uses Mozilla Persona for authentication and no passwords are transmitted to or saved on the food.hypertexthero.com server.1 The code is open source.

Links on the homepage are ranked using a time-scaled ranking algorithm. This means that both the time since a link was published (its age) and the amount of up-votes a link has received (its popularity) affect a link’s rating, so fresh, interesting links should be present on the homepage every day, especially if the site becomes popular. I.e. The homepage lists the most recent links with most votes, while the New page lists the most recently posted links.

People publishing on Food News have a ‘karma’ number, which is a measure of their reputation on the site. Karma increases when a person’s links or comments are up-voted. Recent comments with most upvotes are listed in Best.

Ideally, food lovers, as well as people with knowledge in food-related sciences and disciplines such as agriculture, animal health, biodiversity, climate, forestry, gender, plant protection, land tenure, nutrition, soils, water, etcetera, would use Food News to publish links and comments with good information about food to help us develop better eating habits that are less damaging to our planet and the species living on it, including us humans! Note that links to not-for-profit endeavours are preferred and that spam will be deleted.

Thanks to Stephen McDonald for Mezzanine and Drum, upon which Food News is built, and to Michael Kelly for help with a django-browserid issue.

Comments, criticisms and suggestions are welcome at the Hacker News thread!

—Simon

  1. For a good explanation of how this works see the ‘How it Works’ section of James Bennett’s Personafied

Food News

Web Application Hacking, Python, Django, HTML, CSS, JavaScript, Graphic Design.

Problem

No problem. I wanted to see if I could create a Hacker News clone with Mozilla Persona for authentication. I had already made two attempts at this type of web application, one for Rome links and stories and another for a zombie apocalypse game called Day Z, so I thought I’d do one for food while working at the Food and Agriculture Organization.

Solution

I hacked together food.hypertexthero.com building upon the work of Stephen McDonald’s Drum, which was itself built upon his own excellent Mezzanine content management system.

Food News was the first thing I made that appeared on the front page of Hacker News, which was exciting for me!

Work Done

Web application hacking (Python, Django), HTML, CSS, JavaScript and graphic design.

The ♨ glyph in the logotype is Unicode character ‘Hot Springs’ (U+2668) in the Miscellaneous Symbols Unicode block (2600-26FF), which I am using in the text above. For the Food News site, I made a PNG image of it for reliable rendering across browsers.

Homepage. Software overview page.

Lightcrafts Photo Editing Software Wireframes

Wireframe Visual Mockups

Some wireframes I made for a proposal to redesign the Lighcrafts Lightzone image editing software website.

IPPC IT Wishlist website about page. IPPC IT Wishlist website homepage. IPPC IT Wishlist website page. IPPC IT Wishlist website new post page.

IPPC IT Wishlist

User Experience Design, Interaction Design, Back End and Client Side Web Development (Python, Django, HTML, CSS, JavaScript), Graphic Design.

Problem

The International Plant Protection Convention needed to a better way to organize, manage and produce its IT work to better support its mission.

Solution

I hacked together a web application where anyone in the team could post a bug report or feature request and also vote on others’ posts, thus creating an agile, organic todo list.

In addition, I made:

Work Done

User experience design, interaction design, web development (Python, Django, HTML, CSS, JavaScript), graphic design.

Simple web typography template (HTML and CSS).

Web Typography Template

HTML, CSS, Georgia Typeface

Good design involves good writing and good typography. To offer the latter to anybody looking to make reading easy on a web browser or a mobile device I made an HTML & CSS template using the first chapter of Olaf Stapledon’s Star Maker as example text.

Here’s the HTML and CSS code.

A a template using the Roboto typeface is also available.

About This Particular Macintosh.

ATPM cover designs:

The ATPM cover depicts the word 'Macintosh' in red, blue, and yellow bold letters emerging from a tangle of grey lines.

The November 2010 ATPM cover is a drawing of an Adobe Flash cage being opened by CSS, JavaScript and HTML5, releasing the open web.

The ATPM cover is a cartoon of a person playing videogames on a Windows harddrive from the comfort of their Macintosh HD.

About This Particular Macintosh

Website design

Problem

About This Particular Macintosh (ATPM.com) is an online magazine which has been was around since the beginning of the Web in 1995. The magazine symbolizes one of the best qualities of the internet: free content by a passionate community of volunteers.

ATPM’s design needed some refreshment to be brought up to date with modern web design techniques whilst keeping the familiar look and feel. I took the job.

Solution

I worked with Michael Tsai and Christopher Turner to create a new CSS-based layout, with more generous whitespace and other graphical refinements. The new layout and semantic markup also reduced the site’s file sizes by almost half.

Work Done

Graphic design, HTML markup, CSS.

Visit site →

A screenshot of the FAQ.

F*!@#$% Accessible FAQ

Web page

Problem

When a question is asked I want to be able to easily select and send a link to an answer located in a single HTML page. The answer should also be visible with JavaScript disabled.

Solution

An accessible FAQ page was created. See an example and the source code.

Work Done

HTML, CSS, JavaScript hacking.

PastaClock.com

Pasta Clock

Graphic design, website and application design, copywriting

Problem

Overcooked pasta.

Solution

I worked with Jimmy Boss to cobble together a web application that helps everyone cook pasta al dente rather than al mush.

Work Done

Graphic design, HTML markup, CSS, JavaScript hacking. Visit application →

Cantos.com landing pages.

Cantos

Website Design

Problem

Cantos needed to attract new visitors interested in online business video to their website. An audience accustomed to seeing a great deal of financial information on a daily basis proved to be a challenge.

Solution

Simon worked together with a marketer to create a group of clear, modern, accessible HTML landing pages targeted by a focused Google Ad campaign. The landing pages succeeded in bringing a large number of new visitors to explore Cantos’ services with very high impression-to-click rates.

Work Done

Graphic design, HTML markup, CSS, CMS templates and implementation.

Australian Postgraduate Study in Plant Biosecurity Program website design.

Australian Plant Biosecurity Program

Website Design: Graphic Design, HTML, CSS, JavaScript, CMS, Forum

Problem

The Plant Biosecurity Program of the Australian Government needed a website to promote a postgraduate course in plant biosecurity offered by a consortium of Australian universities.

Solution

I created a new design, coded the markup and stylesheets and implemented a CMS for the program staff to update the website as well as a private forum for student discussion. The website art direction uses imagery from The Endeavour Botanical Illustrations online exhibition currently at the Natural History Museum.

Work Done

Graphic design, HTML markup, CSS, JavaScript, CMS implementation, User Forum implementation.

Visit site →

Website for Angelo Paionni.

Photographer Angelo Paionni

Website

Problem

A photographer wanted to show his work online.

Solution

I created a website.

Work Done

Graphic design, web design & development.

Visit site →

Descriptedlines : A website for a writer to write and readers to read.

Descriptedlines

Website design

A writer needed a website to publish her writing, so I made one.

Visit site →

Imaginary Lines

Website design

I was reading a lot of Jiddu Krishnamurti, so I made a website to write and link to things concerning conflict caused by division caused by fear. Borders, nationalism, organized religion and so on.

Work Done

Graphic design and web design.

Visit site →

A graphic depicting the PID Server website.

Plant Treaty Internal Website

Website design

Problem

IT Works was working on a website that helps the International Treaty on Plant Genetic Resources for Food and Agriculture (ITPGRFA, phew!) do its job of facilitating the sharing of plant genetic resources among countries around the world.

IT Works needed the client-side of the website to be as easy to use as possible for an audience spread across most of the planet using a wide variety of computer systems and of varying computer skills.

Solution

I designed the front-end for the ITPGRFA internal website. An easily customizable site was made and built on a foundation of web standards with maximum usability, accessibility and simplicity. This ensured the site was as usable to someone with a modern computer and a DSL connection as to someone with an old machine and a 14400 bit/s modem.

Work Done

Graphic design, HTML markup, CSS.

5th Avenue, New York City, September 2015

Published 2015 December 1

← Notebook Archive