Cemre Güngör

Home · Old blog


so this is me on the right.


new vintage baseball

(Source: interrobangbangbang, via pumpumschlanger)


(Source: vimeo.com)




watching my friend Jeff shoot a heavy metal video (Taken with Instagram at Bamm.tv)


The secret to custom & sharp icon fonts

Use SVG fonts (with fallback to TTF)!

  • Design 16x16 SVG glyphs with Illustrator using “align to pixel grid”
  • Import them into the icomoon icon generator to make SVG font
  • Put SVG font into fontsquirrel’s webfont generator to generate EOT and TTF fonts (for IE and Firefox fallback).
  • (Here’s the secret) Flip the preferred order of formats in the font-face syntax outputted by font-squirrel, placing SVG above TTF.
    @font-face {
        font-family: 'IcoMoonRegular';
        src: url('branchicon-webfont.eot');
        src: url('branchicon-webfont.eot?#iefix') format('embedded-opentype'),
             url('branchicon-webfont.svg#IcoMoonRegular') format('svg'),
             url('branchicon-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;


(I remember this from somewhere…)


Check out our launch blog post and some press.


As a junior in high school, I used Blogger to create The Voice of Santa Monica High School. My co-editors and I would post provocative articles – many submitted anonymously and penned by pseudonyms such as “Twisted Satire” and “Kano Lives” – and would encourage our classmates to “join the…


A better copy for this would be

Please sign in with your Windows Live ID to track fares.

The original copy isn’t great because what I should do next is at the end of the sentence. and “you need to” sounds negative.

Even better, provide the login right there!

2.28.2012 My experience on StartupBus as a designer

Here’s an email I sent to @eris (with edits) about my experience on the bus and what worked for me:

What worked very well for me was arriving with my scaffold html and stylesheets. If you’re the sort of designer that likes tackling the HTML/CSS as well, it helps a lot that can quickly start building instead figuring out grid layouts, form styles, etc. As soon as I had a rough idea, I could start building pages. The more decisions you can make upfront, the better.

The biggest challenge (for the entire team) will be reducing scope so much, that you can get something out of the door. Even though we had the simplest website, I still had to code until wee hours. I think judges are impressed by idea/presentation as much as execution (else we wouldn’t have won), and since time is so limited, it’s best to go with something technically simple or on a prototype level (Though the WalkIn guys who built iPhone, iPad and Android apps wouldn’t tell you the same :).

Another thing that judges like is having done a bit of customer development, and as the UX’er you might be the most qualified to do quick and dirty user research like that. 

2.24.2012 Fixed positioning anchored to specific elements in page

It’s not too obvious to have items “float” (i.e. fixed positioned) above everything else in the page, while still being anchored to a specific element.

For example, you’d like to fixed position a message next to the navigation bar. Initially, it’d sit next to the navigation bar, but would stay in place as users scroll. If the window is resized, the fixed positioned item would follow its anchor (as opposed to being at a fixed distance from the corner of the window).

Solution: enclose your fixed positioned element in an “anchor”, which as position:relative. When you set it to position: fixed, it will freeze in its place. To move it up/down/left/right, use margins (because whenever you use top: will fixed, it would fix it to a specific distance from the top of the page).

Code on JSFiddle!


I’m not the kind of designer that obsesses over visual eye candy, but I think this is a slick solution.


Youtube dropdown hover state

2.19.2012 A short course on Processing.js on mobile

As long as you disable device zooming, and set the size of the Processing.js canvas smaller than the screen size, the performance is surprisingly good.

<meta name = "viewport" content = "width=device-height, height=device-height">

If you don’t set the height/width, iPhone defaults to 980px across, which could make your sketch unnecessarily large (if you size it 100% of body).


Sorry for not sharing what’s going on with our product. It’s getting close!


Sorry that I haven’t posted at all since I defended my thesis last week. I’ve been finishing up my tenure at Etsy, packing for my move, and trying to get some rest.

Here is my thesis paper, and I also uploaded pictures to Flickr.