HTML study and web-design

The task^[1] was to make a website which will be used as a storage for personal protocols. As I wanted to have a good-looking page, some goals were set. The site is still under construction so some changes may be implented in further time and this page will be completed with updates.

Goals

• Consider inner structure of the site;
• imagine a good-looking UI design and sketch it down on paper;
• suppose required web-coding skills;
• develop the code.

Inner structure

According to the task the site should include following pages: main page, term page, page with personal information. Also there should be pages of each work. So I developed the inner structure of personal site (fig. 1).

Fig. 1. Site file tree, n=[1, ..., 12].

UI design

The UI comes from site purposes and individual preferences. So that I builded up a list with brief description of each point:

• minimalistic;
• colored;
• easily adapting to any screen;
• up-to-date looking.

Trying to implement all this ideas I was inspired by Google Material Design^[2]. Firstly, I came up with idea of cards - each structure piece of content must be placed into contrasting with background block, divided from others. Secondly, blocks should be placed in such a way that it would be able to adapt them to any screen with few code lines. Thirdly, some elements user interacts with should look and act like they supposed to do that.

These ideas have evolved into following principles:

• there are a header with navigation bar and a main article block;
• both of them are placed into one vertical line and have got shadows;
• nav bar must contain main sections of the site and also provide access to each term via dropdown menu;
• there is a footer at the bottom of the page, which is as wide as screen and sticked to the corner;
• all active links should be accentuated with color and also change it when hovered;
• special links which provide "obligatory" UI interaction must be specially emphasised, looking and acting like buttons;
• links to each protocol on term page should be placed into same blocks with squared images and looking less then article block;
• the color scheme consists of green shades.

Required skills

On the table 1 you can observe some required code elements used for bring design principles from above to life.

Developing the code

Source code of the page can be observed in any browser by choosing an option "view source code of the page" or something like that in the mouse right-click menu. Apparently, I present some source code pieces for easy access (and for training the usage of "pre" tag).

header li a {
    text-decoration: none;
    color: #358E27;
    display: inline-block;
    text-align: center;
    padding: 10px 10px;
}
header li a:hover {
    color: #B5C9AF;
}

.link-button {
    color: white;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 5px 5px;
    text-decoration: none;
    border-style: solid;
    border-radius: 5px;
    border-color:#87a37d;
    background-color: #87a37d;
    box-shadow: 0 0 10px gray;
    margin-bottom: 5px;
    margin-top: 15px;
    font-family: "Rubik", "Open Sans";
    }
.link-button:hover {
    transform: scale(1.05);
    }
.link-button:active {
    transform: scale(1);
    box-shadow: none;
    }

Hex colors

In HTML a color can be specified using a hexadecimal value in the form #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255)^[6] from the least bright to the most one. In the table 2 you can observe base clear colors and equal mixtures of them.

As I wanted a more sophisticated pallete, I was looking for colors on my eye.

The result and future plans

Well, now you can observe an almost completed web-page:) Surely, there are some points I'd like to improve in further time:

• layout on mobile devices;
• positioning of incuts in articles;
• code purity;
• table and preformatted text layout;
• other minor problems.

There is no need in complicated code to do this list but time and will. Also, I'd possibly like to insert some scripts if needed but that's unlikely to happen. Perhabs I'll discover some sapid tricks in future but currently this site is well-done and I am some kind proud of it.

References and notes

1. ↑ Task 4 on kodomo.fbb.msu.ru;
2. ↑ Material Design guidelines on material.google.com;
3. ↑ Dropdown menu template on w3schools.com;
4. ↑ Sticky footer code examples on css-tricks.com;
5. ↑ Semi-randomized color pallete on coolors.co;
6. ↑ Full article on w3schools.com.