初学者的提示和资源


189

多亏了互联网,图形设计和编程领域变得越来越重叠。

作为一名程序员,我经常发现自己需要图形设计的基础知识,但是在查找透彻而简洁的图形设计学习资源时遇到了麻烦,而通常会找到与手头任务相关的一点点知识。

你们能提供一些技巧或推荐一些好书,教程,博客和网站,这些新手提供有关Web设计的初学者级别的概述,根据您的经验,它们是有效且高质量的学习材料。我不是在寻找有关如何使用图像编辑工具的提示,而是假设已基本掌握这些技巧,哪些资源和建议将最有助于新设计师创建具有专业外观的设计?


Answers:


180
  • 保持简单 -刚开始时不要尝试做任何过于花哨或冒险的事情。首先了解基础知识,然后就可以开始进行实验了。不要尝试模仿星际迷航计算机界面。
  • 保持一致 -一致的设计是好的设计的基础。跟踪边距,大小和位置,并在整个设计中进行维护。
  • 去除杂波 -仅包括设计所需的元素。删除其他所有内容。
  • 优先排序 -设计的主要目的是什么?强调这个目的。使其明显。
  • 使用空格 -留有适当的边距。几乎没有空白或没有空白的大块文本不太可读。同上其他设计元素。
  • 使用调色板 -您总共不应使用超过4-5种颜色。
  • 一致的字体 -坚持一种或两种字体。始终使用它们,通常一个用于标题,一个用于段落文本。计算并保持一致的字体大小,行高和行距。除非可以抵御狂暴的迅猛龙僵尸,否则请不要使用Comic Sans。
  • 首先设计 -设计不应该是事后的想法;它应该是计划阶段的一流成员。设计将成为用户与您的编程交互的方式,他们将首先基于您的设计形成他们的意见。赋予设计适当的重要性。

至于资源,您可以访问以下任何网站:


13
“不要尝试模仿星际迷航计算机界面。” 哈哈哈,太好了。:D感谢您提供的丰富答案。
Rob Howard

2
访问hackdesign.org,这是关于黑客设计的每周非常好的课程。
Augustin Riedinger 2013年

1
PSD Tuts-错误的链接!
Dmitri Zaitsev

1
我要在此列表中添加用户的重要性,设计应该首先可用,而任何妨碍可用性的东西都应该删除
Toni Leigh15年

因此,基本上,您使用代码进行的所有操作。坚持要么制表符空格。使用空格。删除杂波等
秃头班萨

29

吉姆·克劳斯(Jim Krause)的设计基础知识索引为我很好地总结了成分,颜色和类型的基础知识。我并不是他的大多数例子的忠实拥护者,但是它们确实很好地说明了他的观点,他谈到了一些我未曾见过的有价值的事情。也许最重要的是,阅读它使我非常兴奋,可以出去尝试他所介绍的想法。


24

Web开发和Web设计之间有时会有些许重叠,但是我不认为Web开发人员不应该尝试成为专职设计师,除非他们愿意像在学习编程方面那样付出最大的努力。您不是只能在周末闲逛并擅长的东西。

如果是这样,您可以学习成为自己的网页设计师(即为您工作的所有网站做自己的网页设计),那么我真的建议您接受一些正式培训(即使只是参加一些大​​学设计课程)学习视觉设计和构图的基础知识。一本教科书式的设计书(如Damon所发布的书)可能会有所帮助,但是您必须实际完成书中的所有练习并确保您了解材料。但最重要的是,您需要花费大量时间进行研究(浏览在线设计画廊,浏览杂志和杂志广告等)并创建设计(在线下载一些实践设计摘要或参加在线设计竞赛)。

如果这是为了帮助您与合作的Web /图形设计师进行交流,则只需拿一本教您词汇(例如印刷术概念)的书,并着重于可用性可访问性UX设计,这可能是您最好的时间选择。这样,您可以参与项目的创意方向并帮助设计界面,但是设计师是创造网站“外观”或美感的人。

Virtuosi Media列出了很多很好的资源(Tutsplus网络总体来说很棒,而《 Smashing Magazine》是任何Web开发人员/设计人员必读的书),我还要补充:


2
我同意您的大部分观点,并且我不考虑职业变更或其他类似问题:-)在工作中,如果我要开始一个非常认真的个人项目,显然专业人士会工作。但是我和我假设许多其他程序员喜欢构建小型迷你项目,并且不能雇用专业人士来进行每月4次访问的工作。因此,通过这些努力,我自己设计了它们,并且外观越好,它们起飞的机会就越大。我也喜欢尝试创作数字艺术的过程。它与编码的完美突破和不错的结果使它变得更加令人愉悦。
安迪·格罗夫

4
@安迪·格罗夫:听起来不错。我主要是指那些尝试自行处理商业项目设计并最终将95%的时间花在开发部分上,然后尝试在截止日期前的最后3-4天进行设计的Web开发人员。但是我认为任何人都可以从学习新技能和拓展视野中获益。这有点像运动员如何进行交叉训练,这有助于提高他们的整体表现。
Calvin Huang

1
在角色方面存在巨大的重叠。当然,这些角色通常不是由同一个人处理的。
2011年

19

我本人是一名程序员,对我来说,以下几本书对我很有帮助:

  • 罗宾·威廉姆斯(Robin Williams)的非设计师设计书:这本书涵盖了图形设计的基础知识。
  • 贝蒂·爱德华兹(Betty Edwards)的《在大脑的右侧绘图》:这是一本用于发展绘图技巧的书。
  • 杰夫·拉斯金(Jef Raskin)的人性化界面:这本书引发了有关用户界面设计的一些想法。

15

也许与所有情况都不相关,但是对于网络程序设计师而言,对我而言最重要的事情之一(也许在某种程度上弥合了差距)是内在地学习CSS,因为能够进行良好的设计并不意味着任何事情。如果无法将其集成到正在创建的项目中。


12

在2004年,我发现自己处于两个世界的中间,就像我一生的大部分时间一样-从互联网时代的HTML 3.2开始,我就开始从事网络工作。由父母(编舞家和教育家)用苹果// e抚养长大的,父母允许并鼓励我花很多时间在艺术上。设计不是一门艺术,实际上,无论您是在做Web还是其他工作,设计的某些算法模式都可以与编程很好地结合在一起。

书架直方图

  • 书架直方图 -我在研究生院制作的打印,既有设计感又有开发者感。

但是,是的,2004年:我读研究生时就分开了,在那里我首先接受了一流的印刷教育,然后才有探索的余地–在此期间,我的怪异倾向派上了用场。

因此,也许考虑高等教育,或者其他任何一种对您来说都是无所不包的方式。无论哪种方式,祝你好运。


12

了解很多关于排版的知识。

经典中 ...

书的形式,Tschichold
扬·齐契霍尔德

不是小丑 ……

版画的终结:戴维·卡森(David Carson)的涂鸦设计
戴维·卡森

战略性和有效的排版是该领域(而且一直如此)最缺乏的素质之一。

我通常可以完全根据他们的类型处理来招募设计师。简历中大约80%的故事是正确的。

一个很好的(免费)开始是罗伯特·布林赫斯特(Robert Bringhurst)对基本资源的详细修改,以便将其应用到网络上。

印刷风格的元素,Bringhurst
印刷风格的元素,Bringhurst

这是涉及类型和布局相互作用的更广泛的考虑

图形设计中的网格系统
平面设计中的网格系统,布罗克曼


10
  1. 认真思考周围的设计对象

    人造环境中的几乎所有东西都具有某种设计风格,无论是图形,网站还是时尚配饰。

    注意设计达到其预期目的的功能以及外观。

  2. 将设计视为满足需求或解决问题的一种方式

    在努力使事物看起来更好的同时,设计与其他类型的艺术有所不同,因为它具有实际的应用。

    例如,徽标是一种图形设计,可帮助快速识别品牌或公司。

    一件衣物的目的是覆盖身体,除了使穿着者看起来更具吸引力。

  3. 练习视觉交流。

    设计师需要能够绘制其设计的图纸或其他表示形式,以便完善它们并向其他人(例如,设计同事和制造商)进行解释。

    绘图对于设计师来说是一个强大的工具,但是如果您不能逼真的绘图,请不要担心。设计师的图纸不必一定是杰作,而只是一种快速捕捉可以产生最终产品创意的方法。跟踪也是完全可以接受的。

    除图纸外,设计师还使用模型,原型和计算机成像等工具来可视化其设计。

  4. 探索事物的制造方式

    当您从事设计师工作时,不仅要考虑令人眼前一亮的事物,还必须始终考虑如何实现设计。

    对于像手机壳这样的物体,工业设计人员需要考虑将使用哪种塑料和成型工艺,以及如何将每个零件连接在一起。

  5. 寻找良好的信息来源

    除了设计杂志之外,还要查找有关设计过程,原理和方法的书籍。

    尝试查看有关服装构造,制造方法和各种工艺技术的教科书和技术视频。

    了解设计的知识要比阅读时尚和装饰杂志更深入,尽管这些是当前趋势的好资源。

  6. 发展您的设计技能

    学习和实践是好的,但是真正将您的设计提升到更高水平的是现实世界的经验。

  7. 迅速犯错

    您会犯很多错误,越快解决这些错误就越好。

  8. 时刻准备着捕捉想法。

    在各处寻找灵感。灵感不一定来自其他设计或设计趋势,通常可以来自自然或偶然发生的事情。

书籍和材料

http://www.alistapart.com

http://webdesignledger.com

粉碎杂志

PSD Tuts

阿布泽多

UX展位


7

请记住以下几点:

  1. 每种设计都能解决问题

不要再从“如何使它变得漂亮?”这一角度来思考设计。并开始用“我如何使它尽可能地易于使用?”来思考。

在制作网站时,从广义上讲,这意味着您正在解决业务问题

存在一个网站以实现业务目标

网站的用户也怀有自己的目标 -他们可能想购买商品,比较产品,阅读主题等。

这是作为设计师你的工作,帮助企业通过确保尽可能多的用户能够满足业务目标,并帮助用户浏览的网站,使他们能够实现自己的目标。

例如,您正在设计一个电子商务商店:这里的业务目标是销售产品。用户的目标是尽快找到他们想要购买的商品,并尽快结账。

设计过程的很大一部分用于解决问题,建立用户资料,思考如何实现业务目标等。

颜色,字体,布局,您做出的每个设计决定都必须由网站的目标来决定。

  1. 重复使事情看起来很漂亮

这就是一致性。

例如,字体配对。字体是基于相似特征,重复细节而配对的。

这是一场比赛:Farnham和Benton Sans。

法纳姆(Farnham)和本顿·桑斯(Benton Sans)是很好的搭配

根据此处的帖子2,这两种字体匹配是因为:

面部的相似之处在于其小写字母的下蹲,它们具有明显短的上升和下降的字母。[...]两者的小写字母都很宽。

某些特征的重复使得这两种字体可以很好地协同工作。您可以在此处的网页上看到它们3

重复在设计中带来和谐。和谐使设计看起来更漂亮。

但是,正如您所看到的,Farnham和Benton Sans也形成了对比 -Farnham是一种衬线字体,而Benton是sans衬线字体。

为什么需要对比?我们希望在设计中引入相似性,对吗?

是的,但是,重复太多会使您的设计变得乏味且难以使用

治愈是对比。

  1. 对比帮助用户找到自己的方式

它帮助他们将不同的元素彼此区分开。它可以帮助他们找到关键元素,例如标题,导航,按钮。

元素越重要,它应该与周围环境形成对比。

使用重复使您的设计一致。就像其他人所说的那样-2种字体限制了调色板等。

当您确实需要将元素与其余元素分开时,请使用对比度。

很高兴知道所有这些,但是...仍然无法帮助您设计下一个网站,对吗?

好吧,我也有解决方案

要提高网页设计的第一步,就是观察并吸收他人的工作。很多。那就是“灵感”的来源。

查看一百个您喜欢的设计,对其进行分析,然后您将开始发现图案。您的大脑将帮助您将这些模式组合到您自己的设计中,这将是您看到的所有类似设计的变体。您无需创建“独特”的东西。

摘要:下次您开始为辅助项目设计时

浏览十二个类似的网站/网络应用程序,并快速设计其设计草图。注意他们使用了什么工作流程。他们为什么使用它?请注意他们使用了哪些形状,颜色和字体。

然后完成以下过程以创建您自己的设计:

  1. 定义项目。沉浸在项目中并了解更多信息:

    1,目的,预期成果

    1. 其(未来)用户
    2. 用户/访客的预期体验
    3. 项目背后的品牌
  2. 获取所需的资源。获得(样本)内容(从类似站点借阅)
  3. 塑造内容

    1. 选择一种用于对内容进行排版的字体(选择适合网站心情和消息的字体)
    2. 选择正文的字体大小
    3. 根据正文的字体大小生成模块化比例尺(比例谐波尺寸表)(使用类型比例尺-视觉计算器)
    4. 根据项目要求草绘不同的布局
    5. 在模块化比例尺的帮助下构建布局(使用HTML&CSS):列宽,行高,标题尺寸,下边距,列(如果需要)
    6. 根据品牌指南上色

您可以在此处阅读有关此过程中每个步骤的更多信息


6

还有一些:

  1. 浏览鼓舞人心的网站集以获取想法。励志网站集合的集合母体列出了很多集合。另外两个不错的网站是siiimple.comminimalsites.com

  2. Virtuosi Media的“消除杂波”建议绝对是理想的选择,但是由初学者完成的具有杂乱感的站点看起来比初学者完成的极简主义站点要好。混乱在某种程度上掩盖了其他不良的设计元素,分散了内容的注意力。典型的业务站点与几乎所有模板一样,杂乱无章,但外观仍然足够专业。

    它与字体,对比度,负空间,颜色,密度,流线等紧密相连,从而创建了一个设计合理,高效,呼吸良好的网站。

  3. 如果一切都变得不堪重负,请考虑购买模板。



6

一开始您会遇到麻烦,因为有些事情不会妨碍您。但是您必须要有耐心,并要进行大量练习。当我开始设计并回顾我4年前的工作时,简直不敢相信我做了这项工作。

您确实需要寻找其他出色的设计师作品。为此,您应该在Dribbble上跟随伟大的设计师。另外,非常非常重要的一点是要定期在css画廊网站(例如www.minimalistgallery.com或其他网站)上观看最新的设计。

祝一切顺利!!!


2
嗨,您在本网站上的所有帖子均链接到相同的外部网站,即“简约图库”。众所周知,人们可能会认为这种事情看起来有些垃圾。
user568458 2013年


2

这可能是一个一般性的提示,但对我来说,这确实可以告诉某人是否是一个好的设计师:

空格,边距和对齐方式。

它们是创建光滑,专业外观设计的关键。它们创造了某种“呼吸空间”,并且可以真正确定您的设计是否看起来很整齐。就像字体一样,您要坚持一定的设置边距/空格以保持布局整洁。

为了跟踪这样的事情,使用网格或设计指南可能会非常有用。


0

您的问题就像“作为一名设计师,我不断发现自己需要App编程的基础知识”。它们都是广阔的区域,彼此重叠的区域彼此重叠。好消息:您有兴趣并了解它们的重要性。坏消息是:没有适当的课程或方法,就没有简单的方法来完全理解制作好的设计所需的时间。但是,对于第一步,这本书一定是一本不错的书,可以安全地开始构建有意义的视觉系统。

非设计师设计书

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.