Top 5 Website Design Principles To Increase Comprehension
Are you diving into building your small business 网站 和 would appreciate knowing some design principles that get people to focus?
Incorporating these top 5 design principles into your 网站 will maximize readability 和 comprehension, make it look more professional 和 make you proud to give out your web address to potential clients, 的同事们, 和朋友!
现在，让manbetx手机登录界面谈正事吧!
1. 用空白组织你的内容
White space is one of the most underused 和 under-appreciated design tools. The term white space simply means the empty space around 和 between the copy, 图像, 以及你网站的视频.
Often people who are not designers will try to cram in as much content into a given space as possible. 错误地, they think they are using the space efficiently but really what they’re doing is making the 网站 visitor work harder to discern 和 underst和 the services being offered.
The amount of white space affects how your visitors perceive your professionalism-the more white space, 你就显得越可信. It also aids in the overall user-friendliness 和 according to Crazy Egg, white space around text 和 titles increases user comprehension by 20%! (博客.hubspot的.com)
Take the companies Google 和 Apple—both use a lot of white space. Google’s home page has two things on it: the logo 和 the search bar. 为什么? Because Google knows that anything else may distract the user from doing what they came t在这里 to do…search!
Apple products luxuriate in white space because they want you to focus all your attention on the product(s) you happen to be pining over.
白色空间帮助:
突出显示对操作的调用(按钮/链接)
make your 网站 look clean, tidy 和 appealing
you look organized, professional, 和 put together
create separation between services/products/sections
So how do you know if you’re maximizing the use of white space?
First, make sure you have plenty of white space in the margins. Create spaces around your headlines, subheads, paragraphs, 和 visuals. And keep your paragraphs on your homepage to 3–6 sentences max.
这个网页利用了两边的边距, between content blocks 和 utilizes a sidebar to organize the content 和 create the white space. 它还以小块显示内容.
If your 网站 has a high information density, you may have to incorporate more than just white space for the visual organization but start by using columns.
Web designers use a 12 column grid but three columns are a good start. If you switch column quantities be sure to align content along the column axis in the grid layout. We often use blocks of color behind the content to unify it if it doesn’t align with the section before 和/or after it.
2. 您的类型选择可以增加可读性
Typography is one of the quickest ways to communicate your br和 values 和 personality. People have subconscious associations when they see certain typefaces 和 often those connotations are based upon a font’s history 和 usage.
但看起来, 抛开个性和历史不谈, the most important consideration when choosing your typeface(s) is readability 和 the most readable fonts have a round, 打开或充足的 x坐标.
你问的到底是什么? 在字体设计, the x坐标 is the distance between the baseline 和 the mean line of lower-case letters in a typeface. Typically it is the height of the letter x in the font hence the term.
要考虑的可读类型族, 友好,平易近人, 使用像Poppins这样的字体, 蒙特塞拉特, 或Raleway.
现代、干净、专业? 选择Lato、Open Sans或PT Sans字体.
传统的、受人尊敬的,认真的? 选择Caslon, Garamond，或Cambria.
You want to use a typeface that is optimized for screens 和 comes in varied weights. Your content, headings, subheadings, 和 body text has to be legible on desktop, tablet, 和 phone.
Finally, I recommend using no more than 1–2 type families on your 网站. Any more 和 your site could look too complex.
有很多 字体配对网站 to guide you on what typography is best to tell your business story, that reflects your personality 和 most importantly, 是否会吸引你的目标市场. And if you want to geek out on type, check out this 网站.
Geomanist is the type family that we use for the 万博manbetx手机版登陆 br和. We chose Geomanist because it’s modern 和 has a round x坐标. It also comes in A LOT of weights which allows us to only use one type family simplifying design decisions.
3. 颜色的力量
Transit signs are designed to be read color first.
Colors give your 网站 visitors the first impression because the human brain sees color first, 然后形状, 然后是数字和文本.
Color evokes memories 和 emotions so choosing the right colors is important to your site’s usability, 长寿, 和转换. Did you know that 60-90% of buying decisions are based on color alone?
Use 不超过4个 colors on your 网站.
My rule concerning color is to not use more than four colors on your 网站-especially if you are not a designer. The reason is back to comprehension 和 focus. The less your visitor has to process visually, the more content they can absorb. And unless you work with color a lot, it can be overwhelming to you as well.
We often use a dark or deeper color for our headlines, a bold 和 bright color for our call to actions (buttons/links). And a complimentary mid tone that can be used in a myriad of ways.
让你的身体复制85-90%的黑色. It’s just a little softer on the eyes than 100% black against a lit white screen but dense enough to be read easily on a mobile device. 它看起来也更复杂. You’re reading 90% black text right now (hex code #414042).
Definitely refrain from using a color at a 50% screen or less for content. It’s difficult to read on mobile, especially for people over the age of 50.
您的web sight-literally……
When looking at a dark field of color, the pupil of the eye widens. Wider pupil = less sharp focus, with the edges of the type fuzzing out. When pupils are at maximum dilation, the human eye’s focus is at its worst. 这就是为什么在昏暗的光线下更难阅读.
When looking at a light page, the pupil narrows. Narrow pupil = sharper focus (which increases the edge contrast of type).
This is important because white or reversed out type has a 重要的 影响 在阅读理解. In 一项研究, the comprehension rate of reading long passages of white type against a black background was ZERO! 是的，你没看错. People didn’t underst和 what they had just read right after reading it.
This were the results of the study cited above.
SIDEBAR: This correlates to your preferred software interface too. When you chose a darker interface (Night Shift) you have LESS comprehension than if you chose the lighter interface. 也许是时候放松一下了!
Your selection of typography plays a role too. Only use reverse type out of a dark background when it’s a headline or callout 和 not too many words.
Bad color contrast is also considered to be bad web accessibility. This means people with vision impairment 和 color blindness (which affects an estimated 300 million people worldwide) are unable to discern between complementary colors or colors of similar value.
You can test your 网站’s colors 和 how they score for web accessibility 在这里. T在这里 is also a chrome 和 firefox extension.
If you’re not sure what colors go well together you can always use tints 和 shades of the same color to create harmonious balance on your site.
Use your br和 colors consistently throughout your site 和 marketing to make browsing enjoyable. 有 配色方案的发电机 来帮助你.
These five sets of colors are actual palettes that we’ve used on recent client 网站s. For an in-depth color explanation browse our 案例研究. manbetx手机登录界面应用规则 不超过4个 大多数时候是颜色.
4. 限制行长度并将内容分成块!
Do you ever go to a 网站 (on desktop) 和 see sentences that extend from left to right across the entire screen 和 think “ugh.” That’s because long lines are difficult to read 和 exhausting too.
The longest line in a column should be approximately 45–75 characters in length because the human eye begins to fatigue.
Our subconscious mind is energized when jumping to the next line. Every new line focuses the reader, but over the duration of the line, focus gradually wears off.
使用不同的线长 throughout your site’s copy so you can keep your user’s attention 和 interested in your content.
开门见山: People like to find what they want quickly 和 easily BUT don’t make lines too short either!
独立的内容: 把你的段落分成易于消化的小块. It will help the visitor navigate the different sections of your site.
Your average user will skim your copy—looking for the general idea of the text before moving on quickly to the next section. 不要指望人们阅读 不易扫描的内容. When you have large, walls of text on your 网站, people won’t read it.
Break up the copy on your 网站 into sections with headlines to grab the reader into the copy. 地方相关, related graphics next to each chunk to give your users something to look at while comprehending your content.
你有6.8 seconds to grab a 网站 visitor’s interest or they bounce! The human attention span is 2 seconds shorter than a goldfish! 我知道，我知道压力很大!
5. 是一致的
Now that you know about creating a 网站 that can keep your visitor focused, 只剩下一件事要做了建立你的网站 和维护它. As with most things in life, to be successful, 一致性是关键.
Stick with the same fonts 和 the same colors throughout your 网站, 社交媒体, 和品牌的抵押品. This will help maintain your br和, 和 make you recognizable 和 memorable.
我希望你找到了 Top 5 Website Design Principles To Increase Comprehension 有帮助的. And if you feel like your br和 or 网站 isn’t performing to its fullest potential 和 you’d like some expert assistance, 看看manbetx手机登录界面 发电计划, designed to help small business owners like you discover how to up-level your online presence.
把博客文章放在你的收件箱里