4 minutes to learn the page style [translation]

image description

Let's say you want to share a product on your site, or a portfolio, or just an inspiration. Before you publish to the web, you want it to look attractive, professional, or at least have to look like something else.

So you now what?

text

The purpose is to enhance the design of forms of content to which it applies. It appears to be obvious, but the content is the main element of a website, it should not expect to be adjusted after the release.
Content writing, just as you are currently reading the article, make up more than 90% of the web page. Add to this text style will have a long way to go.
Let us assume that you have done what you want to publish, and have created an empty style.cssfile, what is the first rule you can write?

Center

Long text difficult to resolve, and therefore difficult to read. Set the character per line limit, can greatly improve the readability and attractiveness of large amounts of text.

body {
  margin: 0 auto;
  max-width: 50em;
}

After adding a style to a text container, add the style these days is the text itself?

Fonts

The browser's default font Times, it can look unattractive (mainly because it is "no style" font). Switching to a sans serif font, such Helveticaor Arialcan greatly improve the readability of your web pages.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

If you insist on using serif, you can try Georgia.
When we make the text more attractive, but also need to make it more readable.

interval

When users find a page 崩坏of time, usually for both 间距problems. By providing proper spacing in the surrounding text and text can increase the attractiveness of the page.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

Although so far layout has been greatly improved, but let's add some more details of the deal.

Color and Contrast

Black text on a white background look more garish. Text selection is a little softer than black, make the page easier to read comfortably.

body {
  color: #555;
}

In order to maintain a good 对比度, let us 重要choose a darker shadow text.

h1,
h2,
strong {
  color: #333;
}

Although most of the pages on the vision has improved, but some elements still seemed out of place, such as code segment.

balance

Just need some additional adjustments to balance the page:

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

At this point, you might want your page to stand out, to make it more personal.

main color tone

Most have a brand 主色调, as a visual tone. On a Web page, the main colors can be used to emphasize interactive elements, such as 链接.

a {
  color: #e81c4f;
}

But in order to maintain balance / coordination, we also need some extra color.

Secondary color

Main colors can be used to supplement the more subtle tones for borders, backgrounds, and even body.

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

The tone has changed, why not change the shape together / font ...

Custom Fonts

Since the text is the main content of the page, use 自定义字体can make the page more compelling.
When you can embed your own page or use similar fonts Typekit online service, let us use the free Google FontRoboto :

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

After highlighting your personality by customizing fonts, you want more colorful pages and how to do it?

Spongebob rainbow meme saying 'Images'

Images and icons can be used as decorations to support your content, you can also play an active part in the information you want to convey.

Let Unsplash pick a nice background image to beautify header.

header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

Add tologo

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

Let us take this opportunity to improve the text style.

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

Look!

According to the basic principles of web design, we designed a decent page in just minutes. Only the last thing it ...

Share the love!

GitHub download link

Facebook Share links

Twitter share links

If you want to learn more through web design, see MarkSheet , my free HTML and CSS guidelines.
Or you may want to immediately start trying web design, try Bulma , this is my CSS-based framework of Flexbox.

Summary - Web Design in 4 minutes

This article describes the basic principles of design and web design process, step by step decomposition process, so that people just getting started with web design, you can also quickly find the feeling, I hope this article will know what to do in your new to design web pages when, to give you some help.

Thanks for reading!

This article translated 2016 "Web Design in 4 minutes" - Jeremy Thomas , the first translation of the original text at the same time there is understanding of the changes is limited, welcomes comments.
This article is reproduced from: public to translate
Translator: Shery
link: http://www.zcfy.cc/article/1237
Original: http://jgthms.com/web-design-in-4-minutes/?utm_source=tuicool&utm_medium = referral # share