来自编程背景,我应该从哪里开始学习网页设计?

平面设计 网站设计 界面设计 资源推荐 教育
2022-02-19 00:09:38

我是一名 Web 开发人员,主要从事前端开发工作。我的主要领域是 HTML5、CSS3 和 Flash ActionScript 3.0。

在伊朗,团队合作对大多数人来说毫无意义,但我认为这是我们工作中最重要的方面,尤其是在网页设计方面。

我在平面设计和 UI 设计方面的技能很差。我总是必须与我的网站的平面设计师合作。他们通常是优秀和熟练的设计师。但他们都是印刷设计师,不幸的是,他们对网络和网络设计一无所知。

例如,我经常与其中一位设计师合作,他是一位伟大的设计师,他的标志和海报设计赢得了几个奖项。然而,他对网络一无所知,我大部分时间都花在向他解释网络上的事情是如何工作的,即他应该以什么尺寸工作,使用像素而不是厘米,等等......毕竟他是一个印刷设计师,而不是网页设计师。他们通常认为一切都是静止的和恒定的,而不是运动的。

所以解决这个问题的最好方法是提高我在图形设计方面的技能。我只是希望能够为我的网站设计好的布局、选择好的颜色等等。我不想设计插图和做繁重的图形工作。只需设计没有 Photoshop 插图的网站,如海报等。

你为你的图形作品做了什么,如果你自己做,你建议我读哪些书或参考资料?我应该从哪里开始?

1个回答

这是我发布的类似堆栈溢出问题的答案。感谢您的提醒。

在大学攻读计算机科学/艺术双专业时,我可能对此有独特的看法。听起来您实际上并没有成为一名平面设计师的雄心,而是希望能够自己构建网站而不会让它们看起来像垃圾。一个令人钦佩的目标 :) 没有认真的动力,也没有潜在的艺术能力,你永远不会成为一名平面设计师。但不要害怕!你不必是。仅使用一些基本规则,您就可以走得很远。

  1. 建立良好的视觉层次。这是20,000英尺的东西。你的导航在哪里?你的内容在哪里?你有关于你在哪里以及你可以去哪里的迹象吗?始终牢记人们阅读页面的方式。从左上到右下表示某事的重要性。较大的字体比较小的字体更重要。这是常识,但它有很大的不同。
  2. 白色空间。留白是一种奢侈,不要急于放弃。不要把所有东西都挤在尽可能小的空间里。空白有助于您将信息组合在一起以便于阅读,并且还可以使设计看起来不那么压倒性。
  3. 注意一致性和变化。一致性对于使网站看起来“设计”而不是拼凑在一起非常重要。但不要走得太远。一致性并不意味着一切都是一样的。页面上没有一点变化,一切都融合在一起。因此,例如,您需要确保标题字体(不一定是字体系列,而是大小、重量、颜色等)和段落字体之间存在差异。但是您必须保持一致,即某个级别的每个标题都是相同的。而且您不希望使用太多不同的字体和大小,否则它看起来太忙了。这就是 css 令人惊叹的地方。
  4. 颜色。颜色,我认为是大多数非设计师所苦苦挣扎的额外触感。可能值得学习一点颜色理论来了解哪些颜色可以协同工作,但这里有一些提示。把它想象成装饰房间。
    • 不要使用太多颜色,否则你的房间会看起来像狂欢节。与网页相同。选择 2 种有效的颜色,只需更改色调和色调即可获得更多颜色。这将设置一个主题。
    • 使用柔和或中性的颜色。颜色的面积越大,它应该越柔和。我所说的柔和是指较轻且不那么主要。想象一个房间的墙壁被漆成大胆的樱桃红。吓人。鲜艳的颜色非常适合吸引眼球,并且可以在适当的时候以较小的剂量使用。就像在明亮的房间里有一个较暗的装饰。它可以在链接或边界上很好地工作。
    • 像空白一样,请确保您决定了基本背景颜色。这变成了你真正看不到的颜色,你的头脑只是把它淡化到背景中。这通常是白色的,但也可以稍微着色或着色。大量使用它。它创造了喘息的空间,并形成了一个很好的可读性表面。有些设计使用较深的颜色作为背景,但我会把它留给专业人士。如果您不使用白色作为这种颜色,那么白色将成为您确实看到的颜色。尝试遵循与获得更鲜艳颜色相同的规则,因为它将是屏幕上最亮的颜色。

除了这个列表之外,这实际上只是一个实践问题。在您工作时,将设计展示给其他人并听取他们的意见。查看其他设计并尝试将您喜欢的东西融入您的设计中。只记得慢慢开始。直到最后你都不需要花哨的东西。在您浏览完列表并且它看起来不错但可能有点简单之后,您可以添加一些额外的东西。这里有一些圆角,那里有一个标志,很快它看起来可能只是由设计师完成的。

请记住,内容为王。您不是为设计组合创建站点,因此所有图形设计实际上只是以易于阅读、导航和赏心悦目的方式将内容提供给用户。一个好的设计是用户甚至没有注意到的,因为如果他们注意到它,它可能会妨碍他们。