从6月开始,我就在幕后秘密地重新设计勺子图形,beplay全方位手机移动娱乐平台但经过4个月的努力和一点点的帮助朋友我很自豪地介绍了我的网站的新外观。以前的重新设计和更新是相当保守的演变,但我认为,这一新设计在保留了Spoon图形品牌自2007年以来的原创性的同时,向现代网页设计迈进了一大步。beplay全方位手机移动娱乐平台让我带你去参观一下,看看有什么新东西!

反应迅速…终于!

响应式布局

When I last redesigned this site in 2012 I记录我的想法关于响应式设计。我决定,由于我所发布内容的性质(包含大量图片的长文章),由于用户必须疯狂地移动设备才能到达页面底部,因此无法进行压缩和缩放会导致更多的可用性问题。但是现在谷歌惩罚那些不适合移动的网站,so I was left with little choice but to go forth and responsify.我雇了我的设计师朋友和战友马特·克斯利为了帮助从我的PSD设计概念中构建响应框架,在此基础上,我可以添加通用样式来完成设计。现在您将看到不同的手机布局,tablet and desktop views depending on the viewport size.

Key design features

Some of the page elements have been influenced by earlier designs to maintain some consistency,but there's a bunch of key features of this layout that make version 7 quite a radical redesign:

英雄人物形象

英雄形象

The biggest change for version 7 is the introduction of the large hero images for each post,which was an idea I had from the start so the whole redesign was actually based around this one feature.它包含一个大的后缩略图图像,一个超大的标题和后元信息,但最酷的部分是它从图像本身中为背景和排版元素选择颜色,以生成独特的配色方案来补充每一篇文章。

出血的背景

bakcground出血

我对印刷设计和数字设计同样感兴趣,所以我的一个想法是把出血融入到我的网站设计中,把特定的背景延伸到页面的边缘。这不仅填补了大分辨率显示器上的一些空白,它还加强了每个柱子的自定义颜色方案。浏览页面并查看各个部分的开始和结束位置很容易。

改造后的社会份额

股票总数

我所有的教程和设计资源都是免费的,beplay足球我的博客依靠稳定的流量来产生收入。Having posts shared on Twitter,脸谱网,StumbleUpon,Pinterest,etc are the best ways my posts get seen by others,so I made use of a premium social plugin to create a more eye catching and consistent series of social buttons.This plugin also adds up the total number of shares,which I got Matt to customise with a cool counting animation to visualise the success of each post.还提供定制的spoon.graphics短链接,so it's easier than ever to recommend my content with your friends!

著名的注册表单

订阅表单

我的电子邮件时事通讯是保持最新的所有内容从勺子图形,beplay全方位手机移动娱乐平台over 70,000 people are now subscribed to receive notifications of new posts.My自由束设计资源的投入是说服beplay足球人们加入的巨大动力,但现在它大到接近600兆,旧设计的旧产品盒模型做得不公平。这个包裹现在已经升级成一个巨大的木箱,当您注册时,它实际上会发送到您的电子邮件收件箱!Hopefully this will recruit more first time readers into the beplay全方位手机移动娱乐平台Spoon Graphics community.

一份匹配的新闻稿!

电子邮件通讯

我的时事通讯也被修改以补充这一新设计。它还具有一个大标题图像和所有相同的排版风格作为主要网站,以提供一致的品牌形象。

下一个帖子弹出

下一个弹出窗口

拥有8年的内容价值,有很多东西可以让新来的游客去看看。要提示用户浏览我的其他内容,当用户阅读完当前文章后,下一个帖子横幅将从页面底部弹出。These banners are also colour coordinated to the content they're promoting,因此,它们很明显地脱颖而出,并与页面的其他部分区分开来。

Is anything broken?

在主要浏览器中进行了测试,以确保一切正常,but if you see anything that doesn't look quite right it would be a great if you could let me know.截图也非常方便!请在评论中告诉我你对这个新设计的看法。你喜欢吗?Hate it?Would you have done anything differently?

在Pinterest上共享
50评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

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

50评论

  1. 非常好,一切都是如此!我唯一的预约(而且它可能会在我身上增长——我不确定)。is the next post popup is a bit on the large size.如果是我,我可以把它限制在右下角。但是嘿,嗬,剩下的就是王牌!

  2. 嘿,Chris!很高兴看到网站响应迅速!第一次看到我手机上的更新,一切都很好!

    下一个帖子弹出是唯一让我觉得不合适的东西。我的直觉是尽快关闭它,以便重新利用那个空间。也许最好将此功能应用到网站的实际布局中?I guess continue to test it out and see how it does.

    Love everything else!很高兴看到博客不断发展壮大。:)

  3. 令人惊叹的!!喜欢新造型,耶终于完全反应过来了!整个网站现在相当圆滑,我碰巧下一个帖子弹出涵盖了整个底部酒吧区。

  4. Nice redesign!我必须回应其他人对“下一个新闻”的看法。在底部。乍一看,它看起来和感觉就像一个广告——我想马上关闭它,甚至不看内容。另一条评论建议把它改小并贴在右下角——我认为这是个好主意。

  5. 嘿,克里斯!我真的很喜欢你添加到网站上的调整(比如新照片)。

    I agree with the others about the next post pop-up at the bottom.我想如果屏幕空间不是那么突兀的话,就不会是“在你的脸上”(尤其是在手机上)。另一个建议可能是添加一个“滚动到顶部”按钮?您的一些教程相当冗长,如果能够将其放大到顶部并继续探索,那将是非常好的。除此之外,它看起来很棒:)

  6. 在许多层面上都非常令人愉快;祝贺你干得好。首先,在我的智能手机上享受这一新的外观,必须说这是一次愉快的体验,除了这里的其他人提到的下一个开机自检指示灯,在当前的迭代过程中,这似乎具有干扰性。毫无疑问,你会想出一个令人满意的选择。与此同时,好极了!

  7. 克里斯,做得很好。很高兴看到响应式升级。I'd love to hear how the new subscribe forms and the "next up"slide-in perform for you.喜欢你在不断升级的同时保持你的性格。全出血图像是一个很好的触摸。干杯。

  8. 我喜欢你的新包装盒,你拿着它可以显示它有多重。我只是想把鼠标移到你照片的底部,一个画好的胡子和眼镜突然出现在肖像上面。

  9. 喜欢这一切!Especially on mobile,它的一切顺利和流动,并没有落后于一些网站的设备。我唯一的问题是弹出式工具栏,once my keyboard is up,我只能看到这一页的四分之一。但这个问题只是在添加评论时的一个问题。:)

  10. 恭喜你的新设计。I like it a lot.你想模仿马特吗?继续做好你的工作。我喜欢整个网站。最美的布诺…

    来自波多黎各的阳光

  11. 嗨,克里斯,
    我已经关注你的博客好几年了,我是你博客内容的忠实粉丝!我真的很喜欢你网站的重新设计,尤其是英雄形象(和配套的时事通讯)color coordinated banners and the backgrounds that bleed.我是一个巨大的设计极客,我可以看到所有的努力投入到这个惊人的设计。:)

  12. I was just about to ask you why your blog is not responsive till now and what I got this morning stopped me to compose a mail.Very nice change.

  13. 爱它!So much clearer!阅读体验棒极了!The typography looks more lively now :) Droid & Playfair.我也喜欢你保持和以前版本相似的外观。它是可识别的!向你和马特致敬!:)

  14. 重新设计太棒了!Only thing that sticks out for me is the alignment on the next post pop up,at the right side of the image when it's over the comments it doesn't quite align with the right side of the comment section.把图片链接成我的网站,这样它就不会被过滤掉。它在Dropbox上托管。

  15. Great new look,To be honest,您在我的Outlook中有自己的文件夹,your an inspiration and certainly generous with your freebies – and you keep me in touch with the good old UK as im now living in Thailand,KrkkokkAP!!!!(谢谢你)

  16. Super job!The new look is great !

    几年前,当我开始我在矢量世界的旅程时,我开始跟随你,我想说:非常感谢你提供的所有教程,你提供的材料和宝贵的建议对像我这样的业余爱好者真的很有帮助。
    继续做好!

  17. 那篇文章真棒。读完这篇完整的文章后,我有一个这个网站的书签,一次又一次地访问这个网站。感谢管理员制作此网站,感谢大家发表文章。

评论现已关闭