如何设计网站首页 设计网站首页的7个步骤?( 二 )


如果想找些灵感 , 就常去看看 Worldwide Sketchcrawl ,  Doodlers Anonymous , 还有 Urban Sketchers 。
在研读绘画教程和不断在绘画博客上提交习作之后 , 你就要想想 , 我是不是已经准备好在客户面前进行手绘了?
城市画者是一个国际性的、非盈利性的、致力于手绘观察的网站 。它在Flickr和Facebook上都有很有影响力的社区 。它的官方博客上精选了一群手绘高手的习作来分享给大家 。你可以在它的博客、Flickr还有Facebook社区上找到很多值得参考的绘画技巧 。
要记住 , 简笔画是不能打动人的 。所以有能力进行手绘是非常重要的一点 。也许你需要花些时间来练习 , 并想想如何在客户面前展现你的创意 。
这是个初期的电子手绘草图 。我当时在尝试着将线框数位手绘与Wacom数位板混搭使用 。从这里我发现 , 想要更多地与客户进行互动 , 简笔画是远远不够的 。
在手绘设计项目草图时需要提出的问题
首先我会问自己 , 我了解那些我将会在设计中使用到的东西吗?如果是一个再设计项目 , 我会将已有的元素列成清单 , 并写出顾客们期待看到的新元素 。
如果是一个新的网页 , 我会参考同类型的网站 , 并对这些网站进行竞争分析 , 同时明确用户们的需要 , 把这些要点写成清单 。
接下来 , 我会询问客户是否有特别喜爱的设计风格 。很多时候客户都有自己喜爱的网站 。了解这些对接下来的设计是很有帮助的 。色彩搭配、字体选择、语言风格、视觉元素 , 还有设计趋势 , 这些往往会对市场营销造成影响 。图片分享、情绪展板、还有设计“寻宝” , 这些环节都会帮助你了解客户的喜好 。
手绘一个设计草图
这是我为一个私立学校设计网页是画的草图 。目的就是要在充分展现网页布局的同时 , 又不浪费太多时间在PS的渲染上 。
首先 , 将页面上的关键内容收集起来 。我会使用便利贴或者建立一个文档 。当然 , 我还是会从文字入手 , 不过文字只是将最原始的创意记录下来 , 这样我就清楚网页上将会出现什么内容 。
第二 , 我会从不同的创意中挑出一些来进行手绘 。一点我有了很棒的点子 , 我就可以下定决心完成它 。通常我都会从客户和同行中得到很多反馈 。手绘草图在视觉上是很不正式的 , 这样客户会更放心的选择中意的方案来进行下一步的制作 。
典型的项目流程
这就是由选出的草图制作成的PS成品 。你可以看见手绘草图对图片选择的帮助 。
大部分的项目 , 我都会从简单的方形和一些缩略图开始画起 。这个过程非常简单 , 但是它帮助我为客户、经理和合作伙伴提供很多选择 。
当我们开始讨论缩略图和缩略图背后的想法时 , 我会将选好的缩略图用粗糙的手绘来进行表示 。这些草图可以帮助确定网页中内容的主次和页面的布局 。我也会画下照片和其他素材 , 用来为按键或者其他图标的排版做准备 。
在初期我会尽量弄清楚用户想要的是什么 , 还有如何安排好网页上的内容 。这个阶段是需要合作的 。我会将我的草图展示给客户、经理、团队伙伴们 。如果需要 , 我们甚至会让一些用户来进行测试 。接下来我再对草图进行变更和完善 。
一旦草图大致定下来之后 , 我会画一个正式的线框图 。像传统的线框图一样 , 手绘的线框图会有具体的内容 , 文字、图标以及图片 。这样我的设计风格以及一些创意就会在这个草图中得到测试和印证 。我也会使用手绘线框来测试用户界面的元素 , 以确保它们能够被使用 。我们会测试所有的方案 , 有时候也会有产生一些介于两者之间的设计方案 。
有些时候 , 当我需要对客户进行正式的展示时 , 我会使用墨水而不是石墨来进行手绘 。墨水会增加手绘的正式感 , 如果要上色的话 , 我也不用担心因为石墨的不稳定而模糊了网页上的界面元素 。
最后 , 你将会建立自己的设计流程 。手绘最棒的一点就是它使设计变得自由 。你可以随时随地记录自己的创意 。
实用的手绘“利器”
找到合适的绘图工具很重要 。我很喜欢用Uni-Ball Vision. 一只便携的小毛笔可以方便填充颜色