The eagle eyed amongst you might have noticed a revamp of the design specific bookmarking site设计BuMP.com.约翰·坎贝尔最近联系我,问我是否有兴趣帮助重新设计。Being a site I'd been subscribed to since its launch I jumped at the opportunity.以下是我对项目设计过程的概述。

旧设计包

旧设计包

新DesignBump

新DesignBump

DesignBump是一个纯粹针对设计和网络社区的社会书签网站。It's an extremely handy place to find both great new design content and to submit your own articles for votes.With DesignBump being one of my favourite sites,it was a pleasure to help out with the rebranding.

DesignBump徽标草图

DesignBump徽标创意

退房后my work,John chose me specifically to work on his designs and gave me complete creative freedom (He's a nice guy like that!).这让我可以真正地去镇上的素描过程,以制定一个彻底的设计,就像它是一个我自己的网站。Since its launch the site has always used an arrow as part of its image,这很符合把文章推到网站首页的性质。With this in mind I continued to draw out the logo concepts and looked for a unique way to display the arrows as some kind of graphical mark.

DesignBump徽标概念

我对商标的最后一个概念是三个箭头沿着一个平面流动,每一个都会改变方向并指向上,其中一些达到了比其他更高的位置。这个比喻转化为网站上的文章提交过程:一篇文章被提交,然后在下一节中缓慢前进,直到获得足够的选票。然后它起飞并被提升到首页,导致一些文章获得了比其他文章更高的选票。

新的DesignBump徽标

然后选择了独特的配色方案,and subtle effects added to the graphic to really spice it up and add depth.这个增加的尺寸在从屏幕上提升徽标方面做得很好。

DesignBump图标设计

The project then moved onto the development of various icons and voting buttons.一系列的图形被开发出来,以获得对形状和尺寸的感觉,以及如何将这些颜色结合起来,将这些图标与整个主题联系起来。

DesignBump图标设计

我把设计缩小到带有垂直箭头的浅灰色按钮,然后以各种大小重新创建,包括从16px图标到完整投票按钮的所有内容。

DesignBump图标设计

最后的投票按钮是一个我很满意的设计,it captures the branding of DesignBump with the coloured arrows and provides recognition when placed on various websites.小的1px线和微妙的触摸也有助于增加图形的深度。总体的想法是让它看起来很酷,放在你博客的底部。

DesignBump网站设计和布局

网站设计以白色和微妙的灰色阴影为基本主题,分布在严格遵循底层网格的布局上。一片红色,不同地方的设计增加了绿色和橙色,以引起对特定区域的注意。

DesignBump icons in place on the website design

The voting buttons really came to life when listed alongside their stories on the homepage.A range of mini icons were also developed to spice up the various user tools.

网站设计中引入了设计凹凸颜色。

侧边栏中有一个很好的例子,说明三种颜色是如何应用到网站中的,where the three main titles of the various sections alternate between red,绿色和橙色。

DesignBump用户配置文件的设计

Once the homepage design was complete,对布局进行了调整以适应新的用户配置文件。页面根据网格被进一步拆分,creating a new left sidebar to house the user info and profile navigation tabs.

设计凹凸形式和按钮样式

为了完成设计,a consistent style for the form inputs and buttons was developed,这应该使整个网站的风格更容易延续,将所有元素结合在一起。

你的网站设计绝对完美。我喜欢它。我迫不及待地想用这种设计将DB推向下一个层次。It really looks great.

与主平面设计全部完成以后,是时候给约翰送一堆屏蔽门了。He then had the fun job of coding up the new image and plumb it all into the DesignBump engine.

新DesignBump

Overall a hugely enjoyable project,很高兴和约翰一起工作。我很期待看到DesignBump作为设计新闻的主要来源。记住要做一个侧面图,您也可以添加voting buttons到你自己的网站!

Share on Pinterest
没有图像。
79评论 submitted 加上你的!
Subscribe receive beplay全方位手机移动娱乐平台Spoon Graphics newsletters

订阅我的时事通讯,成为第一个听到新文章的人

79评论

  1. I really love the new design of designbump is really awesome,当我第一次看到它的时候,我几乎不忍心,你做到了,但是,当我在DesignBump博客上看到你的采访时,我印象深刻,因为完全是你的风格。

    0)
  2. 我最近才发现你负责重新设计,我必须说你做得非常出色。新的设计真的使我最喜欢的书签服务撞上了设计。It also inspired me to work on a new "submit and promote article"area on my blog.
    Congratulations Chris and thanks for the insight.仅供参考,我撞了这篇文章。

    0)
  3. 我喜欢这类文章,你真的可以看到设计师的头脑里有什么,从整个过程中学习:)

    有一件事是这样想的……it extremely hard to tell if you've bumped a link or not :[

    0)
  4. 哇!这里的设计真的很棒!这个项目花了多长时间?
    Like somebody said up here,它有你的风格。
    感谢您分享此过程!

    0)
  5. 干得好,克里斯,a huge improvement indeed!I like how the identity works across the whole site,按钮和所有。

    我能从整个身份中挑出的唯一挑剔之处就是主页上的墙纸,the arrows go down?Doesn't this go against the grain of the whole bump idea?不管怎样,这只是我注意到的一个小问题——这是一个伟大的重新设计,在我看来你的一些最好的作品。

    0)
  6. 干得好,克里斯,你应该对此非常满意,伟大的色彩,布局等。真正传达你的设计风格。如果每个客户都能给你DB所做的自由就好了。

    I'm always interested in seeing your latest ideas.

    0)
  7. 你好漂亮的工作,Chris
    你总是创造和展示令人惊叹的技术,你的设计风格也很出色,总是给我一个灵感,所以Thax为你带来了与他人分享的经验。
    当做
    坎亚

    0)
  8. Amazing DesignBump redesign.几天前我很欣赏它,不知道是你在背后,克里斯。很棒的工作,the colour scheme is excellent,我必须说10/10,一杯免费啤酒;)

    0)
  9. Great redesign Chris.我以前就知道设计凸点,but always used Digg.既然我看到你的天才在设计背后,我现在也转向数据库寻求灵感。

    Thanks,keep up the good work.

    0)
  10. 我刚开了一个网页设计证书,老师打电话给数据库作为我们使用的资源。When it popped on the projector I thought,“这让我想起了很多克里斯·斯普纳。”:)比我想象的还要多!好工作。

    0)

评论现已关闭