网页设计第一步:绘制网站草图

网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明,是对用户需求沟通的图形表现,以便更准确无误地与用户确认需求,也对网站风格设计过程起指导作用。

网页设计第一步:绘制网站草图

开始制作网页的时候,不少初学者往往不知从何开始,那些设计大师往往是从设计草图开始的……

画啊画啊~就画出自己想要的样子了,然后再从Photoshop或其他软件上开始设计。

125网页设计今天分享设计师画的草图,也可以称作”原型图”,大家可以看看设计师们是怎样画的。

绘制网站草图的意义:

制作网站草图可以在设计时让团队每个人都参与近来,贡献自己的想法,让团队每个成员感觉到产品是由自己亲自参与设计的,加强团队的凝聚力。

而且通过草图,让开发者也不再是闭门造车,他将可以直接面对所有人对产品的推敲,从而发现问题。通过头脑风暴,也可以让产品在开发过程中遇到的问题得到迅速的解决。

下面是一份标准的手机网站设计步骤蓝图

在设计中,对于不同的步骤要用不同的思考方式,有的时候用独立决策,有的地方要用发散思维和头脑风暴。在设计中,团队难免有意见分歧的时候,要接受这种分歧,因为这些意见的分歧往往能碰撞出很多设计的闪光点。

1.设立目标和标准

A.建立任务的优先级。这个直接关系到团队的工作效率,不能把有限的资源浪费在无限的问题上,要抓住重点。
B.定义目标用户。这个绝对是关系到生死的问题,设计必须全方位的符合自己目标用户群的需求。
C.头脑风暴。在建立好初始目标后,还要多即将开始的工作进行一次全员大讨论,这可以发现问题,防范于未燃。

2.开始绘制网站草图

A.随便画一些关于产品的故事

用简笔画用最直接有趣的方式把你关于产品设计的任何想法给画出来,这也可以考察你对产品的认识和定位是否清晰。

网页设计第一步:绘制网站草图

这项内容一般人数不要求过多,2-3人可以用30分钟的时间一边讨论一边作图。草图只要和产品相关,内容可以不受任何限制。你可以设想一个故事,比如你是一个用户,突然遇到了一个好的产品,从此抛弃了以前的旧产品。或者是用户在使用你们设计产品时的设备或是情境,遇到了什么故事。这样的草图看似和产品不是密切相关,但是其实这是一种发散思维方式,能让你最大化的设想出自己设计的产品到底是怎么回事。

B.确定网站的实际设计

这项内容由团队领导2-3人完成,时间不用过长。直接画出网站在设备上可能显示的草图,一般会设计出三个版式,以适应不同的移动设备。

网页设计第一步:绘制网站草图

设计完板式后,要画出网站内容的连接逻辑。

这一部草图不再要求任何的发散思维,一般整个草图的定稿要有团队领导或设计权威拍板,其他成员可以参与讨论,但是最终的决策必须确定。

3.画出自己想要的样子了,然后再从Photoshop或其他软件上开始设计

网页设计第一步:绘制网站草图

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5278.html

(4)
江山如画的头像江山如画管理团队
第15课:用z-index进行层次堆叠
上一篇 2020年2月25日 下午4:12
一款国内优秀的JAVA(JSP)网站内容管理系统-JEECMS
下一篇 2020年2月29日 下午6:28

99%的人还看了以下文章

  • 接到一个网站开发项目怎么去完成?—网站的开发流程

    接到一个网站开发项目怎么去完成? 今天125建站网给大家讲解开发一个网站有哪些流程,学过软件工程中瀑布模型的童鞋可能感觉会很熟悉。 网站的开发流程 【网站需求分析】⇓【制定网站建设方案】⇓【网站制作计划】⇓【页面设计和程序开发】⇓【网站测试】⇓【发布网站】⇓【推广和维护】 网站需求分析: 不管是对个人网站还是商业网站,网站需求分析都是很重要的。比如要为一个公…

    2018年1月29日
    7.3K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    9.4K0
  • 毛笔字生成器,毛笔字在线生成网站

    毛笔字生成器,毛笔字在线生成网站毛笔字生成器,毛笔字在线生成网站毛笔字生成器,毛笔字在线生成网站毛笔字生成器,毛笔字在线生成网站

    125网页设计今天给大家推荐几个毛笔字生成器,毛笔字在线生成网站: http://www.51poca.com/ http://www.epinv.com/online/ http://www.akuziti.com/mb/ 毛笔字改造使用方法 将下载下来的字体图片AI转路径,编辑文字。 首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。 …

    2019年1月5日 网页设计
    10.8K0
  • 移动端web app和页面开发使用什么字体?微软雅黑?

    一直不清楚移动端web app和页面用的什么字体,只是觉得类似微软雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。 三大手机系统IOS、android、winphone支持的字体 ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 androi…

    2019年4月9日
    17.1K0
  • 网页制作实战项目二:爱的天空

    网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空网页制作实战项目二:爱的天空

    请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…

    2018年4月12日 网页设计
    17.6K0
  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    11.4K0

发表回复

登录后才能评论