开发人员到设计师的道路：方法

作为一名希望成为设计师的开发人员，我对学习如何为网站，移动应用等创建一流的UI真的很感兴趣。但是，我对Photoshop或与设计相关的任何知识一无所知，我的主要技能是HTML和CSS 。

我应该从哪里开始？如何学习如何创建漂亮的网站和界面？

作为一名已经成为设计师的前开发人员，我有几点建议。首先，开始进行设计！如果有能力，请找到已经是UI / UX设计器的导师，然后开始在项目上与他们合作。我发现我实际从事项目工作并吸收了已经从事这项工作多年的人们的知识，比从阅读本书中学到的东西更多。

话虽如此，如果您确实想在UI / UX / etc上阅读，我将看一下这个出色的线程：必须阅读的用户界面书？我认为我个人最喜欢的是史蒂夫·克鲁格（Steve Krug）的《别让我思考》（Do n't Make Me Think）-但我相信您最终会找到自己喜欢的。

最后，关于Photoshop，Illustrator等工具，不用担心！最终，您会找到最适合您的工具。就个人而言，我从铅笔和纸的模型开始，然后根据项目，我将移至Balsamiq或Axure，有时甚至移至HTML和CSS，这实际上取决于项目的大小，范围等。最适合您 归根结底，最重要的是您清楚地传达对设计的愿景，而不是过去使用的工具。

我从事设计和开发工作已经很长时间了。但是，在早期，我花了更多的时间来学习编辑工具，而不是做出好的设计。可以找到很多教程来学习如何使用Photoshop，Illustrator，Fireworks等。但是具有一些设计感和方向很好。我仍然想变得更好。

我的灵感之一是一个叫Robby Ingebretsen的人，因为他在开发和设计方面都做得非常出色。他的网站位于nerdplusart.com。

我有几件事要看他的...

• 我的（必读）设计师必读书籍清单
• 开发人员设计基础
• 解决设计问题并取得成功的10种方法

正如他在所有演讲中所谈到的那样，我认为为您的设计寻找灵感至关重要。即使是最优秀的设计师，也不会简单地凭空提出这些东西。我的书签之一是“新图形设计”的集合，通常在印刷作品中看到。它们中的大多数非常简单，通常将印刷术本身用作主要图形元素。看起来很简单，仅浏览此类内容就可以帮助您塑造设计。

就像学习Visual Studio并不能使一个优秀的软件开发人员一样，仅仅学习Photoshop也不能使一个好的UI设计师成为学习者。

如果您想走正规路线，那么艺术/图形设计，人为因素，心理学，信息艺术/图书馆科学方面的教育都将很受关注。

非正式地，开始工作！;）最好的学习方法就是做到这一点。

我是一位经过正式培训的图形设计师，在工作中掌握了软件开发技能。我从纯粹的必要性开始。

就个人而言，我认为最好的UX团队成员是同时具备这两种技能的人。因此，我认为您的做法正确。

我将从阅读Watrall＆Siarto的“ Head First Web Design”一书（由O'Reilly出版）开始。这很废话，易于消化，并引导您完成设计师必须考虑的所有事项。这不是一项深入的研究，但是可以让您开始了解接下来需要回答哪些问题。它确实涵盖了导航，组织，布局，写作，颜色和可访问性。

另外，在您进入Photoshop，Adobe Illustrator或其他工具之前，请对设计进行线框设计，以确保所有内容都在正确的位置，然后再花额外的时间使外观漂亮。您可以在纸或白板上绘制草图，也可以使用工具。我发现此步骤中真正有用的工具是Balsamiq Mockups。它使您可以首先考虑站点的组织和布局。

从UX Designer到UI Developer，我实际上采取了相反的方法，但是，在选择Design时，建议您从以下两个方面开始：

我会看一本书“不要让我思考！” 史蒂夫·克鲁格（Steve Krug）撰写的书，我认为这是一本关于网络设计的好书。

有很多很棒的网络资源，包括SmashingMagazine.com和PSDTuts.com，它们提供了有关设计和网络技术的最新文章。

如果您特别希望成为UX设计人员，那么我还将了解HCI的原理。

祝你好运，设计愉快！

我真的很想学习如何为网站，移动应用程序等创建一流的UI。

好的，这是一个广泛的话题。您要创建“美丽”，“一流”，专业外观的网站，因此，您需要知道是什么使人们将某些事物视为“美丽”，对吗？幸运的是，美丽并不是真正的主观。

优美的视觉设计的关键之一就是和谐。

缺乏和谐是使您的设计显得业余的原因。

而且，最好的是视觉协调性归结于数学。这不是要有直觉。

就像其他人指出的那样，我建议您自己设计网站。尝试应用您学到的设计原理，而不要使用现成的框架。一开始可能很难，但是它将帮助您变得更好。

如何在网站设计中融入和谐

以下是一个实际示例，您现在可以做一个有趣的小练习。

我个人更喜欢的一种方法是使用模块化比例尺，以和谐的比例调整网站元素的大小。一个可以帮助您生成模块化秤的网站是：modulescale.com。

使用模块化秤的好处是，它可以像从秤中挑选数字一样容易地做出尺寸决定。

例如，让我们调整网站标题的大小（以传达视觉层次）。

假设我们有一个基于我选择的19px主体字体大小的模块化缩放比例（19px是因为它与我使用的字体看起来最好，但是您可以跳过此步骤并使用默认的16px大小）和比率1.412（否需要详细说明为什么我选择此比率。对于您的项目，任何比率都比没有比率要好。）：

看着它，我选择H1为2.815em，H2为1.994em，H3为1.412em。前三个数字大于正文字体大小。轻松自在，对吗？正文为1em（在我的情况下为19px）。然后，我将H4-H6的大小定为1em，并使用对比度（不同的字体粗细或样式）将它们与正文分开。

因此，请立即尝试：

1. 生成自己的模块化秤
2. 获取纯HTML文档（真实内容，请不要Lorem Ipsum）
3. 使用比例尺调整标题大小。
4. 然后尝试将比例尺用于其他尺寸决定（边距，填充等）

这只是朝着更好的设计迈出的一小步，但我希望它将对您有所帮助。

如果您认为这有帮助，则可以阅读我的其他7个技巧列表，这些技巧适用于了解HTML和CSS的初学者网站设计师

PS：您确实有很多阅读要做

就像其他人所说的那样，请阅读：

• 平面设计的元素，亚历山大·怀特（Alexander White）
• 罗伯特·布林赫斯特（Robert Bringhurst）的版式风格要素
• 史蒂夫·克鲁格（Steve Krug）不要让我思考

另外，这里还有大量在线资源，例如博客和社区，请关注：enboard.co/webdesign/