Fourth Floor Studio http://4thfloorstudio.com Visual Design for Web and Print Sun, 13 Dec 2015 14:21:24 +0000 en-US hourly 1 I Eat Ithaca http://4thfloorstudio.com/i-eat-ithaca/ http://4thfloorstudio.com/i-eat-ithaca/#respond Sun, 29 Nov 2015 15:44:12 +0000 http://4thfloorstudio.com/?p=1046 One diner’s guide to eating Ithaca http://ieatithaca.com Purpose I eat Ithaca is born of two needs: 1) It is a motivator in the battle against routine – eating at new restaurants is baby step towards a lifestyle of curiosity, exploration,
Read more ›

The post I Eat Ithaca appeared first on Fourth Floor Studio.

]]>
One diner’s guide to eating Ithaca

http://ieatithaca.com

Purpose

I eat Ithaca is born of two needs: 1) It is a motivator in the battle against routine – eating at new restaurants is baby step towards a lifestyle of curiosity, exploration, and adventure. 2) It provided an opportunity to learn angular.js – I have always found that diving headfirst into a project is the best way learn something new.

At the end of the day, the target audience is me and my peers. If, along the way, it helps other people discover new restaurants, or raises awareness of the culinary diversity that exists in Ithaca, that’s great. But that’s just icing on the cake.

The true measure of success for this site is whether it inspires me to dine out more often, and to enlist new companions in my journeys to the outer reaches of Ithaca’s cuisine.

Function

IeatIthaca is broken into three blocks.

The primary function of the site is to provide a list of all the restaurants in Ithaca. Depending on the availability of the information, each restaurant is given a rating, a review, is labeled as having either been eaten at yet or not, and links to external review sites and to google maps.

Above the list is the option to sort list items alphabetically, by rating, or by whether or not they’ve been eaten at. Also above the list is a search tool which filters the list items by restaurant names matching the user’s input.

At the top of the page is the site title and a running tally of the progress toward the goal of eating at every restaurant. This includes the total number of open restaurants in Ithaca, the number of which have been eaten at, and the number of remaining, un-eaten at, restaurants.

Technologies

  • Html5Boilerplate
  • sass
  • Angular.js
    • ngAnmiate.js
    • Tabletop.js
  • googleapis

IeatIthaca is built with Html5Boilerplate (https://html5boilerplate.com) as it’s foundation.
The CSS is written in SASS using codekit as a pre-compiler.
Angular.js is used to manipulate the data and the DOM. Additional functionality is derived from the ngAnimate.js and the tabletop.js modules.
All the restaurant data is stored in a published Google Sheet.

Build Process and Decisions

Data Acquisition

Restaurant data was acquired using free tools available from Import.io (https://import.io). Import.io provides an easy user interface to do some automated data scraping. There are probably more robust tools out there to do complex operations, but for the task at hand, this was more than adequate.

Data was acquired from allmenus.com and from tripadvisor.com. Both sources contained a fair amount of inaccurate information and a considerable amount cleanup had to be performed to compile the final data.

Build

My first impulse was to use a CMS, namely WordPress, for this project. That’s because WordPress is always my first impulse. I quickly realized that the amount of data fields required for each review was relatively small and that a simple json file containing all the reviews and restaurant meta would still be very easy to update and maintain. Further, this could be designed as simple one page app, perfect for angular.

The app is pretty simple. It’s just a loop through all the entries, and some conditional inclusion of elements based on the existence of a few units of content; Has it been eaten at or not, and if it has, did I like it. Have I reviewed it, if so, show my review, if not, show the tripadvisor review. Finally, does it have have external links, if so, insert the link url, if not, style the link as disabled.

While working on the app, I realized that once it was built, though easy enough to modify entries, the sore point in keeping the site updated would become the json file. Updating would require keeping the json file current across all my work stations. this would mean remembering both to run through the various git steps on every change, and to ftp the changes to the server as well. Further, there would be no system to update the site on my phone, which as a review site would be the most convenient. It seemed reasonable that there would be a method in place for using google docs as the data source, and of course, after a little googling it turned out there was. Tabletop.js is a module to use spreadsheets as an angular data source, then times.tabletop.js extends this specifically to use the google sheets’ api.

The primary weakness in the coding right now is that the whole system is incredibly slow. I’ve tried to speed it up by cleaning up and clustering a few of the functions in order to reduce the number of times the page needs to loop through the list of restaurants, but the problem may just be that there’s too many objects loaded into the page at one time. Perhaps implementing some sort of lazy load system for the list items would be the solution. At the moment, I am very open to suggestions.

Style

From a style development perspective, the main goal was to keep things light. There’s not much to this app so there’s no need to load a full framework. As is always my criticism of the trend to use bootstrap or the like for every project, ninety percent of the components frameworks include would not be used. And, it would take longer to remove them, piece by piece, than it would to just right your own. IeatIthaca is written in sass and compiled using codekit. Bourbon is imported to make use of some of their mixings. Since Bourbon doesn’t actually output any css of it’s own, it doesn’t increase the final file size any. I also used Geoff Graham’s SASS port of animate.css. Geoff has rewritten animate to make it completely modular so I was able to just import the few fade-in and out animations I’m using.

Someday maybes items

Bugs:

The Links in the Footer.

If the information is available a link to the appropriate allmenus, tripadvisor, or google map page is inserted into the list items’ footer. If it’s not available, I’ve tried to disable the link by inserting javascript:void[0] as the href value. Angular, however, prepends this data with ‘unsafe’ for security precautions, but this completely overrides my attempt to disable the link.

Slow

The whole page is so slow… not to load, but to render. I think it has to do with running through too many entries. Is some form of lazyload the solution? or is it a matter or rewriting the sequence in which the javascript is executed.

Wish list

Cuisine Tags

It would be nice to change the filter by restaurant name to filter by cuisine types. The Cuisines would have to be turned into tags. Then the input filter would have to autocomplete based on the existing tag values and filter the list by that input. my first attempt at this didn’t work, I think because the existing autocomplete modules were designed to use data from json files and the google sheet data source didn’t work properly. This may not have been the case though and I will look into this further.

Version 2

Version two would open up the project so that other people could use the checklist. This would be limited to the ability to sign in and mark restaurants as eaten.

The post I Eat Ithaca appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/i-eat-ithaca/feed/ 0
Designing Postcard Promo Campaigns that Work http://4thfloorstudio.com/designing-a-promotional-postcard-campaign-that-works/ http://4thfloorstudio.com/designing-a-promotional-postcard-campaign-that-works/#respond Sun, 27 Jan 2013 03:37:28 +0000 http://4thfloorstudio.com/?p=154 Hot off the presses, It’s postcard season again! Postcard season is that special time of year which, ideally, rolls around four times per calendar. What I like best about postcards is the sense anticipation with which the whole affair is
Read more ›

The post Designing Postcard Promo Campaigns that Work appeared first on Fourth Floor Studio.

]]>
Hot off the presses, It’s postcard season again! Postcard season is that special time of year which, ideally, rolls around four times per calendar. What I like best about postcards is the sense anticipation with which the whole affair is charged – the suspense of waiting for the postcards to arrive in the mail, the excited unpacking of shipping material, the ritual placing of stamps and mailing addresses labels which heightens the anticipation, and best of all, once they’re in the mail, the expectation of the work to come.

It has been my experience that postcards are the singular most effective tool in an illustrator’s self-promotion arsenal in regards to an outlay of effort-to-work-to-ratio-of-return-on-investment. Quite the mouthful when I put it that way, but what I mean is that given how cheap and easy online printing has become, justifying postcards as a promotional vehicle has become a no brainer – it only takes one job to more than cover the expense (when I started out, not that long ago, you had to lay out hundreds of dollars for minimum print runs of a thousand cards, where as now, I managed to pool together a couple promo codes and split my thousand into three different designs – all for under a hundred bucks). One might argue that social media provides a myriad of ‘free’ promotional tools, but if you’ll notice, I also included effort in the equation – it may just be me, but social media takes a constant tedium of updating and following effort to have even a marginal result, where as putting together a postcard design is a one time effort. And I enjoy designing it!

If you’re new to making illustration promotion postcards, I’ve put together some tips from what I’ve learned both through my own process and mistakes I’ve made in the past (learning opportunities), as well as from what I’ve seen other illustrators do:

1. Professional Design.

Great artwork can be ruined by bad design. Great design can make even bad artwork look good. If you’re a great painter but graphic design isn’t really your thing, then find someone who’s thing it is. A postcard is likely your first chance to make a good impression and if it looks professional, you look professional, likewise, the opposite holds true as well. If you’re not computer design savvy, find someone who is, perhaps you could work out a trade in favor.

2. Choosing the Right Printer.

All the online mass printing places are really pretty much the same, the quality is okay but not great, they will mis-cut a small percentage, and through various promos, offers, specials, and possibly the inclusion hidden file handling fees or shipping fees, all their prices are pretty much the same. I haven’t used one yet that would get my glowing endorsement, nor would I warn you of steering clear of any one in particular.

3. Start with the Size First.

Before you do any designing find out the exact size specifications of the company you’re dealing with’s postcards. A ‘standard’ postcard is 4″x6″, but very few are standard. Lots of companies print slightly irregular sizes such as 3.75″x5″, 4″x5.5″, or some other such close approximation. It’s amazing how such small variant in proportions can have such a huge effect on design, but I can guarantee that if you do your design ahead of time, without working to final print size, you’ll be very disappointed in the results after you’ve had to shuffle things around to accommodate new dimensions.

4. Follow the Specifications.

Know your printing company’s printing specifications – each printer has their own specifics in terms of dpi and layout. If they provide a template it should include bleed sizes as well as safe print margins. If they don’t provide a template, or if it doesn’t have all the specifications, a general rule of thumb is an extra 1/16th of an inch bleed on all sides and to not place type up to 1/8th of an inch from the trim edges. Postcards don’t always get cut straight, having the extra bleed prevents there from being white lines along an edge, and having the type inset makes sure that even if it’s mis-cut, your important information isn’t cut off.

You should also find out your country’s post office’s printing specifications. Here in the US the post office doesn’t allow printing darker than 7% grayscale on the right side or along the bottom (excluding the mailing address of course). As well, if your postcard turns out to be slightly larger than standard size it could result in a much larger postage rate (learned through experience).

5. The important stuff.

The whole point of promotion is to get people to contact you, it should go without saying that you want your contact information included on the card. Having your name and webpage on the front of the card is, at the bare, minimum required. On the back, I would recommend having as much contact info as possible (within reason). Including an email address and a phone number on either the front or the back of the card should also be a given (although email is more common, rush jobs still give me a phone call sometimes).

If you want people to contact you, they have to be able to read your information. That means no 6pt fonts in grey on grey – make it big, make it bold. That being said, as noted previously, the post office will impose restrictions as to what and where you can print on the back of the card so make sure you look into that before you design the backside – otherwise you just might have all your postcards shipped back to you (again, from experience).

6. Know Your Brand, and Know Your Market.

You are your brand, your branding is the artwork you put out there, and it should appeal to your target market, the people you want to work with. If it doesn’t, either change your branding, or change your market. As inexpensive as postcards are, there’s no point wasting money on promoting to markets to which you are not a good fit.

7. Be Patient.

Usually, a good mail-out will result in at least some very immediate response. That means your card made its way across the desk of an Art Director just as they were considering whom to place for a job which your style was appropriate for. If you don’t hear anything though do not be disheartened. Time and time again I’ve heard it expressed by art directors that this only means you weren’t the right person for that job at that moment. The great thing about postcards is that if they like your work they will hold on to it. I have literally gotten a call from an art director that was the result of a card I had sent out three years prior. She had liked my work, and wanted to work with me, but I just had to wait for that right project to come along for which I was a perfect fit.

8. Be Persistent.

There’s a fine line between being persistent and being annoying, but there’s no line between being timid and not getting any work. Following a three to four-month mailing schedule won’t annoy anyone but it will make you recognized and viewed as a professional.

When it comes to self-promotion, by no means should a postcard be your only vehicle (obviously, nowadays, internet presence is a must), but I could not imagine my self-promotion strategy being effective without including them. Postcards offer the most bang for your time and for your buck.

Below: Some action shots from my latest round of making postcards, plus some high-drama-angled-close-up-shots of the final product

The post Designing Postcard Promo Campaigns that Work appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/designing-a-promotional-postcard-campaign-that-works/feed/ 0
Coffee, Cats, Cupcakes & Cream http://4thfloorstudio.com/the-coffee-shop-icons/ http://4thfloorstudio.com/the-coffee-shop-icons/#respond Sat, 26 Jan 2013 11:30:25 +0000 http://4thfloorstudio.com/?p=772 If there is anything I like more than drawing all day, it’s drinking coffee in a coffee shop while drawing all day. Working with art director Tally Wade over at Coffee Shop Media, we put together a set of coffee shop
Read more ›

The post Coffee, Cats, Cupcakes & Cream appeared first on Fourth Floor Studio.

]]>
If there is anything I like more than drawing all day, it’s drinking coffee in a coffee shop while drawing all day. Working with art director Tally Wade over at Coffee Shop Media, we put together a set of coffee shop themed icons and a banner image for their website. The coffee shop bar banner image is pulled together from several different sourced photos but that extra touch of authenticity (and local Ithacans might recognize this) is supplied by doing the job while on a onsite sitting at the Trumansburg Gimme Coffee location. I should thank the Gimme Coffee barista for letting me sit for so many hours.

If anyone needs coffee shop drawings, gimme a call, drawing in coffee shops is what I do.

coffee-icons

The post Coffee, Cats, Cupcakes & Cream appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/the-coffee-shop-icons/feed/ 0
Times & Styles Change, but Business Cards Are Classic http://4thfloorstudio.com/its-business-time-business-card-design/ http://4thfloorstudio.com/its-business-time-business-card-design/#respond Fri, 25 Jan 2013 04:44:31 +0000 http://4thfloorstudio.com/?p=769 Hot of the presses and just in time to meet people. I’ve just received a stack of business cards from Design Your Own Cards (this isn’t a promo piece though I am absolutely pleased with their work). I went with them
Read more ›

The post Times & Styles Change, but Business Cards Are Classic appeared first on Fourth Floor Studio.

]]>
Hot of the presses and just in time to meet people. I’ve just received a stack of business cards from Design Your Own Cards (this isn’t a promo piece though I am absolutely pleased with their work). I went with them for this print project because they were one of the few companies I could find that were willing to do a three color printing job with raised ink at a reasonable cost. Examples of raised ink cards I found on the internet all looked either very tacky, very dated, or on many occasions both of the above.

Done carefully however, this this old fashioned raised-ink technique printed on a light grey linen card stock, has a rich tactile quality, an air of classic sophistication, as well as a durability that is lost with the modern digitally printed cards.  This is to tie my new branding direction with my most recent works which are what as I would characterize as a contemporary digital version of traditional illustration, just as this business card design is a modern version of the classic, traditional, business card.

bcards2

bcards3

The post Times & Styles Change, but Business Cards Are Classic appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/its-business-time-business-card-design/feed/ 0
Building a Brand: the Fourth Floor Studio Brand Standard http://4thfloorstudio.com/fourth-floor-studio-brand-standard/ http://4thfloorstudio.com/fourth-floor-studio-brand-standard/#respond Tue, 08 Jan 2013 18:16:13 +0000 http://4thfloorstudio.com/?p=33 Branding Brand consistency equals Branding and building brand consistency starts from the bottom up. Designing a Brand standard guide at the outset ensures that all projects moving forward stay inline. A comparatively small outlay of time now saves a vast
Read more ›

The post Building a Brand: the Fourth Floor Studio Brand Standard appeared first on Fourth Floor Studio.

]]>
Branding

Brand consistency equals Branding and building brand consistency starts from the bottom up. Designing a Brand standard guide at the outset ensures that all projects moving forward stay inline. A comparatively small outlay of time now saves a vast amount of time spent later in revisions and updating. A solid brand standard guide contains logos, marks, and all usage variants, branding colors across print and web applications, and typographic guidelines. Using the Fourth Floor Studio website relaunch and rebranding as a model, the following is an example of what goes into consideration in a brand guide.

 

The Logo

Primary Logo, and monochromatic varient plus stand alone icon and word-mark variants.

The primary logo:

Fourth Floor Studio Primary Logo

The monochromatic version:

logo-mono

On orange or dark backgrounds use the alternate monochromatic version:

logo-mono-alt

 

Brand Colors

Brand Pallets Across Multiple Media:

4th Floor Web Orange: #F24D20, R:239 G:78 B:34

4th Floor Orange (print): #F05A28, R:240 G:90 B:40, C:0% M:80% Y:95% K:0%

 

Typography

The most commonly overlooked yet powerful tool in building brand imagery and brand constancy is typography. Before any layout was done on this site, before the logo was refined, and before color pallets were finalized, the typographic guidlines were established and locked into place. Typography is the foundation, support, and bricks by which any design house is built. Everything else is window dressing and paint jobs once the typography has set the construction.

The Official Fourth Floor Font:

Raleway – available free from google fonts @ http://www.google.com/webfonts/specimen/Raleway. For Web use it is embeddable via CSS using @import url(http://fonts.googleapis.com/css?family=Raleway:200,300,400,600,800,900); For number and ampersands the official Raleway font is substituted for Lato font, also available for embedding via google fonts CSS call @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

Usage exaples:

Heading 1 – 200 weight

Heading 2 – 300 weight

Heading 3 – 400 weight

Heading 4 – 600 weight

Heading 5 – 800 weight
Heading 6 – 900 weight

 

Inverted Heading class

Paragraph line-height example:

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

 

Blockquote Sample:

“But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely paisical exercise, except to obtain some advantage from it?”

The post Building a Brand: the Fourth Floor Studio Brand Standard appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/fourth-floor-studio-brand-standard/feed/ 0
Back in the Day: The 4th Element was Typography http://4thfloorstudio.com/szuks-graffiti/ http://4thfloorstudio.com/szuks-graffiti/#respond Sun, 06 Jan 2013 20:10:04 +0000 http://4thfloorstudio.com/?p=138 The other day, while cleaning up the studio after some internal renovations (the installation and organization of a painting storage rack) I happened across a shoebox of old graffiti photos from back in the day. That got 4th Floor Studio
Read more ›

The post Back in the Day: The 4th Element was Typography appeared first on Fourth Floor Studio.

]]>
The other day, while cleaning up the studio after some internal renovations (the installation and organization of a painting storage rack) I happened across a shoebox of old graffiti photos from back in the day. That got 4th Floor Studio to reminiscing of the late nights and alleyways from whence it came. Here is a small documentation of the larger, and mostly painted-over, body of work which, in the nineties, used to exist in Toronto’s back alleys and train yards.

Graf has changed very little over the years. Some people have brought their own innovative approaches to it but they are the rarities, for the most part it has remained fixed in a tradition established thirty years ago on the subway cars of New York. If you can date me through these photos it’s only in that they place me in the range of being someone involved in third-wave graffiti, while also being someone who used a non-digital camera – creating dusty photographs taped together to make panoramics stored in a shoebox to stumble across while cleaning up his studio after building new painting racks.

Szuks2 - Toronto Graffiti

Szuks2 - Toronto Graffiti

Concrete Canvas - Hamilton Show '97

Concrete Canvas - Hamilton expo '98

Szuks2 - Toronto Graffiti

Part of a commissioned mural done with 'Fame' for Sony Music Canada

Back of the Bamboo for the 416 expo

Szuks2 - Toronto Graffiti

Szuks2 - Toronto Graffiti

Szuks2 - Toronto Graffiti

As far as I know this is the last remaining piece I have up..

Szuks2 - Toronto Graffiti

Concrete Canvas - Hamilton '99

Szuks2 - Toronto Graffiti

Szuks2 - Toronto Graffiti

Szuks2 - Toronto Graffiti

Sometimes I still think about hanging up all the other forms of artwork and just going back to the alleys.

The post Back in the Day: The 4th Element was Typography appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/szuks-graffiti/feed/ 0
Hello world! The Welcome to WordPress Auto Post http://4thfloorstudio.com/hello-world-2/ http://4thfloorstudio.com/hello-world-2/#comments Tue, 01 Jan 2013 19:30:59 +0000 http://4thfloorstudio.com/?p=1 “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” This is the first post which comes with every fresh WordPress install, and this time I’m keeping it.

The post Hello world! The Welcome to WordPress Auto Post appeared first on Fourth Floor Studio.

]]>
“Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!”

This is the first post which comes with every fresh WordPress install, and this time I’m keeping it.

The post Hello world! The Welcome to WordPress Auto Post appeared first on Fourth Floor Studio.

]]>
http://4thfloorstudio.com/hello-world-2/feed/ 3