delphi5开发人员指南_非设计人员的网页设计开发人员指南

delphi5开发人员指南

I created my first website as a school project when I was 14. The task was simple: create a very basic site including some text, images, and a table. My usual attitude to school projects was to completely forget about them and later come up with some last-minute solution. But, this time, I went nuts.

我14岁那年就创建了第一个网站，当时它是一个学校项目。任务很简单：创建一个非常基本的网站，其中包含一些文本，图像和表格。我对学校项目的通常态度是完全忘记它们，然后提出最后的解决方案。但是，这次，我疯了。

Since my first website, I’ve always prioritized making stuff look good. Admit it or not, people judge things based on looks. If what you make looks good, like you know what you’re doing, people are going to trust it more. That’s just how things are.

自从我的第一个网站以来，我一直优先考虑使外观漂亮。承认与否，人们根据外观来判断事物。如果您的产品看起来不错，就像您知道自己在做什么，人们就会更加信任它。事情就是这样。

Over years of making side projects, I shifted my focus more and more on developing my design skills rather than just perfecting my programming. You see, being an algorithm writing monstrum gets you just so far. While pursuing the dream of bootstrapping a profitable side project, you’ll have to do a lot of different jobs. Being a designer is one of them. Just like Cross-fit athletes, solo-founders have to be well rounded to perform well.

经过多年的辅助项目，我越来越专注于发展自己的设计技能，而不仅仅是完善自己的编程。您会发现，作为编写monstrum的算法，您到现在为止。在追求启动一个有利可图的附带项目的梦想时，您将不得不做很多不同的工作。成为设计师就是其中之一。就像运动量来找到运动员一样，独奏创始人也必须四舍五入才能发挥出色。

A superb design isn’t necessarily the one with the most Dribbble upvotes. It’s the one you won’t notice in the first place. It’s a perfect balance of “your grandma could do that” and “wow, that’s damn nice”. Design can be your competitive advantage or the nail in the coffin.

出色的设计并不一定是Dribbble投票最多的设计。首先是您不会注意到的那个。 “您的祖母可以做到”和“哇，真是太好了”之间达到了完美的平衡。设计可以是您的竞争优势，也可以是棺材上的钉子。

与人才无关 (It’s not about talent)

When I was younger, I played a lot of Minecraft. I saw all these awesome buildings people made. But when I made something, it looked like a box. Ugly and with no style. How do you even make something nice in Minecraft, right?

小时候，我玩过很多《我的世界》。我看到了所有这些令人敬畏的建筑物。但是当我做某事时，它看起来像一个盒子。丑陋，没有风格。您甚至如何在Minecraft中做点好事，对吧？

So, I found a guy on YouTube and built an exact copy of what he built. A few weeks later, I had developed my own style and could build on my own. Suddenly, my creations didn’t look like crap. Heck, I even won a building contest.

因此，我在YouTube上找到了一个人，并为其制作了一个精确的副本。几周后，我发展了自己的风格，可以自己建立。突然之间，我的作品看起来像胡扯。哎呀，我什至赢得了建筑比赛。

Design is a skill, and like any other skill, it can be learned.

设计是一项技能，可以像其他任何技能一样学习。

为工作选择合适的工具 (Picking the right tool for the job)

In programming, you can use Notepad and write an app that’s as good as if it were written in a full-blown IDE…though your life might be pretty miserable doing it and it will probably take noticeably longer. In the world of web design, MS Paint would take the role of Notepad, and like Notepad, few people actually choose to design with it… I hope.

在编程中，您可以使用记事本来编写与用成熟的IDE编写的应用程序一样好的应用程序……尽管这样做可能会很痛苦，并且可能会花费更长的时间。在网页设计领域，MS Paint将承担记事本的角色，像记事本一样，很少有人选择使用它进行设计……我希望。

Web上最受欢迎的设计工具是： (The most popular design tools for the web are:)

Sketch, a MacOS only tool that, similar to React, seems to be hard-coded in every job listing. $99/year.
Sketch是MacOS唯一的工具，类似于React，似乎在每个工作清单中都经过硬编码。每年$ 99美元。
Adobe XD, a free to use, cross-platform tool that takes the role of Vue. It has a smaller community, but it’s very easy to get started.
Adobe XD ，这是一种免费使用的跨平台工具，具有Vue的作用。它的社区较小，但是入门非常容易。
Adobe Photoshop, the swiss knife for any design task known by everyone. It’s taken the spot of…you guessed it, jQuery. $9.99/mo.
Adobe Photoshop ，这是众所周知的任何设计任务的瑞士刀。它成为了……您猜对了，jQuery。 $ 9.99 /月。

There’s almost no difference whether you use Sublime or VS code to write apps. Or whether you use React or Vue for the frontend. It’s just a matter of preference. The same goes for design tools, as each one has its pros and cons.

使用Sublime或VS代码编写应用程序几乎没有区别。还是您将React或Vue用于前端。这只是一个偏好问题。设计工具也是如此，因为每个工具都有其优缺点。

I use Adobe XD. The main reason for me is that it’s cross-platform, so I’m not held hostage by the Apple ecosystem. It’s also backed by Adobe, so it’s gonna be here for a while. The best thing for newcomers is that, since May 2018, Adobe XD is free to use with just a few limitations (that you’re unlikely to stumble upon anyway).

我使用Adobe XD。对我而言，主要原因是它是跨平台的，因此我不被Apple生态系统束缚。它也得到了Adobe的支持，因此将会在这里待一段时间。对于新手来说最好的是，自2018年5月以来，Adobe XD可以免费使用，但有一些限制(无论如何您都不会偶然发现)。

调整心态 (Adjusting your mindset)

The biggest challenge coming to the web design world for me was adjusting my mindset. I was used to coming up with the design as I coded the website. Everything had an order. The flow was from left to right and from top to bottom. The fact is, this approach makes you a worse designer.

对我来说，Web设计领域面临的最大挑战是调整心态。在编写网站代码时，我习惯了设计。一切都有秩序。流从左到右，从上到下。事实是，这种方法使您成为更糟糕的设计师。

Design tools are chaotic because they force you to design like every element is positioned absolutely. Embrace this change. It’ll give you the freedom to change things quickly and makes experimenting easy. And that is essential, because design is an ongoing process. It’s expected that you’ll be changing things a lot before you get a great result.

设计工具之所以混乱，是因为它们迫使您进行设计，就像每个元素都位于绝对位置一样。拥抱这个变化。它使您可以自由地快速更改事物并简化实验。这很重要，因为设计是一个持续的过程。可以预料，在获得良好结果之前，您将进行很多更改。

学习工具 (Learning the tools)

When coding, you use HTML elements like divs, spans, and inputs and let the browser render them into something visual. With design tools, you have the power to skip the middleman and use visual elements like shapes and text directly.

编码时，您使用诸如div，span和input之类HTML元素，并让浏览器将它们呈现为视觉效果。使用设计工具，您可以跳过中间人，直接使用视觉元素，例如形状和文本。

I picked the 4 most used design tools so you can spend less time learning and more time designing. That way, you can start practicing as soon as possible. Below, I’ll show you how they work and how to use them.

我选择了4种最常用的设计工具，因此您可以花更少的时间学习，而花更多的时间进行设计。这样，您可以尽快开始练习。下面，我将向您展示它们的工作方式和使用方法。

矩形工具 (Rectangle tool)

Rectangles are the most universal shape. You’ll find yourself using them all the time. Think of it as a div. It’s useful for all sorts of stuff, from creating text inputs to containers.

矩形是最通用的形状。您会发现自己一直在使用它们。将其视为div。从创建文本输入到容器，它对各种各样的东西都很有用。

文字工具(标签) (Text tool (label))

Text tool, as the title suggests, allows you to create text. It’s not that simple though, because the text tool has two states: one for single line text and the other one for multiple paragraphs. Fortunately, they’re extremely easy to learn to use correctly.

如标题所示，文本工具允许您创建文本。但是，它并不是那么简单，因为文本工具具有两种状态：一种用于单行文本，另一种用于多段。幸运的是，它们非常容易学习正确使用。

The first state is a single line text container that adjusts its size based on text size. It’s similar to a with the exception that it won’t wrap unless you make a line break. The benefit of this state is that it’ll automatically adjust the text box size based on line height and font size.

第一种状态是单行文本容器，可根据文本大小调整其大小。它与相似，不同之处在于除非您进行换行，否则它不会自动换行。这种状态的好处是，它将根据行高和字体大小自动调整文本框的大小。

To create it you simply click with the Text tool selected and write. As a rule of thumb, use this state for anything that doesn’t need a specific width and is a single line. For example, single line headlines and labels.

要创建它，您只需单击并选择“文本”工具并编写。通常，将此状态用于不需要特定宽度且仅一行的任何内容。例如，单行标题和标签。

文字工具(段落) (Text tool (paragraph))

The second state is a text container with a specific size that behaves like a with a specific width or inside a grid column. The benefit of this state is that you can control the text box size. To create a paragraph, you click with the text tool selected and hold to create a selection. As a rule of thumb, use this state for paragraphs and headlines on more than one line.

第二种状态是具有特定大小的文本容器，其行为类似于网格列内具有特定宽度的或。此状态的好处是您可以控制文本框的大小。要创建段落，请单击并选择文本工具，然后按住以创建选择。根据经验，此状态可用于多行上的段落和标题。

选择工具 (Select tool)

Move, resize, duplicate. This is the tool for that. Those pink lines show you the distance from surrounding elements. The blue lines help you get elements to align properly.

移动，调整大小，重复。这是用于此的工具。那些粉红色的线条表示您与周围元素的距离。蓝线帮助您获得正确对齐的元素。

线工具 (Line tool)

Sometimes a line is handy to make parts of design separate. That’s why the line tool is here. You could technically use rectangle tools instead, but hey, so the div could be used for anything.

有时一条线很方便，可以分开设计的各个部分。这就是线条工具在这里的原因。从技术上讲，您可以使用矩形工具，但是，嘿，因此div可以用于任何东西。

设计技巧和技巧 (Design tips and techniques)

布局 (Layout)

In web development, a layout is most commonly described as a header, menu, content, and footer. That’s a part of it, but a layout is more than that. It’s literally the way that all the elements are laid out.

在Web开发中，布局通常被描述为页眉，菜单，内容和页脚。这是其中的一部分，但布局远远不止于此。从字面上看，这是所有元素的布局方式。

For example, when I was designing the project information for Sidemail, I distributed elements inside of a card evenly which makes it feel more complete and looks cleaner.

例如，当我为Sidemail设计项目信息时，我将元素均匀分布在卡片内，这使卡片感觉更完整且看起来更干净。

色彩 (Colors)

To help you find the perfect color for your next project, consider keeping in mind the psychology of colors (colorpsychology.org). A helpful tool to find the perfect color combination based on your primary color is Paletton.

为了帮助您为下一个项目找到理想的色彩，请考虑牢记色彩的心理( colorpsychology.org )。 Paletton是一个根据您的原色找到理想颜色组合的有用工具。

Use shades of primary colors and text colors to create a visual hierarchy. Try darker or lighter shades for your text when using a colored background.

使用原色和文本颜色的阴影创建视觉层次。使用彩色背景时，请为您的文本尝试更深或更浅的阴影。

版式 (Typography)

Typeface largely affects the branding of your project, so choose wisely. Premium typefaces tend to look better than those on Google Fonts, but when you’re just starting out, don’t buy one. Even on Google Fonts, there are some hidden gems.

字体在很大程度上影响您项目的品牌，因此请明智选择。优质字体看起来比Google字体更好，但是当您刚入门时，请勿购买。即使在Google字体上，也有一些隐藏的宝石。

A trick that I very often use to visually break up text is to make labels uppercase with larger letter spacing. Uppercase text is symmetrical and looks good from a visual standpoint, but don’t overuse it because it’s much harder to read.

我经常在视觉上分解文本的一种技巧是使标签的大写字母具有较大的字母间距。大写文本是对称的，从视觉角度看看起来不错，但不要过度使用它，因为它很难阅读。

设计主页(或登录页面) (Designing a homepage (or a landing page))

I always try to avoid the temptation to design trendy elements and then cram my message into it. Rather, I come up with benefits (not features), put them into a story, and tell that story by a visually appealing page.

我总是尽量避免设计时髦元素的诱惑，然后将我的信息塞进去。相反，我想出了一些好处(而不是功能)，将它们放入故事中，并通过一个视觉上引人入胜的页面来讲述该故事。

After I establish what I want to say, I usually look for some inspiration. A great resource for that is land-book.com, a vast directory of great looking landing pages that people can vote on. Another great page with design inspiration is interfaces.pro where you can filter by categories like pricing, 404, or about us. I just browse through until I find enough sites that I like and match my desired style.

确定要说的内容后，通常会寻找一些灵感。理想的资源是land-book.com ，这是一个庞大的目录，人们可以在上面精美的登陆页面进行投票。另一个具有设计灵感的页面是interfaces.pro ，您可以在其中按价格，404或关于我们的类别进行过滤。我只是浏览直到找到足够的网站来满足自己的风格。

The hard part is putting it all together. Unfortunately, there’s no shortcut. You just have to iterate a lot until you get a result you’re happy with.

困难的部分是将它们放在一起。不幸的是，没有捷径可走。您只需要进行很多迭代，直到获得满意的结果。

You may find yourself wondering whether it’s normal that a design you were completely happy with a week ago suddenly feels not good enough or even ugly today. The answer is that it’s perfectly normal and actually a good thing. It’s essentially because you grow, learn, and become better. Yesterday’s challenge is not so challenging today. Keep this in mind so you don’t get stuck in a rat race.

您可能会想知道，一周前完全满意的设计是否突然变得不够好，甚至今天变得丑陋，这是否正常？答案是，这完全正常，实际上是一件好事。这主要是因为您成长，学习并变得更好。昨天的挑战今天并不那么具有挑战性。请记住这一点，这样您就不会陷入老鼠赛跑。

外卖： (Takeaways:)

Unique typeface makes a huge difference
独特的字体带来巨大变化
Graphics are very important, try to use at least some illustration or images
图形非常重要，请尝试至少使用一些插图或图像
Get visual importance right by using multiple shades of colors. Text and primary colors aren’t enough.
通过使用多种阴影来正确获得视觉上的重要性。文字和原色还不够。
Don’t use containers that are too wide — around 1100 px is wide enough
不要使用太宽的容器-大约1100像素就足够了
Embrace the negative space
拥抱负面空间
Talk about benefits, not features
谈论好处而不是功能
Look around for inspiration if you get stuck
如果遇到困难，请环顾四周寻找灵感

设计Web应用程序(或仪表板) (Designing a web app (or a dashboard))

As with designing a landing page, don’t jump straight into designing. This time, you’re not trying to tell a story. Instead, the goal is ease of use. Grab a pen and paper and make a plan of how your app should work, what should depend on what, and how to navigate easily.

与设计目标网页一样，不要直接进入设计。这次，您不想讲一个故事。相反，目标是易于使用。拿笔和纸，制定应用程序应如何工作，应取决于什么的内容以及如何轻松导航的计划。

Make some sketches or wire-frames if necessary. Do a proper competitor design inspection to see for yourself what’s lacking and can be done better, or possibly even turned into a competitive advantage. Sometimes, it’s better to take a break before making plans on paper and designing.

如有必要，请绘制一些草图或线框。进行适当的竞争对手设计检查，以自己了解缺少的东西，可以做得更好，甚至有可能变成竞争优势。有时，最好先休息一下，然后再制定纸上计划和进行设计。

The best advice I can give that’s not use case specific is to choose a proper page layout. Generally, all web apps use two different page layouts based on the app’s purpose: fixed width container or fluid container that fills your entire screen.

我可以提供的最佳建议(不是用例特定)是选择适当的页面布局。通常，所有Web应用程序都会根据应用程序的用途使用两种不同的页面布局：固定宽度的容器或填充整个屏幕的流体容器。

固定容器 (Fixed container)

I prefer the fixed container, because it’s much easier to focus on a tight area as it prevents unnecessary eye movement. Fixed container apps also tend to be cleaner looking and less overwhelming for new users. However, because of the smaller width, fixed container apps are harder to design.

我更喜欢固定容器，因为这样可以更容易地集中在狭窄的区域，因为它可以防止不必要的眼睛移动。固定容器应用程序看上去也更干净，对新用户而言不那么令人头疼。但是，由于宽度较小，固定容器应用程序更难设计。

Examples: Twitter, Buffer, DigitalOcean, Netlify, GitHub

示例： Twitter ， Buffer ， DigitalOcean ， Netlify ， GitHub

液体容器 (Fluid container)

Fluid container apps are a great fit for chat apps, spreadsheet apps, and other apps where more stuff on a screen is essential. But be aware that loads of data on a screen can get overwhelming.

流体容器应用非常适合聊天应用，电子表格应用和其他需要在屏幕上显示更多内容的应用。但是请注意，屏幕上的数据负载可能会让人不知所措。

Examples: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

示例： Slack ，对讲机， Hotjar ， Google表格， Trello ， Spotify

It’s important to pick the right container, because your whole page layout will depend on it and changing it later is a lot of work. Each project is unique and calls for unique solutions, so don’t be afraid to experiment!

选择正确的容器很重要，因为整个页面的布局将取决于它，以后进行更改是一项繁重的工作。每个项目都是独特的，需要独特的解决方案，所以不要害怕尝试！

外卖： (Takeaways:)

Keep it simple
把事情简单化
Use readable typeface
使用可读的字体
Use visual hierarchy when displaying lots of data
显示大量数据时使用视觉层次结构
Take advantage of competitor’s poor design choices
利用竞争对手的不良设计选择

结语 (Wrapping up)

Remember, design can be your competitive advantage — so use it and make something awesome.

请记住，设计可以成为您的竞争优势-因此，请使用它并做出令人赞叹的作品。

Kick start your designing journey by getting an Adobe XD template I made for my newest project’s landing page. Simply subscribe to my brand new email list and it’ll land in your mailbox.

通过获取我为最新项目的着陆页制作的Adobe XD模板，开始您的设计旅程。只需订阅我全新的电子邮件列表，它将进入您的邮箱。

Also, you’ll be the first to get notified about my next post where I’ll share 69 days of progress I made on Sidemail — a SaaS project I work on. It’ll include things like subscriber counts, site visits, spendings, and design drafts. It should go without saying, but I guarantee absolutely no spam. I don’t even have time for that crap.

另外，您将第一个收到有关我的下一个帖子的通知，我将分享在Sidemail (我从事的SaaS项目)中取得的69天的进度。其中将包括订户数量，站点访问，支出和设计草案之类的内容。不用说，但是我保证绝对不会垃圾邮件。我什至没有时间做这些废话。

My Twitter DMs are open so if you get stuck making your designs or have some further questions, feel free to hit me up.

我的Twitter DM是开放的，因此，如果您在设计时遇到困难或有其他疑问，请随时联系我。