Lofter Light bo template design

In charge of lofter template design work has some time, has not been able to write a summary, take this opportunity to write some text for everyone to watch!

Perhaps everyone listens to a few words: "If the traditional blog metaphor for a book, Weibo is a tabloid, and light blog is like a magazine." Compared with traditional blogs, the way of light blogging is more concise.

Personally feel that Lofter is a useful tool first, then it is possible to become a good community. Lofter must be simple to use, have a concise release operation Port (computer page and mobile client), and exquisite display space (blog template and Timeline page); Yes, exquisite display space--blog templates.

First, the importance of the template

First share I and Lofter product planning Zhang exchange, he said a word: "A metaphor, if a product is a woman, how to love this woman?" You first look at her first impression, this girl is very beautiful, you are ready, you have the desire to associate with her, You have the tolerance of her small shortcomings of the patience, get along, found her personality is also good and connotation, so you thoroughly fell in love with her. It's perceptual, but I think he's right about that, isn't he?

From the user's point of view, the blog is for users to record content display content, templates do a good job for the blogger content plus points, like a set of satisfied with the new clothes, wear in the body mood exceptionally cheerful. The opposite is terrible! So templates are important for the entire product.

It often acts as a façade, I think a lot of users are not registered before they log in? Well, yes! There is a new user directly to the personal homepage, directly facing the template of the blog, this time to face the first user, personal templates like the product of the façade signs, will give users a first impression, Love does not love her to see the charm of the template!

As for the importance of templates, let me say a few words about the characteristics of the template.

Second, Lofter template features

It has four kinds of content, namely: Picture, music, text, video four kinds.

1, display picture template: A, is usually to meet the photographic user, the picture shows the area to be big enough, cool enough B, template first screen can see more than a picture C, background to dark, highlighting the current picture D, border design to make the picture more prominent, or to make the picture more exquisite E,

2, show the music template: A, make the impression of the album cover B, the appearance of musical symbols or music albums C, CD appearance D, the texture of the vinyl disc e, player elements

3, the display text template: A, stationery texture B, note appearance C, typesetting easy to read D, make a magazine E, have the book effect F, desk shadow, laid-back atmosphere, revealing the sun, petty bourgeoisie feeling

4, display video template: A, the appearance of the Player B, film texture background C, the background to Gray, highlighting the content D, hover animation effect E, film elements

Remark: Welcome to the place where you have not mentioned

Third, the Lofter template design process.

The above mentioned four types of templates, here I do not take one of the examples, choose a last November to do a horizontal and to show the main picture of the template, with you talk about the design process.

When the product planning told me Lofter there are a number of vertically arranged templates, that is, loading the displayed template from top to bottom. Hope that next can do some horizontal load display reading template, but also to show the main picture.

After receiving the task, I usually give this design set some keynote: in order to meet the product temperament, I choose Gray, there is also the reason is that gray when the background can adapt to a variety of complex colors. Just like Photoshop's background color is gray, of course, its lightness is elegant, I think is to adapt to a variety of colors and design. This argument will not be enlarged here. In addition, in order to highlight the picture, the lightness cannot be too bright. and the inner page to show the larger picture, in order to meet the needs of the friends. Be cool!

Visual affective Keywords: smooth, comfortable, obvious, the key words should not be set too many, generally I think pick three to five have been carefully selected the key words can be, this view is very subjective, not absolute. But since I think it's a lot more, you are difficult to put all the keywords are arranged to your work, and many more later, it is easy to appear synonyms, there are times to set more, but also found that there are antonyms, like "leisure" "serious", you want to show in the picture of leisure, but also the performance of serious. Do not good, like moving stones to their feet, then do not lose money on the dead!

Before doing it, suddenly remembered that before this lofter did an activity to call: "Home to You". The process of the manuscript has a lot of Zhang is horizontal version, I think it might be helpful for me to design a landscape template!

(figure I) this picture with horizontal parallel typesetting, so that the picture has a quiet and smooth feeling, if changed to template, the login box can be changed to the part: personal information and templates commonly used functions. But the arrangement in this position is too centered, will rob the content of the eyeball. In addition, it is Dantu, the template home page is more than the picture shown, this also needs to be modified.

(figure II) This is also Dantu, see this, imagine it is a row of pictures, from the right to the left to scroll load display will not be very handsome? In addition, the location of the login box can not be placed on the golden line, it will be very grab the content of the eyeball. It should be in the golden line again to the left of the place, but not in the Golden section of the right side, because that is already outside the screen.

(figure III) This also has a horizontal version, but the various aspects without figure I and figure two fit, do not do more consideration.

According to the above ideas, made the following blog template.

This template horizontal parallel scrolling let people have a smooth feeling, very few color use will not distract readers, there is comfort, a large area of white to make the content more obvious show in front of the reader.

Horizontal scrolling template, content display is not much, but very exquisite, the first piece of content, whether it is pictures, music, video, text, must be the same size module for typesetting design.

In addition, the layout of the picture, mainly with horizontal and vertical drawings, after testing, finally we chose the horizontal figure 100% width adaptation, the vertical chart uses 100% highly adapts the plan, such most horizontal graph can complete the rationale display, but the vertical picture puts in a horizontal module, two sides will appear the massive white, but the advantage is can display the picture completely.

Here the Red overlay area 1024x768px is considered for the minimum screen.

The inside page of the template to show the main picture, to meet the needs of friends.

Compared to other columns, this template has a stronger sense of stage center, visual focus, and browsing each image will become a focus, will not be interfered by other diagrams!

Dynamically scrolling through the template, mapping the concept of time trajectory, scroll left, back to the past, scroll right, come now, and will soon wear to the future. It has the advantage of recording time-sensitive experiences. Its module has a time indicator underneath it. Like to record the life of the people, reading up is like in the pursuit of their own life in the past, as if the trajectory of growth, warm your life!

In fact, in different forms of art, many times are advocating simplicity, because everyone knows, the creative place is how to choose!

Superficial talk, the shortcomings of the welcome everyone to shoot bricks!

This article address: http://uedc.163.com/9068.html