Tag: Design

  • Favorite Figma Plugins

    My favorite Figma Plugins and widgets – so I remember to install them 😀

    • Pattern Fill by Tank – Takes 2 selected artboards, creates png of 1 fills as tiled bg as another.
    • Tylify – better pattern maker tool – kinda clugy integration
  • Update 2017: Skills and Things I do

    Time to do a quick post to reflect on what I’ve been doing at work…

    Designing

    At ClearGraph, I’m the only designer thus it falls to me to make designs for lots of things.

    • App Design: Flows, interaction and visual design for our main analytics app. One challenge is trying to define our brand yet also building in the flexibility to white-label or embed our app. Some of the more daring design choices can’t be used because it won’t meld with another company’s visual identity. I primarily use Sketch and InVision.
    • Motion design: We need to do product videos to help sell our product. I use Premiere and After Effects to edit the videos with Pond5 stock music to go behind our voice-over.
    • Hard goods: business cards, t-shirts, stickers, trade-show backdrops, pricing sheets. I am a sucker for Moo’s spot gloss.

    Writing

    I’m a bit surprised by the amount of writing that I do as a part of my job. Since marketing has become one of my responsibilities, I’ve been forced to substantially increase the amount I write. (Previously, I couldn’t tell the difference between marketing and sales. Now I think of it as: Marketing = effort to get people to hear about and contact us. They’d become a “lead”. Sales = effort to take leads and then convert them into paying customers.)

    • Essential communication: email, chat (Slack), code review, project descriptions (task management)
    • Product Blog posts: public feature announcements/walk-throughs in the ClearGraph Blog
    • Social Media: Twitter, Facebook, Linked In, email newsletter. Basically have to notify people that a blog post has happened.
    • ClearGraph Website, App, and marketing materials: It’s interesting how difficult it is to write error messages with good tone. (I dislike “Oops” in errors – makes light of an error and doesn’t come off as empathetic)
    • Help Center: Gotta give help for all the things. FYI – Support articles should be short, clear and accurate.

    Programming

    This year I’ve done a lot less programming. We’ve been doing a lot more back-end, infrastructure work so the front-end stuff I’d hop in to help with is a lot more limited. That being said, I still try to keep up by learning a few new skills in the code-world.

    • SVG: lots of cool things going on here. Working to move away from icon fonts to SVG. Also doing more animating SVG using CSS.
    • D3: Starting to finally tinker with D3 as a way of visualizing data in svg using js. Specifically looking at the tree graph and force graphs.
    • CSS: I’ve been working a lot with SASS, but I’m keeping a really close eye on the compatibility charts with CSS grid and CSS variables (oh and position: sticky!). As soon as there’s strong coverage across the board, we’ll put those properties to use.

    Teaching

    I stopped teaching at Academy of Art University. I had fun guiding students, but I felt too pressed for time regarding homework review and updating class materials. My last semester was interesting though – I tried using github and cloud9 for editing and turning in. There were some hiccups like filesize limits on github pushes, but overall was pretty successful as a free platform setup for coding.

    On another note, I’ve gotten a couple of interview requests from early UC Davis design students. I love helping out students, but I also wonder what kind of things they’re looking for. I wish I could offer more entry level jobs to help them along.

  • Self review, October 2014

    Note 11/16/2016: This is 2 years old now sitting in my draft bin. I figure it’s ok to publish. It marks a time of about 6 months into my time at Archives.com (Ancestry acquisition) from Hotwire. It was me jumping from Designer to Developer which seemed a big change at the time. Now… not quite as much. Maybe I’ll write a followup this year.

    (Originally written Sep 26, 2014)

    Process and project management
    You don’t know the true value of something until it’s gone. I happy about my experience with scrum agile. I can finally see the formal training process is paying off. I do miss having a scrum Master- it’s really important for aligning the different types of team members into common goals that they need to work on beyond the daily stories.

    Coding
    Taking an actual jump into being a developer galvanized a lot of new leaning. I really wonder how much I would have learned on my own without the pressure and exposure via work.
    Git and sass are now in my All Time Favorite list. That’s high praise given a year ago I barely knew they existed. Require js and module patterns have finally started to make sense but I’m still having difficulty since different frameworks implement them with slight differences (angular).

    Design
    With Eduardo’s evangelization, I’ve fully transitioned to designing in Sketch. I love the art boards and accurate effects though I do miss Photoshop’s smart objects.

  • Quick link- Cowboy Coding

    Love the idea of quick-and-dirty learning by IDEO Intern:
    Cowboy coding

  • Pottery Fall 2012

    Just got my bowls back from firing. I think they turned out pretty well for being my second class! I love the two-tone yellow-orange. Note to self: Floating red + yellow !

  • New Portfolio site

    New Portfolio site

    Working on a new personal site design. I decided against wordpress since it takes too long for me to go through and update all the templates to my wishes. One of the new things I’m trying is responsive design and CSS3. Try resizing the window…

    New homepage (work in progress)

    Medium-small

  • Scene 7 headache

    I recently had to alter some Scene7 output – and I’m very dismayed by the lack of documentation! I don’t have access to the template builder but had to provide specs- very very hard process. Finally figured it out, but

    rendering mode = sharp

  • Chinese language tips for web design

    Update 2010, Oct 26 – New discoveries, much better font reference confidence

    Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. The process was PAINFUL…

    After several months, this is coming up again as we define our style guide. I found a new article which describes and provides screen-shots for 5 common mandarin fonts. He lists in order,

    1. 宋体, Song Ti, a serif font very common in site font declaration
    2. 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
    3. 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
    4. 隶书, Li Ti, a brush script.
    5. 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy

    Some [updated] Chinese Website tips:

    1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “微软雅黑”, “宋体”, sans-serif;
    2. Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
    3. The standard chinese serifs is: 宋体 (Song ti)
    4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html” charset=”utf-8″>
    5. My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;

    References:

  • Band Album Cover: Pogonomys Championi

    albulmCover

    I finally decided to try my hand at the music album cover design challenge. The rules make it so that you get a random picture, band name and song title and then design a cover for such a selection.  Ivan describes the exact rules in his post.

    Here is my cover art  for Pogonomys Championi, playing their hit single, “homework formerly eaten by the dog”. I liked the idea of pairing the light quirky background with the dark silhouette of a laughing dog. I tried to convey indie rock band with mayan flavor. The band logo is of course their champion mouse.

    References: Pogonomys Chamioni is a tree mouse. The song title is a quote from Doug Larson, “Home computers are being called upon to perform many new functions, including the consumption of homework formerly eaten by the dog”. Original Photograph by ATLITW.

  • Photoshop CS3+ Letterpress Tutorial

    letterpress tutorial finished

    Here is a simple way to get a letterpress effect in Photoshop CS3 and above.

    To summarize, you apply a bevel and emboss layer style to the area around the ‘imprinted’ art. For this tutorial, I will show how to make the effect and then use smart objects to warp it non-destructively. (more…)

  • Put yourself in my shoes…

    This is why I moved....

    Tracy and I moved units after seeing this wonderful view. We wake up and come home to this. No drummers beneath us is also a plus.

  • Triptych x4


    Here’s something I’m proud of: A card with 12 images on it. What does that make this? a dodecatic? whatever. Just a fun(?) exercise. I remember making things like this in school.

  • Tonight’s sketch

    I should be asleep now but I was having too much fun sketching in photoshop… Just a reminder to everyone to have fun every now and then.

  • Before and After?


    I have no idea how this happened. Somhow the png got really messed up…