【设计如此简单】网页设计师入门必备知识指南

网页设计入门之前的知识,多年设计所总结。围绕平面与网页设计之间的不同差异和共同点讲解一些平面与网页知识点、从字体、像素、版式、色彩、如何学习等角度讲解。

大家对于网页设计的认识有多少呢?知道网页和平面的区别吗?那么学习网页又要从哪些地方学起呢?需学习哪些软件呢?如何快速成为一名网页设计师……等等。有一部分的网页设计新手会有疑惑,我就与大家聊一聊网页设计和平面设计的区别。想入门网页设计都需要掌握什么软件以及技巧。

屏幕显示视觉传达动态    传统纸类视觉传达设计

设计 技术的呈现方式    设计 工艺的呈现方式

两个同样是视觉传达的设计但是之间的差异性在于

网页和平面印刷使用色彩模式完全不同, 平面后期实现依赖于印刷,所以采用CMYK的色彩模式;而网页设计根据屏幕显像方式使用RGB格式 。有一些平面设计师用习惯了CMYK 模式,但当用CMYK去做banner或者是网页的时候颜色色差很大。无论是CMYK模式还是RGB模式,同样是为了设计而服务,只要根据设计的需求遵循色彩模式标准就可以了,这也算是在入门网页设计的时候最基础的知识。

在平面设计中会涉及到一些印刷品设计。比如展架、喷绘布、宣传手册、LOGO设计、DM单、折页、臂贴、地贴、角旗、车贴、海报、等等,一般根据设计需求而设定像素,不同尺寸的平面设计设置不同的分辨率。

例一:

设计一个喷绘布,10M长5M宽,那么根据自己的电脑硬件来考虑设置分辨率,一般会选择 30像素、 45像素、 50像素,如果你电脑硬件条件很好则尝试72像素也行,(但是那么大的喷绘布好像很少有用这么高的像素)

当然了设计设置分辨率也不是很绝对的,还要根据情况而定,但是有一个要记住就是:画面越大分辨率的值就相对于越低,画面越小分辨率的值就要相对于越高。

随着互联网的发展、网页设计、UI设计也热门起来、首先是PC/移动端,其中包含了专题设计、栏目设计、门户设计、电商设计、详情页设计、banner广告设计、H5设计、APP设计,无论是其中的哪种设计设置72像素即可、这是因为最早的图形设计是在mac电脑上进行的,mac本身的显示器分辨率就是72,PS中把图像DPI也设成72,便于设计。之后72像素显示器分辨率逐渐成为一种默认的行业标准,这套规则就这么沿用下来。

平面设计中设计海报、展架、画册等都有统一的尺寸规则,网页设计尺寸随着不同时期的流行趋势,尺寸也同样在变化。可视区域内从早期的网页680像素、800像素、960像素、 980像素、1000像素、1200像素在门户网站、专题设计中应用。经过了互联网的发展、网页设计尺寸也有所不同、电商网站为了展示更好、更大的图片产品内容、在设计的时候可视范围设置成1200、1090、1230等甚至更大尺寸、追求设计扁平化、全屏设计、大背景图设计也是个主流的方式、响应式网站也同样热门于网页设计当中、通栏整洁设计、让用户有更好的用户体验、在各个终端演示观看都是一个出彩的效果、还有滚动式、滚动视觉差形式、多种方式同样展示出最终效果、设计形式根据时期趋势追求大图、大视频、大背景设计手法、更让浏览者有更好的视觉体验。

从版式的布局上来说,平面设计和网页设计有很多可以互用的表达手法。左右布局、上下布局、中心布局、对称布局为最常规的设计版式、排版多样化,最终呈现的效果根据自己的感觉来进行设计。但是很重要的一点,就是在网页设计中一定要模块化,就算是不规则的排版方式,也要做到有理有据。

无论是平面设计也好,网页设计也罢,在字体应用上需要注意如下几点:

  • 文字适合性,根据标题主题选择,字体样式。
  • 可识别性、在文字设计应用设计同时要注重文字的识别性、一定要让浏览者在不失美观的程度下有更好的阅读主题。
  • 文字的美观程度、在运用字体的时候一定要字体具有一定的美观度。整体的效果也会有提升
  • 文字个性化一般都运用在头图或一些大标题上、具有一些文字图形上的变化、虽然变化但是一定要在保持识别性的情况下去做文字图形的修改、文字不只是图形装饰,也是一种文字图形的一种表达方式。
  • 在网页内容正文中一般文字选择性都很小,在正文中,为了让输出的成品大小不对服务器造成压力,一般正文文字都不建议用图片演示、基本是手打字、基于HTML的特性,字体都根据用户操作系统默认字体而定。

平面设计一般会通过纸质进行宣传,这样宣传范围小、具有局限性且成本较高,相比而言网页的信息传达能力非常强,互联网的科技发展使得大家从网络平台上获取更多的信息,而网页大家对于视觉上的享受也有所要求,之前大家对网页是以视觉的而看重,而近几年大家可能更加看重用户体验。从比较写实、厚重的页面到现在简约、大气、扁平化、更让人利于操作、更带来视觉享受。在用户体验的前提下还要注重用户的交互功能的实现,网页界面不仅能融入绚丽HTML5动态交互效果还能插入视频,这是平面不能体现的。

从事设计专业的人,大多数都有过绘画的基础,比如:手绘、素描、水粉、速写等,这些都可以帮助设计师提高色彩能力、审美能力、造型能力。把这些学习的运用在设计当中同时也学习理论的平面构成、色彩构成、立体构成,等一些技法,都是对设计有所帮助。

那么在这些能力具备的前提下就是软件操作的技能,在网页设计当中、软件操作要精通的有:Photoshop 、Illustrator等、这两个是必须要掌握的软件,现在对用户体验的不同需求,在设计技术上也不同的升级,FLASH在网页设计中已经不是很重要的地位。

除此之外,还有更多技术运用在网页设计中,如:3D技术、AE技术、C4D技术、插画技法等,更加满足现在的视觉需求,让网页上的视觉更加具有冲击力,更加的有交互性。

软件操作性都熟练之后,UI图标、网页设计、H5设计,多练习、多看、多临摹。从临摹过程中提取出一些,如何用的排版、留白、版式、字体、颜色、字号、等。

另外,如时间允许也可以学习一下Dreamweaver软件,或者学习HTML丰富一下知识储备。

学习一下Dreamweaver软件的功能、操作性。然后在学习HTML,了解一些基础的标签,比如比如

-

,

标签等。至少知道这些标签是起到什么作用,接着了解一下DIv+CSS样式表。比如:类选择器、ID选择器、相对定位、绝对定位。边框、内边、外边等、给网页增加一些版式样式。除此之外如果有精力还可以学习一下javas cript。从而可以实现更好的网页交互性、学习一定要有一个路径、循序渐进、通过系统的学习,相信你一定能成为一个优秀的设计师。

站酷

作者:张增顺(qq:1071347659)

(0)

相关推荐

  • 云计算交互设计师的必备知识!

    作为云计算的交互设计师需要学习哪些?文章为你解答. 最近有不少设计师会跟我聊到,做云计算的交互设计与其他设计师有什么区别吗? 我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在 ...

  • 网页设计师必备的7项技能

    小编:今天给大家分享的是由网秦UEC带来的网页设计师必备的7项技能.作为一名合格的网页设计师,是不是只用敲敲代码如此简单呢?网页设计工作一半基于正确的编程和设计技巧,另一半则基于是否对美与不美有着直觉 ...

  • 为网页设计师而生的14个文本编辑器

    可视化的工具的易用性通常非常优异,因为它更符合人们交互和操作的自然逻辑。不过,要精准控制网页和程序,你总需要一款称心如意的文本编辑器来帮你搞定代码,哪怕是视觉至上的Adobe都会在Master套装里面 ...

  • 60个网页及平面设计师必备神器

    Adobe AIR是一个构建高效先进桌面应用程序的巨大平台,它可以在任何操作系统上运行。在过去的几年中,为了实现各种功能,AIR建立了数以百计的非常有用的应用程序。在这里我们主要讨论那些为网页和平面设 ...

  • 作为一名网页设计师,需要掌握哪些技能?

    一个网站的好坏,除了取决于网站本身的原因,还有一个重要的原因在于一开始设计网站的那位设计师,以及该网站的维护操作人员,那么,在我们的日常中,如果你作为一名网页设计师,你需要掌握哪些技能呢?小编在这为你 ...

  • 值得网页设计师和前端收藏的实用工具列表

    无论你是丰富的前端,还是刚刚起步的设计师,这些为真正的网页设计师和开发者所准备的实用工具.在线服务.资源和代码片段,都是为你而生的,合理的运用能够让你的网页设计与开发事半功倍. 这次总结的工具总计有4 ...

  • 15款网页设计师必知的无代码网站搭建平台

    作为设计师,对网站满脑子的构思,却受限于时间和技能(比如写代码),这是何其无奈!那个在你脑中盘桓许久的网站,或许是一个博客,可能是作品展示网站,但无论是哪种,想要让想法落地实现出来终究是一个艰巨的任务 ...

  • 网页设计师接私单经验分享

    私单,在我眼中就是外快,一个赚钱的途径,今天不讨论如何接单,我只分享我的私单经历(当然私单有很多种类,本人是网页设计师,接的都是网站私单). 网站私单我也接过不少,不过我只负责网站的设计与HTML页面 ...

  • 网页设计师也该关注页面性能

    操作方法 01 一名网页设计师在做具体设计的时候应该考虑的问题有哪些?业务,产品,信息结构,交互,视觉--别忘了还有页面性能.我所崇尚的其实一直都是小作坊似的创业团队协作开发模式,大伙儿能快速沟通,就 ...