The Ink Spot

SpartanDonut

12:52 PM

Mornin Kids

Ryan

morning spartan

Bakabaka

1:39 PM

g'day, gents

Ryan

morning @Bakabaka Vincent

Bakabaka

hey @Ryan, still existentialist? :)

Ryan

lol always

Bakabaka

good

Ryan

0

Q: When designing, what techniques can be used for determining if the right amount of "fluff" has been added?

Fluff (N.): something inconsequential Source: Merriam-Webster Online English Dictionary In design, this is often viewed as unnecessary ornamentation. In web design, where load times are important, there is a move almost entirely away from this. However, when working on print design or even ...

Bakabaka

1:44 PM

nice Q!

I don't think it's a question of amount, tho

just of how it's done. That Kenwood ad you show is clearly amateur, but more because of how the fluff is done instead of the amount

there's more wrong with that ad. Or should I say there's little that's right? :)

Ryan

I think the KENWOOD is right on the border. I think the fluff is actually good, I just think they could've styled the bullets or chosen a different font for the bullets.

Bakabaka

they should've dialed back on the amount of typefaces. And I think the grey gradient is kinda dated

Ryan

the heading too perhaps but otherwise it seems alright to me, clear message. Brings attention to the size and company name. Subtle gradient seems to work and the faint object reflection

If you think the grey gradient is dated, what should a print ad do? Solid color? Random texture / letters?

(you can answer in the question if you plan to answer it)

Bakabaka

hm, good question. I don't really like this, but I don't know what would be a good alternative

subtle... fluff? :)

I mean, that dots pattern in the top ad is quite nice. If they'd just used that...

Ryan

I saw one really, really nice ad with A LOT of fluff but came out really well. I couldn't relocate it though to post. Not sure if it was in one of the magazines I've got at my office or one I saw online.

If I can find it I'll probably edit the post to include it, or if its already gotten some answers will at least show you on the chat here

Bakabaka

1:53 PM

fluff is a tool, I guess. If used right, it doesn't have to be a bad thing

Ryan

of course. Especially for less visual ideas fluff becomes important. Like a lot of ads I see might use random binary code to try and create an idea of "Security" and "Encryption" because these are hard things to show in a photo.

Bakabaka

nice ad, right amount I'd say

Ryan

Not the most memorable. I mean I remember it, but I'm looking at it from a design/advertising standpoint. I'm not sure how memorable it would be to a security installer. But it certainly works on some level at least.

Bakabaka

I really like the composition, as in the use of phi and all

and it has Exo :)

Ryan

exo?

Bakabaka

1:59 PM

the typeface

the blue text is in Exo, it's a Google font

Ryan

morning Johnny5

JohnB

hey Ryan and Baka

Bakabaka

hey @JohnB

on an arabic spree yesterday?

Ryan

I need a better way to manage my fonts. By the time I download some and install them I've already forgotten the names of the new ones.

Bakabaka

I once thought of a type deck

Ryan

2:14 PM

I wish instead of "Filtering Typekit" Adobe did something useful and let us define our own groups, and filter by style (serif, sans, etc)

Bakabaka

being the Magic nut I am, I wanted to have a deck of cards printed, with each displaying a typeface

@Ryan that would be great, indeed

Ryan

not to mention an easier way to remove shitty system fonts or worse broken fonts that cause "font scrolling" to break and jump to the bottom

@Bakabaka I bet you could sell that on Etsy if you did it really well

Bakabaka

...hiding those annoyingly undeletable OS fonts

@Ryan the idea was to pour some artistry in it, but still clearly representing the typefaces

JohnB

@Bakabaka yeah, a new tag is born!

@Ryan I usually put a copy of the font file in the project folder. Serves two purposes: if I need to reinstall the font for the project then it's right there, and if I need to remember the font for something else I am usually able to recall it by which other project it was used for rather than its name

you're probably looking for something more efficient though :)

Bakabaka

@JohnB nice one.

I guess you won't mind if I filch that idea

JohnB

2:23 PM

go right ahead! It's saved me some stress for sure

Bakabaka

gents, Imma leave you again.

JohnB

ok!

Bakabaka

have a nice day and rembember that it's the first one of the rest of your life.

JohnB

now it feels special!

Ryan

have a good afternoon / evening / life.

SpartanDonut

2:59 PM

@Noctrine get out of here you!

These are my new friends and I am incapable of sharing

Noctrine

3:13 PM

I already added this room to favorites though.

SpartanDonut

3:23 PM

|:<

JohnB

:) hey folks

SpartanDonut

Hey John

GiantCowFilms

@SpartanDonut You're kicking folks out :() !

SpartanDonut

I had no choice

If I didn't harass Noctrine he'd think something was wrong

GiantCowFilms

4:22 PM

@SpartanDonut :P

Scott

5:22 PM

Life is like a box of chocolates.....
It all seems fantastic.....
Until you bite into that piece which tastes like crap!

:) :o)

Ryan

@Scott that's just white chocolate.

Scott

No such thing as "white chocolate" .. that's not chocolate. It's like "red licorice" there's no such thing :)

Ryan

5:43 PM

@Scott fair enough

Random O'Reilly

6:31 PM

afternoon, gentlemen

one cute kitty

JohnB

hello

2014 Logo Trends: logolounge.com/article/2014logotrends#.U9fozPldWSq

I guess GD's would be "Geo Wires" :)

Ryan

7:18 PM

Anyone handy with either d3.js or even just javascript in general?

JohnB

JS in general not yet played with D3 though

Ryan

I'm trying to figure out the fundamentals of it. All the tutorials I read go over some basic stuff and then just to advanced stuff without much link (namely on transitions)

If say I have an SVG rectangle at x=0 y=height/2 width=0 height=30 then I want to make a text link that changes the width to width=200

I feel like this should be easy but I'm completely lost on how to implement it, particularly the link part

SpartanDonut

I've investigated ds.js but I've not used it yet. Was thinking about implementing tournament brackets with it

Ryan

See like this: bost.ocks.org/mike/circles

it shows excerpts without showing the entire DOM or where to put these snippets

SpartanDonut

Ok so when you say text link you mean like a link on a web page?

In my head I went to something way more complicated

Ryan

7:28 PM

yeah just a basic text link. (eventually I'll work on changing it to be part of a SUBMIT button, but for now just a text link is fine)

SpartanDonut

ok so that should be simple enough

so I think the relevant snippet is here

> circle.attr("cx", function() { return Math.random() * 720; });

This looks like its setting an attribute (attr) of the circle object

But I suppose we're getting ahead of ourselves already here

Do you know how to trigger click events with hyperlinks?

Actually I have an idea

Ryan

i know how to setup google analytics to trigger events using: <a onclick="ga('send...') href='link'>Text</a>

thats about the extent of my JS knowledge lol

SpartanDonut

haha no worries

Lucky for you a programmer who loves being helpful recently started hanging out here ;)

Ryan

I've worked through jquery on codecademy but again --- going from abstract snippets to implementing it on a website is where i'm completely lost

JohnB

@Ryan this is an ugly way to do it, Event Listeners is a better way

31

A: properly bind javascript events

There are two different ways to do it. Only one will work; which one depends on the browser. Here's a utility method that uses both: function bindEvent(element, type, handler) { if(element.addEventListener) { element.addEventListener(type, handler, false); } else { element.atta...

Ryan

7:43 PM

I have no idea what any of this means @JohnB

JohnB

jsfiddle.net/UNLVa

is that helpful

Ryan

more helpful

JohnB

this would be the "ugly" alternative to doing the same thing jsfiddle.net/JWtLt

Ryan

so in place of the alert area could I put in d3.select(... ?

JohnB

yep

Ryan

7:48 PM

okay thats very helpful than.

JohnB

I like to keep all HTML, CSS, and JS separate. But not everyone is a purist like that :)

Ryan

I like to separate it out AFTER I understand it

JohnB

yeah, it can get very overwhelming trying to do it "right" from the get-go

Ryan

javadude.wordpress.com/2012/05/17/d3-js-with-dynamic-data

I wish that tutorial was better. It would probably be useful for my end goal but no comments or anything.

SpartanDonut

@Ryan just one rectangle or a selection of rectangles?

Ryan

8:03 PM

huh?

SpartanDonut

Well the sample you showed worked with data binding and manipulating a few circles all at the same time

Ryan

thats cause everything is tooo complex lol

I'll eventually have a few rectangles but to start just one is great

(I'm basically trying to make a horizontal bargraph)

SpartanDonut

So you're basically just dealing with SVG and javascript and not much of d3?

Ryan

Can SVG and Javascript alone handle the "transition"? So that it can be animated?

(Shows how little I know!)

SpartanDonut

I've not done it (could be a fun experiment) but I imagine its much more straightforward if you throw jquery into the mix

So I would say probably yes

Ryan

8:07 PM

I've tinkered with paperscript before too, found it to be a little more intuitive. Maybe it would be a better library for me?

SpartanDonut

jsfiddle.net/menBg/1

That doesn't even use D3 technically

I think D3 should be able to handle the animation

Ryan

Right now I'm trying to work through smashingmagazine.com/2011/09/23/…

See if I understand it and can then hack it up to do what I want

SpartanDonut

jsfiddle.net/menBg/2

Are you dynamically pulling in hte data?

I was looking at this for animations with D3 - blog.visual.ly/creating-animations-and-transitions-with-d3-js

Ryan

my plan is to eventually have 2 fields essentially:

How many item 1 do you have? ________

How many item 2 do you have? ________

Submit

when the person hits submit it'll multiply (item 1 * our cost) + (item 2 * our cost) and draw a bar. Then (item 1 * competitor cost) + (item 2 * competitor cost) and draw a second bar.

ill figure it out. its almost time to go home here anyways (east coast)

SpartanDonut

8:33 PM

@Ryan jsfiddle.net/menBg/3

I'd be happy to explain if you have questions when you get time

I learn by code samples so I tried to break it down as much as I could

I did use jquery in this final example... it just makes life easier

Though still unnecessary :P

Ryan

@SpartanDonut thanks! I'll have a more thorough look in the morning. This looks great though.

And about the amount of code I expected (far less than all of these complicated examples)

SpartanDonut

I'll be in and out all day so just ping me if you have any questions or anything tomorrow.

Ryan

now I just hope you ask some questions about Adobe, Advertising, or Marketing so I can help you out lol

SpartanDonut

One day

Scott

9:04 PM

cough cough.. this is FAR too productive a use of this chat.

Knock it off or people will think we're serious around here. :)

SpartanDonut

I've gone and ruined everything D:

Scott

LIKE YOU ALWAYS DO!!!!!!!! We were warned!

:)

actually... it's good to see some actual issues getting resolved rather than just cat gifs :)

JohnB

Scott

doncha hate when the grass hits the roof of your mouth... nughnughnugh

SpartanDonut

Did you see my horrible "learning the tool; also a bad artist" black knight drawing, @Scott?

Scott

9:14 PM

Hey it wasn't bad for like what.. 2 days.

Honestly looks like you've got some aptitude for the object oriented nature of Illustrator

SpartanDonut

Thanks. Yeah I really gotta practice drawing in general though if I plan on making anything "production worthy" per se

Transcript for