Feed Wrangler & Pod Wrangler App Icons

Wrangler

15 Responses

  1. Louie Mantia Louie Mantia

    @Brad Ellis created the first version of Feed Wrangler's icon for David Smith, and we recently updated it for iOS 7 with a brighter blue and less effects.

    Instead of using dark shadows to shade around the lasso, we used opacity to show the primary color through the symbol.

    Pod Wrangler is a new app, a companion if you will, to Feed Wrangler for your Podcasts!

    likes

    7 months ago

  2. Waly Kerkeboom Waly Kerkeboom

    Did you guys adhere to the grid for this one or is it freeform?

    7 months ago

  3. Louie Mantia Louie Mantia

    @Waly Kerkeboom We resized the lasso up from the original to be larger to fit within the largest circle in the grid.

    likes

    7 months ago

  4. Derek Krencik Derek Krencik

    Did you experiment at all with different icon designs for Pod Wrangler other than a difference in color gradient?

    likes

    7 months ago

  5. Andrew Burwell Andrew Burwell

    I think you guys are cornering the market on podcast icons.

    likes

    7 months ago

  6. Louie Mantia Louie Mantia

    @Derek Krencik It was my suggestion to keep the same symbol but to change the color only. We had tried in the Feed Wrangler project to do other things, add waves, and thought for Pod Wrangler to add a little guy or radio waves... but it just ultimately cluttered the otherwise simple mark. Color can be a strong indicator, and purple is very underused on iOS, so we thought we should take advantage of that! :)

    likes

    7 months ago

  7. Mitch Bartlett Mitch Bartlett

    I'm trying to learn to love the grid, and I do think sometimes it works well. Your Overcast icon was *really* nice. This one however just doesn't seem to work in my eyes. I feel that if there was some extra space either side of the lasso, the icon would have a bit more balance.

    The thing is, and this is why I'm trying to learn and understand the grid, is that I only feel this way as a result of that 'gut feeling'. My gut feeling is that it looks unbalanced, but at the same I can't think of any real reason why the grid shouldn't be used.

    What are your thoughts on this new grid system? Why do we have this? I feel like there's no actual reason for it, but also no real reason (other than my gut feeling) to go against it. Why is this now a guideline, if not purely because the iOS design team made it happen? Would love to hear anyone's thoughts on the possible benefits of the grid.

    likes

    7 months ago

  8. Louie Mantia Louie Mantia

    @Mitch Bartlett As I said in the other thread for the Overcast icon: if this *is* the new world order and Apple's icons look as they do... I'd rather fit in than look left out.

    It really makes more sense to adjust symbols and shapes within icons to be larger to match, otherwise yours looks small, not "correct."

    So as much as I initially thought it wasn't great, I've grown to love it, and there is literally no advantage to avoiding or dismissing it.

    And also as I previously mentioned, it is a "guideline" and not a rule. You don't need to make all your shapes and lines hit their guidelines... but if it's close and convenient, it seems to be a good idea. Consider this icon. Unlike Overcast, which builds itself around the grid to look synonymous in style and shape with the App Store, Safari, or iTunes icons, Feed/Pod Wrangler merely adhere to a subjective "weight" that is determined only by looking at nearby icons and understanding the weight of this object in comparison to others around it.

    Remember, our job on this platform (and on any platform) is to fit in, not stand out. So many app icons and interfaces were built with the goal of standing out from the crowd, but I'll tell you what... now it seems like the "old" style of icons are sticking out, but not in a good way. The old icons stick out like a sore thumb.

    likes

    7 months ago

  9. Ollin Ollin

    @Louie Mantia "Color can be a strong indicator" is something I take a bit of issue with. Color is a strong indicator, but it's a very, very unreliable one. Value and shape are much more reliable for easy differentiation.

    For example, let's say your user is one of 1 in 10 men who's color-blind. They buy both of the apps, and suddenly their homescreen looks like this.

    It's a difficult problem to solve, since these apps are related and the metaphor doesn't offer an easy item to switch [the "wrangler" part is there in both apps].

    Maybe have both icons be lassoes in the same rope style/scale [with the different background colors], but have one lasso form a roundrect shape and the other an oval? That way they're clearly similar and related, but you aren't relying exclusively on color for quick recognition. It wouldn't really help the metaphor, but it wouldn't hurt it either, and the benefits to legibility would be pretty strong.

    7 months ago

  10. Louie Mantia Louie Mantia

    @Ollin I appreciate your concern, and I often take color deficiencies into consideration when I draw things, but I'd rather make a choice that's right for 96% of the total population than 4%.

    Let me put it this way: most people are right-handed. However, about 12% of the total population is left-handed. We do nothing, and have generally no consideration for those who are left-handed in regards to UI. Which hand is the phone being held? Which side should buttons be on? No consideration.

    It maybe sounds a tiny bit harsh, but in a realistic sense, unless it's a crucial distinction for actual emergency reasons, I don't see why anyone should prioritize color deficiencies over making things look great for the vast majority of the population.

    Edit:
    Don't get me wrong, color deficiency isn't like left-handedness in that it's actually a visual disability. But I would only seriously consider it if it was a crucial distinction like between a selected and non selected state of a button that sits beside the other. But as you noted, the situation would have to be that a color-blind individual installed both apps and place them right beside each other. I suppose I consider that to be pretty low to make the choice of a different color for all users (who aren't affected by color-blindness).

    likes

    7 months ago

  11. Ollin Ollin

    @Louie Mantia True. I mean, even if the user is color-blind, they can still just read the app name if they need to clarify. It's not a crippling flaw by any measure, and I realize the necessity of designing for the majority.

    There are other situations where color contrast shows its weakness–in low-light situations, for example [if the icon was, I don't know, on a banner or something]. Again, though, the odds of you having to use this specific icon in those situations and the lack of contrast being an issue in legibility are quite small, so the downsides of relying on color contrast in this case are pretty negligible. I realize that.

    Still, as a general rule, I try to start with value/shape first in any design [icon, web, print] and treat color as the last, clarifying stage in the long process of making things easy to parse and understand. So I figured I'd speak up for that principle, even if it can be ignored in this instance without much consequence.

    likes

    7 months ago

  12. Louie Mantia Louie Mantia

    @Ollin As long as we're sharing each other's "general rules," mine is that shape, color, and detail are all equals. Prioritizing any over the others would be a mistake.

    7 months ago

  13. Newar Newar

    Oh how I enjoy the dribbbles where my eyes spend more time analyzing the text under the image than they do on the image itself.

    Good insights all around.

    likes

    7 months ago

  14. Kevin Clark Kevin Clark

    There's just something about this icon. Love it.

    7 months ago

  15. Rick Waalders Rick Waalders

    "Search for episode" aaaaaah thanks for that feature. I've been waiting for it to appear in Instacast / Pocket Casts for a while.

    Now I can finally find specific Nerdist interviews :)

    7 months ago

keyboard shortcuts: previous shot next shot L or F like