Blog

网页设计可以先从纸上开始

网页设计可以先从纸上开始 // April 19th, 2009

做网页设计好几年了,一直都是直接在电脑上画,想到哪儿画到哪儿,最后的效果和自己原来的想法可能相差甚远,设计方向不容易把握不说,设计花的时间也长,还容易因为没有事先的考虑而在一些功能模块的放置上陷入困境。最近看到了几个国外著名设计站的设计草稿,我豁然开朗,原来网页设计时可以先从纸上开始。其实很多著名网站的设计工作也都是从在纸上画草图开始的。

画草图有什么好处?文章开头我已经说了几点直接在电脑上设计的弊端,而在纸上画草图能很好的解决这些问题。其实当你在电脑前做设计时,会不自觉的考虑很多与设计本身无关的因素,而与设计本身联系紧密的因素却容易被忽略。笔和纸能让你把心思都放在设计上,整体把握设计思路和方向。等完成草图后再打开电脑,用你习惯的网页设计软件,如photoshop或fireworks等,按照你的设计草图,最终制作出网站原型。

来看一下著名图片分享网站 Flickr 的设计草图:

再看一下webdesignerwall.com的设计过程:

其实现在的设计已经不是我最初的想法了,在完成现在这个版本前我已经舍弃了两个版本。现在看看我最初的想法:

1.电脑桌:刚开始我的想法是做一个电脑桌,上面摆放着电脑、杂志、书架、植物,贴着便签。但是这个想法和FreelanceSwitch 原来的设计很像,所以我放弃了。

2.墙:然后我有了设计一面墙的想法,墙上贴着许多设计草稿,有一个放着设计书籍和杂志的书架,一个flash的时钟(放这个只是为了看起来比较酷),边栏里有一个AJAX的日历,还贴着一些便贴。

photoshop制作初稿:这是我第一次将“墙”的想法用photoshop制作出来,但我根本不喜欢它,不知怎么的,它没有完美的体现出我草稿上的设计想法,并且,它还和这个站很相似:www.teamviget.com 。所以我想试试另一个设计方向……

另一个设计方向:接着,我发现了一些我以前用AI画的花纹草图,我想这应该可以用得上,于是我加到这次的初稿里。嗯,现在的样子我喜欢多了。

最终设计:我使用了这个花纹背景,选择了一种水彩画的设计风格,因为这样网站看起来更有艺术气质。Tag云的设计费了我不少功夫,我想设计一个独一无二的样式。我试了下拉式的,但我不喜欢。最后我决定做个简单式的Tag云。看看完成的效果:

以上所有内容引用自 玉宇域

  • RSS
  • Print this article!
  • Digg
  • Technorati
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Twitter
  • 开心网
  • 校内网
  • 豆瓣
  • 豆瓣九点
  • 饭否

Comments

expand-all

There are 13 comments (+Add)

  • jeccy Reply to this comment

    貌似学到了点东西,其实我没有学过设计,只是凭自己看到过的和想象出来的样子在思考

  • Felix Reply to this comment

    貌似我也画过的,不过水平有限,画得出来,设计不出来…

  • seri Reply to this comment

    其实只在脑袋里想,会跑题 – - 于是画在纸上是最直接的,修改也便捷,
    很好的设计都是从纸上开始,呵呵
    ps:-v- 偶滴blog就素这样诞生滴

  • kevinsnow Reply to this comment

    我對設計真是一竅不通 美術水平停留在小學一年級 更別提在網上劃了= =
    你的主題設計的真是好 看著很舒服很舒服 有種一直想看下去的感覺~

  • qlj Reply to this comment

    原来设计师这么难啊
    不过你的风格确实很棒

  • Yang Reply to this comment

    @kevinsnow: 哈哈 既然这样为了你我也一定会一直写下去的~

  • nick Reply to this comment

    其实我一直都是在纸上画的…就是画得比较邪恶而已~

  • 老时 Reply to this comment

    你说的HOTFRIENDS插件我都忘记了。你把那个地址发我邮箱,我看看。

  • huaimao Reply to this comment

    偶来测试hot-friend插件!

  • huaimao Reply to this comment

    偶来测试hot-friend插件!偶再来

  • 邹小洋 Reply to this comment

    成功了,哈哈,谢谢老猫同学。

  • deru Reply to this comment

    先在纸上打好草稿是很有必要的,在纸上可以更直接更快的表现出自己的想法,网页的布局等,那里有不足的可以几时修改,等完善了再用电脑完成,制作起来就快很多了。

  • 邹小洋 Reply to this comment

    换句话也就是自由度更大,电脑上毕竟有的想法不能即时实现,并且修改起来也更费时,手上功夫对设计师来说也是很重要的。

添加回复

back to top

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

CommentLuv Enabled