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是開放的，因此，如果您在設計時遇到困難或有其他疑問，請隨時聯系我。