• Jonathan ShariatJonathan Shariat, over 7 years ago


    11 points
  • jj moijj moi, over 7 years ago (edited over 7 years ago )

    Concept: Brief > Research > Brainstorm > Rough sketch > Evaluate > Refine

    Digitize: Setup the grid at intended use size > Draw possible shapes (circle, square, rectangle, etc) > Draw solid icons > Draw outlined icons > Adjust for next size if needed

    Export: If I stick to the grid, nothing I should be worried about

    Test: Test on all places intended to use the icons

    Refine > Repeat

    2 points
  • Ian ClarkeIan Clarke, over 7 years ago
    1. Research existing concepts
    2. Pen and paper
    3. More pen and paper
    4. Rough designs in illustrator
    5. Print out, mark up any changes
    6. Refine in illustrator
    7. Present to client
    8. Save out SVGs

    Never had a job that had enough icons to necessitate building an icon font. Seems like overkill most of the time, but I do websites not apps.

    1 point
  • Jim NielsenJim Nielsen, over 7 years ago

    I use sites like iconmonstr & iconfinder to grasp what kind of metaphors to use. I then collect all the icons I want (in SVG format) and put them in a folder (I either design the icons myself or use/tweak ones from the sites listed above or the hundreds of free icon packs out there).

    At that point, I use the command line tool Fontcustom to generate an icon font. You basically just put all the SVGs in a folder and point fontcustom at that folder. It then generates all the stuff you need (which you can configure). Then, anytime you tweak, add, or remove existing icons you just punch fontcustom compile in the command line and it regenerates the icon fonts, sass partials, etc.

    1 point
  • Brian FryerBrian Fryer, over 7 years ago (edited over 7 years ago )

    I commented on this exact thing in a previous thread...

    I've been using a combination of gulp plugins to generate icon fonts from SVGs. My current workflow:

    I drag and drop an SVG into a folder that gulp is listening to. Gulp starts processing the icon , and runs it through a lodash template. The final products are an SCSS file and relevant font files (e.g. EOT, SVG, TTF, WOFF).

    1 point
    • Mattan IngramMattan Ingram, over 7 years ago

      I do this exact thing, however I am beginning to think of moving away from SVG -> Icon Font and just going straight inline-SVG.

      1 point
      • Brian FryerBrian Fryer, over 7 years ago

        This is definitely ideal. Unfortunately, the app I'm working on needs to support IE8... which doesn't play nice with inline SVGs.

        We've also discovered that IE8 doesn't play nicely with pseudo-elements either. Namely, once a pseudo-element is drawn, it will never be repainted. Thus, hover effects aren't applied to icons from an icon font.

        Our workaround is to use an angular directive that creates normal HTML elements from icons in an icon font. In the meantime, I just use the normal icon font when building prototypes.

        0 points
        • Mattan IngramMattan Ingram, over 7 years ago

          Cool, that makes sense. Thankfully I don't have to support IE8 or really 9, although I do make sure everything works in 9.

          1 point
  • Shaun TollertonShaun Tollerton, over 7 years ago (edited over 7 years ago )

    When creating an icon family I would typically follow these steps:

    1. Sketch and explore motifs (floppy disk? down arrow? etc.)
    2. Define grid and rules (color coding, square vs round etc.)
    3. Refine sketches
    4. Execute (Photoshop/Illustrator/Sketch)
    5. Iterate

    Google have some sweet tips here too.

    1 point
  • Tyler Fowler, over 7 years ago

    Whenever I need an icon I typically conceptualize the 'style' or 'feel' I want from the surrounding context (for this reason I often design icons last and use placeholders during the design phase) and then get a feel for what types of shapes or objects I want to use. (i.e. Modern? Super geometric? Fancy? Desk objects?)

    Then I'll maybe do a few sketches but I can't draw worth a damn so I just get down the general idea of the shape forms. Then I'll go into Illustrator (or right there in Sketch if it's simple enough) and start making some basic geometric shapes to block out the concept. Then I usually start chipping away, creating curves, shapes, and lines until I get what I want. Next I'll go back to the context and start trying different colors (if I haven't already decided).

    Beyond that depends very highly on the situation. Sometimes icon fonts, but if there are only one or two on any given page I'll just go straight to a png and load it in via CSS.

    0 points
  • Brittany Smart, over 7 years ago

    Very useful!

    0 points
  • , over 7 years ago

    By icon design process, I mean steps to create graphically those icons (with a grid setup on Illustrator, etc…).

    As you can have on this article : https://medium.com/@dmiiiitri/fixing-icons-for-medium-8939ae05db85

    0 points
  • Daniel GoldenDaniel Golden, over 7 years ago

    Glyphs, iOS icons, Mac Icons, etc? What kind of icons?

    0 points