新手如何学习网页设计?完美电竞
日期:2024-05-08 05:16:54 / 人气:
本来不想有什么反应的,但既然写了答案,还是要对自己的东西负责的,再加上这段时间公司一直在面试设计师,所以就想回过头来在这里写几句。
现在的社会环境很浮躁,每个人都想奔着热点去,这没什么问题。而国内的大学对于UI设计这一块的系统教育也不够完善,也就造成了大部分UI设计新人,都不是本专业甚至不是设计科班。我也问过很多面试者,大部分人都表示进入UI这一行是因为这几年App设计很热,需求很高,即使大部分人明白他部分他们经受的产品都会很快的死掉。
所以如果你想知道的是看什么书?上身网站?要临摹什么?可以直接跳过这个答案。
如果你心目中没有自己热爱的设计师?没有深入的想要了解设计本身的意义、价值和区别,也可以折叠我。
试想一下,一个来面试的UI设计师,竟然回答不出最喜欢的设计师是谁?叫我怎么能相信他/她是真心来做事业的?
说实话,我的手机里面只有三中照片:第一种,我老婆,第二种,我家的猫,第三种,一切我看到的和设计有关的东西。
UI=user interface,用户界面是也,网页也是用户界面的一种,不是么?
这个问题实在是太喜欢了! 先简单介绍一下我爱这个问题的理由,首先我是正经CS专业毕业的,本来走的是数据和视觉这一块,毕业后本来有机会往后端发展,但实习的经历告诉我,似乎不大喜欢。由于我个人比较喜爱摄影,PS用的比较熟悉,便决定往前端发展。在这个过程中渐渐对交互和UI设计产生了兴趣,完成了程序猿到射击狮的过度。通过自己的努力进了纽约的Agency,然后慢慢成长,之后回国,筹备建立了自己的creative agency,大致就是这样的。
那么谈一谈自己的一些经验吧: 首先,在开始一切的一切之前,我想要老声长谈的说一句:设计,不管是哪一个类别的设计,目的和意义只有一个,那就是解决问题。ok,继续,在成为一个好的web designer之前,先要成为一个好的designer,就像在成为一个好的特种兵之前要先成为一个好的士兵一样。 1. 你要先疯狂的爱上设计,爱上排版,爱上色彩,爱上字体,爱上一切美的东西,并锻炼自己发现美和鉴别丑的能力。这个不止是对网页设计,对所有设计都适用。把设计当一个职业,而不是工作。 2. 了解关于设计的基础知识,这里不做赘述,书多的很,请自己看 3. 了解相关的技术,一点不懂技术的web designer和瘸子差不多,是没有办法发挥技术带来的设计上的“三维”效果的。所以千万不要怕技术上面的问题,而要爱上它,即使你不会写代码,也要了解哪些技术是可以实现的。你的任务是了解什么是可以的,至于不可能,交给技术去解决,如果你足够努力,甚至可以告诉技术什么是绝对可以的。
做到了以上三点,恭喜你,你已经基本可以进行还ok的设计了,如果你想要出类拔萃,往下看。 1. sense, 听上去是不是很虚无飘渺的感觉,对的,sense这个东西有点读书千遍其义自现的感觉。sense的作用之一是鉴别丑,然后避免之,然后是鉴别美然后模仿之,最后是创造美,然后nb之。怎么培养自己的sense?看很多很多书,很多很多作品,很多很多花花草草,去很多很多博物馆。不管是fashion也好,architecture也好,只要是沾边的全都去看,然后去总结和思考好作品的相通的地方,然后揉吧揉吧变成自己的。
2. 不断的实践,光说不练,假把式,有freelance的机会,有有趣的project多参与,多接触不同的人,拓宽自己的思维。
3. 练习精神分裂,像小白一样思考,像产品喵一样思考,这样你的角色会更进一步,你会从源头上能够回答自己在设计中的很多“为什么”。
wait,我有说,任何关于软件的事情么?就像做木匠,要会用锤子一样,那是必须的!
网页设计,设计一定是才是最重要的。所以页面布局,色彩搭配,构成等平面视觉的基础设计规范,是建立在设计类软件ps、ai等掌握的基础上需要做到的。例如:
网页设计需要简练的布局,了解常见的网页布局形式将在自己设计的时候有效提高效率;同时,绝大多数的网页设计都具有明朗的板式结构,为整体页面的画面营造秩序感,突出重点信息,提升信息传达的通畅性;
选取颜色鲜亮的网页主题色调将有助于视觉效果的提高,注意Logo或者图标等UI细节在颜调上的统一性;
负空间的利用在交互设计中越来越多,因此需要注意页面设计中适当的留白,不要将网页页面填充得满满当当的;
UI中布局块与元素之间可通过大小、主次、强弱、疏密、动静、虚实、色彩等对比关系来传递意图、情感以及交互逻辑等等UI设计上的细节,这些通过细节上的视觉设计元素从而提高网页的品质与用户的使用观看体验。
网页设计师比较好的状态就是既要懂得基本的技术与程序,能够实现网站的基本功能框架;又要懂得设计的美学,能够呈现网页的视觉设计;同时又懂得站在使用者的角度去进行用户体验的考量。
所以技术层面的知识也是应该学习的部分,需要看懂起码的编程语言,例如:HTML,CSS, JavaScript,jQuery,H5等等。而这部分的内容,可以在线上找到大量免费的、由浅入深的教程资源。推荐几个个人常用的:
一个非常好用的学习网页设计技术的免费开发教程网站,它提供给用户所有有关Web开发的语言(例如CSS,HTML,JavaScript,Python,Java等)参考与教程。所有课程和教程都是左右,或者上下的双窗口形式展现的,根据所挑选的语言以及函数,在对应的实时预览窗口中直接查看代码所带来的最终视觉效果,轻松地从该平台学习网页设计。
除此之外,W3schools有英语以及中文两个不同版本的网站平台,学习者可以根据自己的需求进行挑选。
在线编程教程类网站平台,该平台上的在线编码教程每一步都拥有设置了问题以及自动的教程提示,有着很清晰的使用与操作说明,即时反馈和经过测试的课程,以帮助初学者更好地学习网页设计。支持任何人能够找到从非技术人员到“我能编码”的学习方法是该平台的主张。已有超过4,500万的用户从codecademy学习了编码技能。
新手学网页设计的话,还是需要一点耐心。软件的应用、视觉设计的规范、技术层面的技能以外,UX也是一项很重要的学习内容,也就是我们经常提及的用户体验设计。毕竟网页是为了使用者,用户去设计的,网页中的内容需要无时无刻站在使用者的角度去进行考量设计,通过合理的交互菜单引导用户的行为,充分考虑到用户的需求,尽量把我们能提供的服务,用户最急切需要的信息内容设置在最显眼的位置,方便用户查找以及提供解决方案的功能。
如对艺术留学、保研、院校、专业、作品集、赛事有更多问题,可私信康石石咨询。
2,其次,网页设计涉及到许多东西以及明细的分类:例如分前台和后台,前台有设计师,还有前端工程师,后台有程序员等
4,前端工程师就是负责把页面实现成html页,还有css以及js,优化等等,学无止尽;
7,相关软件:PS(用的最多也是大家听到最多的)fireworks(可以做矢量图的)DW(可视化的网页编辑器),另外还有许多可以逐步了解。
8,建议:先了解网页的制作流程,然后学习PS的基本用法,并熟练掌握之,再次学习html语言,再学css。
其实网页设计师要学的东西还挺多的,你需要懂平面设计、网页构建、交互设计等等;当然,最主要的是设计!也就是视觉和交互,因为网页是需要和受众互动的。
平面设计,是通过创新性的方式将一些基本图形在平面中加以表现的过程,也就是用点、线、面三种元素对于平面空间的占据和切割。
初学平面设计,首先大家对色彩三元素:色相、明度、纯度一定掌握,而且在创作的过程中,每种颜色的运用都有它内在的理由与创作动机。
字体设计是一个单独的设计门类,它在平面设计中的作用,也会由于表现方式的不同,呈现出不同的效果。因此,平面空间内的字体,需要将其视为特殊的“点、线、面”,要考虑到文字的肌理、字体性格等,充分考量文字于海报中具体职责。
它提供的视频教程非常丰富并且质量很高,包括:PS 教程、手机摄影教程、Ai 做图教程、Excel 教程、Word 教程、PPT 教程、Pr 视频剪辑教程、Ae 视频特效教程、Au 音频教程教程、Flash 教程、做网页教程、css 样式教程、js 教程、Cad 制图教程、电路制作教程、模电教程、Windows 教程、色彩搭配教程、Prezi 演示教程、Keynote 教程、做图标教程、玩字体教程。
Doyoudo 是一个专注平面设计软件、视频剪辑软件的高质量自学网站,它免费提供了丰富的视频教程,这些视频教程的质量都很高,并且通俗易懂。
它提供的视频教程包括:平面设计、后期剪辑、特效合成、三维动画、音乐音效,涉及的专业软件包括:PS 、AI 、AE 、PR 、AU 、Id 、C4D 、Final Cut Pro 、Snapseed ,这个网站的视频教程让你使用这些专业软件变得更轻松。
它的内容安排在视觉传达理论、美术史、创意策划、案例分析以及设计实践之间,把握了良好的平衡。介绍了摄影、插画、记录片、多媒体以及新媒体等领域的先锋理念。
《美国视觉传达完全教程》的封面设计和内页排版都曾获奖,向读者展示了当今最优秀的书籍设计。
《配色设计原理》通过简明易懂的示例作品,逐条讲解了绝对不可背离的配色理论;将具体的设计案例进行修改前后的对比,分析了如何才能使配色更具效果和表现力。
本书根据希望达到的不同表现效果和目的,展现了设计师必须要了解的配色技巧;介绍了在理论无法适用时应对的配色设计方法;讲解了基本的色彩知识和易用的PhotoShop技法;刊载了日本目前最活跃、最权威的设计师的主题性访谈。
在这本薄薄的《创意》里,清晰地阐述了创意的本质、创意的理论、创意产生的过程,发人深醒,终身受益。
本书通过nendo工作室创始人佐藤大亲身体验的事例,介绍设计与创造的本质。不仅是设计师,普通读者也可以从佐藤大的独特思考中,发现用“设计”解决问题的方法。
全书分发现问题、创意量产、解决问题、表达方式、设计五个部分,系统阐释作者创作思路,配以大量案例,解读细致入微,启发极强。
几何图形就像是平面设计这栋大楼的一砖一瓦,是每个设计师都必须娴熟运用的基本设计元素。几何图形虽然看似简单,却能生出无限的可能。
《Shapes 有形》收集了来自世界各地的优秀设计师们运用几何图形所创作的优秀平面设计作品,包括品牌设计、字体设计、排版设计、包装设计等等;为读者提供了丰富的灵感资源。
无论是刚入行的新手设计师,还是经验丰富的老设计师,无不孜孜不倦地挖掘着几何图形所能为设计带来的创意表现。
网页设计是需要一定的设计功底,就是美术和设计理论,要有自己的创意。如果对网页设计比较感兴趣,学起来特别快。网页设计分两块内容,一块是网页美工,需要设计的有创意,因为做的网站的脸面,一定要新颖有特色,另一块是后台,主要功能的开发,要用到一些编程语言,如java,php,css,div等知识,有些素材可以在网上下载到,只需加入自己的想法和创意也能做出很好的效果。
昵图网,这里的资源很丰富,更新很快,如果你也是一名设计师的话,自己也可以上传素材赚钱。
首先,可以告诉想学网页制作的零基础的朋友。学习制作网页和学习其它知识一样,是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次,要清楚学习它是用来做什么。你要是个人喜好,学学网页设计,用用dreamwear就可以的。但要成为高手,就要去学asp,php这些做网页的语言,数据库也要懂,因为现在所有的网页都是结合数据库的动态互交式网页。PS,FLASH,也是要懂的。网页设计需要学习的内容基本可分为四个大模块:
1、网页制作部分 这是网页的核心技术 网页编辑语言(包括:html、css、javascript、asp、xml等)你可以选择地学习。
2、网页设计部分包括网站logo与图标设计制作 网页导航与网页按钮设计制作 网页特效与文字特效设计制作 banner设计与广告图片设计制作
网页设计的大部分工作都需要Photoshop来完成,或者精通其他网页设计的软件,自己也可以通过下载一些好的设计素材来参考应用
怎样学习制作设计,不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要,希望能够给想学习制作网页的朋友一个参考。
信息技术突飞猛进的互联网时代,我们平时看到的网站页面都是网页,是承载各种服务和应用的平台。网站设计与制作形式多样,好的网页能为网站带来更多的访客和流量。
自学网页设计之前,你首先需要知道网页的制作流程。有了全局的视角,才能对所需要掌握的技能了然于胸,更高效地开始学习网站制作设计入门知识。通常情况下,网站建设设计制作要经历从“分析策划”、“交互设计”、“视觉设计”、“前端制作”、“后端制作”到“测试上线”六大环节。
很多网站设计与制作公司,会将网页设计与制作的工作归为“视觉设计”与“前端制作”版块,常常交代给网页设计师与前端工程师去完成。当然,前面的“分析策划”与“交互设计”也会直接影响到的网站设计制作效果,这部分往往由产品经理去执行。
从岗位职责来说,网页设计是以视觉设计为主的工作,网页制作则是以前端代码为主的。自学网页设计制作的核心任务就是学习“视觉+交互”的知识,这是网页设计师必须掌握的核心技能。新手们从Behance中展示的优秀网页设计作品获取灵感,帮助自己加深理解。
网站建设设计制作是一个复杂的过程,在这个过程中,你要掌握网页设计制作规范和视觉基础规律,了解前端代码的运用,拓展网站优化、开发及后台处理的常识,学习如何规划页面路径、如何以富有创意的表现形式进行排版、用什么样的字体和颜色更能高效传递网页信息,等等知识。
由于网页设计制作涉及不同岗位的分工合作,为了提高工作效率,很多网站设计与制作公司会选用以墨刀为代表的一站式在线办公协作平台。基于强大的软件功能,墨刀原型设计工具可以重点满足网页设计制作中“交互设计”、“视觉设计”的全套工作。在根据品牌定位和网站需求,分析策划好网站网页的设计方向后,就可以利用墨刀的原型工具进行交互设计了,完成原型设计后,可跨终端进行预览,一键交付,便捷协作;然后,再用线上版sketch设计师工具开展视觉设计,画板无线延展,不受设备和系统限制,随时随地让创作发生,也能让同一个团队的成员在线即时预览,提高完善效率。如果题主感兴趣的话可以尝试一下这个线上设计软件。
一、无论你将来用什么语言做网页,都要先学习HTML,一种很简单的语言,也是网页设计的基础,找本自己能看懂的教材,浏览为主,不用记住所有的概念,只要记住使用原理就行了,这一阶段,估计三天就够了。然后用两天时间学CSS,方法同上。自学一般几天就可以学会,必须要学,尽管现在有三剑客这样的可视化的设计软件。
二、掌握HTML以后,其实你就可以设计一些简单的静态页面了,再接下来就是学习可视化设计软件,比如网页三剑客中的DREAMWEAVER(推荐)他是可视化的页面结构设计软件,可视化的意思,就是可以用软件中现成的按钮或选项来帮你快速制作网页,代码由软件代替你自动生成,可以大幅提高效率。
四、最重要的你要学会网页切图和div+css,css是网页制作人员必备的工具,经验是否丰富直接决定你能否胜任网页前段设计师的工作。建议这块进行系统的培训或者自学。
网页设计是网站向企业向用户和网民提供信息的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站INTERNET上宣传和反映企业形象和文化的重要窗口。
1.Dream weaver:简称DW,是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DW使用所见即所得的接口,亦有HTML编辑的功能。
2.Flash:是一种动画创作与应用程序开发于一身的创作软件,使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
3.Photo shop:主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。其有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。
4.Fireworks:一款专为网络图形设计的图形编辑软件,它大大简化了网络图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等。
不管做什么,你都要先去知道你所做的是一个什么样的事物。这是我们认知的一个基础的前提,对于我所说的网页设计,有很多的人们都会说,不就是一个网页吗,没什么可认知的。其实这样的观点是大错特错的,在很多的新站长来说,都是有着更加的深的体会的,有的站长认为网页嘛,不需要那么刻意的去设计,只要自己的网站文章原创,搜索引擎收录,PR高,那么网页就无所谓了。其实我们所做的网站是做给我们的用户去看的,所以如果一个好的网站,所有的方面都是十分的优秀的,但是网页做的十分的简单,空洞。那么试想一下,我们的用户会在你的网页停留多久呢,这就是所谓的网站的外干内强了,即使你的网站做的再优秀,我想也不会有什么成效的。
不管是做网页设计这个方面的人员,还是我们广大普通的用户,你在大开一个网站的时候,会先去看什么呢?我想大部分的人都会去看导航,因为导航就是一个网页的指路信号灯,想知道什么就能够在导航中点什么,让我们更加轻松简单的知道,让我们的网页能够起到我们想要的作用。
「关于我们」页面是网站设计的主要一环,是访客了解公司品牌及团队成员的重要入口,更重要的是可以方便访客联系到你。
其次,为了使公司更加人性化,可以在网页上放置一张企业管理人员及其团队的照片和个人简历。这些简历既是履行公司价值观的证明,同时又能表现出员工的个性。让那些好奇的访客了解到这个品牌背后是有一群真实的人为之付出的,可以无形中增强访客对企业品牌的信任感。
既然上文已经向访客展示了公司业务的独特性,现在可以通过向他们讲述你的故事来锦上添花。
这些都是好的故事。可以诱使潜在客户在你的网页多停留时间,了解更多就更容易产生强链接。
区别一大批竞争者的办法,就是明确的向用户传达你的服务理念和价值观,告诉他们你是独一无二的。
又臭又长的官话就不要说了。什么“我们拥有全球最顶尖的设备,致力于为客户提供最有价值的服务,争取在三年内冲出亚洲走向世界……”现在的用户都很聪明,没有意义的话还是少说为妙。尽管他们有的是时间,可以自己浪费,但不能被你们浪费。
事实胜于雄辩。你与哪些企业进行了合作,服务了多少用户,数字和图片更有冲击力。
最好是把页面内容合理分区,标题简单明了容易理解。相信我,访客的阅读过程轻松愉悦,对于品牌的好感会大大提升。
当用户访问页面时,就代表对你的公司也好,品牌也好,产品也好感兴趣,他们都能成为你的潜在客户。
又或者引导其订阅你的产品或者关注其他平台,通过给邮箱发相关邮件的方式,使其能够续持续关注。
最简单粗暴的方法就是放上标有公司地理位置的地图,并且提供联系方式,以及电子邮件。
「关于我们」存在的另一个重要原因就是要简化用户行为,既然用户浏览到此页面,就是对这个公司感兴趣,那么我们要做的不是在访客感兴趣有购买意向时,给其的购买增加困难,而是直接送上所有信息,把访客引到我们身边。
好啦,今天的建站科普就到这里了,关注我@云梦智能了解更多专业有趣的建站知识。
给你一个干货,是我在美国堪萨斯大学做网页设计工作时,学校用户体验中心培训的。
简明扼要地解释你的网站是做什么的——通常可以用 1 到 2 句话来完成。 将重点放在你的网站与读者的关系上。
为了良好的视觉效果和用户体验,使用专业、有审美感设计的大型照片(或幻灯片)放在网站焦点位置非常有效。 大型照片(或幻灯片)还可以包括简短的文字来传达您最令人印象深刻的新闻标题。
让人们尽可能快速、轻松地到达他们想去的地方——信息架构练习有助于让你了解您的受众以及他们最想寻找的东西。
响应式网站指的就是网站的设计布局和内容会根据屏幕尺寸而自响应,无论是具有 320 像素宽显示屏的 iPhone、具有 768 像素宽显示屏的平板电脑还是具有 1,600 宽像素显示屏的台式计算机,网站内容都能完美的呈现。 这消除了重复创建网站的需要,从而减少了创建多个站点所需的重复性工作,并且更有利于更新。
为了响应,网站设计模板可使用灵活的网格系统,其中左侧栏中的内容保留其在站点顶部的位置,而外侧或右侧栏中的内容将根据所使用的设备移动和重新定位。
零基础编写最简单网页,通过保存网页源代码,一遍遍的练习,你就可以写出自己第一个最简单的网页了,当然要想写出复杂漂亮的网页,你还得学习更多的标签代码。
当然还要用到上面列出的photoshop等图片处理工具,来为你的网站制作漂亮的效果和图片。不过不用担心,你接触的知识越多,哪些东西需要怎么学习,这是一个循序渐进的过程。鬼谷学院网页制作培训课程里,也有PS教程,根据你个人的基础情况,名师在线辅导,可以免费试学,期间不收取任何费用,入学签署就业协议,学习过程基于实际案例,动手的同时,更能巩固自己的专业知识。
(1)先学美工:学习PHOTOSHOP,学习这个的目的是做网页的效果图,并且懂得将整个效果图切割,放入网页。
(4)以后会接触到,数据库,FLASH,网页脚本,服务器知识等很多方面。
新手设计网页建议你去找那些建站平台看看,有很多DIY网页设计,那种操作简单而且免费的,有上千种行业素材模板和代码,DIY网页设计与传统不一样的,这种是设计任意放置图片或者文字,任意修改背景风格,无需写代码,会打字就能建网站,电脑+手机端自动匹配,全国语言系统。
新手学习网页设计,可以先从HTML开始学,在慢慢过渡到CSS、JavaScript那些。
CSS的中文翻译叫“CSS分层样式表”,CSS是一种用于表示文件格式如HTML或XML的计算机语言,我们可以通过CSS样式来修饰网页,使其更漂亮。
JavaScript是一种直接翻译的脚本语言,它是一种动态类型、弱类型、基于原型的语言。
如果你花时间去学习并坚持下去,学好了这三门技术,建一个简单的网站不成问题。推荐使用DreamWeaver、Jbuilder、Microsoft Visual Studio等网页设计软件。
如果你没有足够的时间来学习网页设计模板代码相关技术,但又想自己建立一个网站,这样的情况下,建议使用凡科建站、squarespace等第三方建站工具。

