请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:368| 主题:18126
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] [英] Swarm 的图标设计

[复制链接]
喜欢痛到极致 发表于 2016-11-29 18:30:07
282 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
First Some Background

    Since 2009, Foursquare has had two core use cases: sharing your location with friends through check-ins and searching for the best venues nearby.
    With all of its features, questions about Foursquare usually required long-winded responses:
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
             Usually, people who were interested in the personalized search functionality didn’t want to use Foursquare to check-in or share their location.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
             We talked to a lot of Foursquare users, and always heard that they either opened the app to search, or to check-in, and rarely both at the same time. That’s why we decided to make a bold move to improve the experience of both use cases.
    After a series of proposed solutions, we decided it was most natural to separate our two use cases into their own standalone apps. One devoted to sharing your location and the other for personalized local search. This meant moving the check-in functionality out of Foursquare to a second app, Swarm, leaving room in the Foursquare app to focus 100% on local search and discovery.
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final wordmark and logomark lock up            Meet Swarm

    Swarm is the fastest and easiest way to keep up and meet up with friends. As an evolution of the original Foursquare check-in experience, Swarm provides an at-a-glance view of all your friends and what they’re up to, making it easier to keep up online and meet up in real life.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               UI design by Courtney Christopher and Nicole Formica            The Branding Process

     We worked closely with our friends at Red Antler throughout the branding process for both Swarm and Foursquare and I was happy to call their headquarters home for a little over a month while working together.
    During the process I had the unique opportunity to work closely with the Swarm team on visual design within the app while simultaneously working with Red Antler on the app’s branding.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Left to Right: Zack Davenport, David Ricart, Mike McVicar                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Left: Early name ideas for the app, Right: My check list at the beginning of the branding process            Part I: Drawing Inspiration

    We wanted Swarm to feel fast, playful, and evoke serendipity so we needed an identity that matched this personality. We began the process by digitally collecting references and imagery using Pinterest then physically printing, cutting, and arranging the images into a mood board.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Visual inspiration collected on a private Pinterest board                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Left to Right: Zack Davenport, Jon Steinback, Sam Brown, Courtney Christopher, Sean Salmon at Red Antler HQ.                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final moodboard for Swarm            Part II: Ideating and Iterating

    Once we settled on a mood board that visually represented the personality we wanted to embody, we began to sketch out ideas for a logomark.
    Our previous Foursquare identity didn’t have an official logomark (though there were many unofficial ones…) so this was something we were very interested in incorporating to both the new Foursquare and Swarm brands.
    Logomark Development
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               160 bees. A collaborated effort between Red Antler’s Mike McVicar and myself.                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               A selection of bees designed by Red Antler’s Mike McVicar and Foursquare’s Zack Davenport                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
             Wordmark Development
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               A selection of wordmarks by Mike McVicar, David Ricart, and Zack Davenport                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Presenting to Dennis Crowley and team at Foursquare.                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
             Part III: Finalizing the System

               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final Wordmark and Logomark Lockup                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Incorporating the flight path for web ads and banner lockups                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final app icon             Swarm’s Visual Design

    While I worked with Red Antler on branding, Courtney Christopher led the UI design efforts in the app. Eventually we collaborated as we began implementing more visual elements within Swarm. I had a blast developing the overall styling of Swarm’s stickers, iconography, and other visual design.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Earlier versions of Swarm’s check-in button. We wanted it to feel light to represent the quickness of the action.                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final iconography set                       

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Final Swarm iconography and it’s positioning in the app. UI design by Courtney Christopher and Nicole Formica.            Stickers

    When we built Foursquare back in 2009, game mechanics were added to help users learn how to use Foursquare and help make real-world experiences more fun. Users were awarded badges and points for exploring new places and mayorships for customer loyalty at their favorite spots.
    As our user base grew, the gaming elements began falling apart. Mayors were great when Foursquare was small but as our community grew, earning a mayor crown became nearly impossible. Badges were fun to collect but many of our longterm users had stopped unlocking badges long ago, leaving no more added incentive to check in.
    So, with Swarm we decided to give our gamification elements a much needed refresh. Now, people can unlock stickers to apply to their check-ins to quickly express how they feel or what they’re up to. Rather than competing with the rest of the world, Swarm mayorships are earned by beating out your friends in a particular venue category. If you’ve checked into the gym more than any of your friends, you’re awarded a golden bicep sticker to use to humblebrag any time you’d like.
               

[英] Swarm 的图标设计

[英] Swarm 的图标设计
                        

[英] Swarm 的图标设计

[英] Swarm 的图标设计
               Gotta catch’em all                  Being a part of Swarm’s branding and visual development has been an unbelievable opportunity and learning experience. Not only did I witness the incredible amount of work it takes to make an app from scratch, I also got a behind-the-scenes look at Red Antler’s branding process.
   For Swarm, the all new visual identity is just the beginning. Follow along as we continue to iterate our game mechanics and other features to make keeping up and meeting up with friends even easier.
    Download the app here .
        I work with a ton of insanely talented and passionate people on a regular basis. If you’d like to work with us on fun projects with high impact, check out foursquare.com/jobs .
    Have additional questions about the process? Get in touch: [email protected]



上一篇:洞察力强的文案,要知道的6种用户心理
下一篇:价值10万的LOGO具备哪些特性?
jwayim 发表于 2016-11-29 20:45:09
jwayim要成为整个酷辣虫最为脸熟之人!
回复 支持 反对

使用道具 举报

2251579620 发表于 2016-12-4 05:50:06
你拥有再大再多的水桶,也不如有一个水龙头。说明:”渠道很重要!
回复 支持 反对

使用道具 举报

玉米粒 发表于 2016-12-4 07:18:20
学习下
回复 支持 反对

使用道具 举报

火星文 发表于 2016-12-15 17:12:17
鄙视楼下的顶帖没我快,哈哈
回复 支持 反对

使用道具 举报

qksd 发表于 2016-12-23 09:52:03
介是神马?!!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表