Recently came across a banner online advertising a yukoz blog design contest. The prize was a 27" iMac. I honestly wanted to pass by, but was lured by the fact that the work will be judged by a professional jury without the influence of social likes. How naive of me.
"What an evil Pinocchio for going there himself, " you say and … you’d be right!
Earlier I avoided contests in runet, but participated in foreign contests. For example, I won a contest with MSI. I hoped that it will succeed here too.
Next, I’ll give a couple of tips about these kinds of contests. Honestly speaking, I did not follow them myself. "I got into the contest on the last day, as soon as I passed the session, defended my term paper and all the tests.
Tip #1. DO NOT participate in design contests on Runet
As they say, freebies are sweet as salt. But freebies most often get the organizers of contests in runet.
Design is subjective, so you can easily find a reason to be rejected. For example, "Your blue isn’t orange enough" or "You didn’t play with the fonts enough." I once saw a contest writer on freelance writing to all the contestants, "Not hooked. I don’t know why." He was even further trolled by the PRO. The contest lasted 2 months and ended with nothing. The author got a lot of ideas and templates for free.
Tip #2. Evaluate the organizing company itself
Find out the history of the company’s contests. There may have been contests before, so there may be helpful online reviews of the company
Look at the company’s websites. If the websites show that the companies are so stingy that they are greedy to spend even on themselves, then the iMac is clearly not going to shine on you. It’s been shining in the face of an employee of their company for a long time.
Tip #3. Read information about the contest not only on the official contest page
Blogs, forums, information portals. Maybe somewhere there are already angry reviews about the contest and the company itself, or vice versa positive reviews. It’s not worth wasting your time if you know in advance that the prize went to "their people".
Tip #4. Learn more about jury members
Don’t buy into the phrase "Professional Jury." The jurors wrote about the importance of usability and correct accents in their comments on the conditions of this contest. After the reception was over, I took a nap and went through the jury’s sites :
- usabilitylab.ru (the name does not match the quality of the site)
And I realized that the usability scores would be very unexpected.
Tip #5. Read the comments on the contestants’ works
Don’t be lazy and read it. Unexpectedly, it may turn out that the IT department of the organizing company itself is involved in the contest in addition to you. As one of my acquaintances says, "It’s a miracle".
Eh, if I could have at least guessed that and read the comments on the very first entries, I definitely wouldn’t have participated. I couldn’t even think that someone on the staff would be so stupid as to post it under their own. Turns out there’s a whole gang of uCoz under their own and made up names.
Yes, I know this is Captain Hindsight style advice. But maybe it will open someone new’s eyes. I wish you fair contests.
The following are some of the works of the contestants. You don’t have to read this part. I will, however, give some comments and some may be useful for you if you create an interface or even design an abstract.
Designs discussion The task of the contest was to draw a design :
- Blog homepage blog.ucoz.ru
- Post page with comments
- Popup user profile page (680×350 pixels)
- UI design elements (add/respond to comment window, button style, etc.)
Only the main pages were published, for the most part.
Horrible source (actually the page is 3 times as long):
There were over 170 entries in total. As a result we published two lists: semi-finalists (27) and finalists (21)
Almost all of the works in the entry are inserted at full size, that is, you can open in a new tab to view them at 100% scale
At the top of the list are the most "pearls" from the semifinalists :
Check out the semifinalists’ pearls
This is probably the best way anyone has ever made fun of Jonathan Ive. The author introduced himself as Apple’s chief designer and told me how cool everything was. I don’t know how this work got into the contest. Half of the interface elements are missing altogether.
The average word length in Russian is longer than in English. That is why you should not use text off formatting (especially in narrow columns). You get very "liquid" lines and noticeable "corridors" and uneven gaps between words.
Probably a yukoz worker. No 70% of the interface elements, but a semifinalist.
The inexperienced user will be confused by this design for a couple of minutes. Inexperienced user will understand in a couple of seconds that he was pleased with the horizontal scrolling in the blog with articles. Such scrolling in a blog with articles – it’s quite controversial and unusual decision.
Next, users will start looking for a way to interact with the site. There are no controls for scrolling through the entries. Pull records, scroll the mouse wheel, control keyboard arrows or "freak out" and close the site? By trial and error, the user will find a workable option. There is also a variant to move the scroll bar, but you probably know by experience how difficult it will be to get in the right range. After such torment, you are unlikely to want to go to this site next time from the Google search query page.
Let me remind you that good usability is the main selection criterion according to the jury. Yes, we see.
Just a question : "How did this make it to the semifinals?" The execution looks like a demiart.
Yukoz’s signature color is blue. But the author did it differently and with little contrast. In the composition, the dark right column is balanced by the large light area. This is correct. There is no visual cluttering of one side of the layout. Most people don’t think of that.
Note : Dark and saturated colors are visually heavier than light colors. If you want to achieve harmony, you need to balance the dark part proportionally b about the lighter part. Sometimes this rule is broken to create some attractive tension in the design. But don’t overdo it. Your design can start to "push" the user.
Would hardly suit a site where entries appear once a week. The author hasn’t thought this through and there would be gaps in the center of the home page.
Somewhere there is little contrast. The picture is the focal point of each individual entry, so the order should be as follows: picture-bait, then the eye goes to the title, followed by the author’s name and the non-intrusive category label in text.
This is going to be a brain blast for the blog. Have you found where the poll is?
Some kind of awkward sketch. The limited space on the monitor can and should be used more efficiently.
This is how mournful the blog will be when Yukoz goes down. The composition is unbalanced (heavy left side), readability in the dark part is low. The arrangement of elements is questionable.
The font size for the main text is very small, and the distance between the lines is very large. This causes the text to fall apart. It is better to use an interlineage of about 1.5-1.75x for the main text (you need more for grotesques with high lowercase letters), and 1-1.25x for headlines is usually used.
There are many more pearls among the semifinalists. There are generally bright red swag that will bore you with their bright spots while you read the article.
"Pearls" from the finalists
Check out the finalists’ pearls Actually, the list of finalists is headed by the designer (they wrote that the lead) of uCoz:
I will say right off the bat that of all her work, this is the best. There have been negative comments from visitors to the others. Therefore, the finale is not solely dedicated to this person.
Initially in the comments on the work there were complaints from other participants because of the fact that it is officially an employee participating, and her own superiors are judging. There were also objections about her work being done 9 days before the contest itself was announced.
The functionality is not fully drawn. The right column is crammed to the max. In the dates of the posts the months with short names are used. The other 8 months with month names twice as long won’t fit anymore. In the news, somewhere it is aligned to the left and somewhere it is aligned to the format. The girl did not align the pagination and fill in the hole at the bottom of the site. She is allowed, she is a colleague. Odd that the header doesn’t use the native company logo.
Note : If you do a block like "Our Faces", it’s better to put the avatar first, and then the text. People are attracted to faces and images first, and then we follow from left to right to text.
Grayness. Functionally something incomprehensible. Especially the top menu (where is the emphasis on the "Create Blog" button?), pagination. I’d center the page numbering, and raise the right column so the headings are level with the news, and the search is level with the numbering.
In the news, the author’s name should not be above the title. The title of the section is located where we wait for the "Read more" button, "Read more" is incomprehensible. Secondary information (date, views) is moved to where we start reading. It’s not that important.
Rather visually outdated work. Why is there a current date at the very top?
The logo is out of style and has a glossy glare (as does the "Create Blog" button). The logo itself has a "All Projects" link squeezed into it, which struggles with the very name "Official Block". Still, the bright blue color is more eye-catching.
Above the title of each entry is the author, the number of views. The headings themselves are mostly 2 lines long and underlined. Such underlining looks unaccustomed and incongruous. As with any print product, you need to place the headline and underline it with 1 placeholder at the bottom.
Social likes aren’t necessary here. We can’t say we like this article just by reading the title and the opening text, can we? "Full text" brings to mind fat people. Better is "Read More" or "Read More."
The typography is bad. The pictures of the posts, as with the authors, should be placed on the left. Otherwise, we "run" our eyes to the picture, and then we have to go back to the description to the left against the usual eye movement.
Tip : If you have long headlines and want to use a large font size, then use special narrowed fonts, such as Roboto Condensed. These styles are specially designed for these situations.
I don’t count that as 1 of 21 finalists. There’s a hole at the bottom altogether.
About the placement of pictures in the posts wrote above. Section labels take up too much vertical space, are too catchy and should be in a different place in the hierarchy. All the important functions for the visitor – category list, search, "Create Blog" button (brings profit to the company), user profile – are hidden or moved down.
It’s bad. The menu of headings in 2 levels (they are not subordinate), Search is poorly visible. Part of the functionality is not drawn. With varying lengths of content, the user will constantly strain their brain scanning the screen for headings. Despite their boldness, they will be at different levels and the eye will move like this ///=/.
The footer is a failure. All the blocks have different indents. If you read the text captions, there is a lot of nonsense. The header and footer have a chaotic arrangement of elements to fill the space. The arrangement of elements in the design should guide the user around the screen like a guide through a museum, telling a story.
Too pale. In some places the elements cannot be distinguished in the background at all. Center alignment should not be used in this case. Every time the eye has to look for the beginning of the line. The author, views and date are not so important that they should be placed before the entry itself. Overall, boring and lean.
Five years ago would have looked good. I wrote above about the pictures to the entries and the authors. Only true snipers will click the links from mobile devices. Even on a Wacom tablet you have to aim. "And then even more interesting…" can be replaced by "Read more" or "Read more" without raping the visitor’s brain.
If you replace the blue with green, it’s a design for a New Year’s Eve website. An attack on the brain with the color red. If much is highlighted, nothing is highlighted. Every red dot calls the eye to itself. The text is unreadable. The header is large and has little functionality. I would remove the zebra (alternating backgrounds) from the menu and the squeeze in entries (adding more air). The footer is slapped on as much as possible to take up space.
I will not describe the rest of the work so as not to take up too much space.
Interesting works that did not make it to the finals
With a couple of tweaks, imho, worthy of finals.
See those who didn’t pass
Completely redo the surveys. Make the radio buttons look like radio buttons instead of checkboxes. Right now, their appearance deceives the user’s expectations. Basement and the header add pluses in the form of shadows and embossing as the central part of the design. Replace gray color in footer.
Interesting work. I would have turned it to shades of blue and increased the contrast of the text in the basement.
If you’ve read "Add Air! Visual Design Basics for Graphics, Web, and Multimedia" (K. Golombinski, R. Hagen), it says a lot about the relationship between title, illustration, and text. I would place the text above the illustration and the text, since they are both hierarchically subordinate to the header. Plus, we’d have the bonus of seamless use of long headers. For headings, I would use bold instead of Black.
Too bold headings, too bright detail button. The section labels are out of place. The button "Create a blog" would be moved to the header (it’s the company’s earnings). About the authorization and the user menu is generally forgotten. Put in place of social buttons, and social buttons put under the category menu. The links now blend in with the plain text. I would make the main text achromatic (in shades of gray) and make the links blue. Another option: current text color and red links.
They didn ‘t go anywhere
Interesting work. Change the shade of purple to blue, increase the contrast, rework the pagination. Remove the boldface from the headings. Place information about the entry under the details button. Make a couple of other minor tweaks to make it less gloomy.
Interesting contrasting work. Needs some tweaking. For example, mirror horizontally the image in the header, so that the logo is on the left, where we start reading. Forgotten are the search and user menus.
A nice detailed sketch that needs to add life in the form of color for the blocks and background. For example, the header and footer block could be done in shades of blue or navy blue, and the background of the page could be made slightly bluish-gray.
I can hardly be 100% objective about myself. I’ll be honest, what I did on my last day, when I got out of the pile of things to do and study. I would appreciate your comments and edits.
Originally chose a pair of colors shade of blue + orange. This is a complementary color combination. In addition to the complementary contrast, this pair also creates a contrast of hot and cold. Red-orange is the hottest color, and turquoise (and close to it) is the coolest.
View author’s work show job #1 I decided right away that I was going to do adaptive designs and render them at 1200 pixels. At 960 pixels you have to clamp down hard and the content just "suffocates".
Home Page :
Immediately decided to write the description in the template itself. In case the jury doesn’t "know" how and what.
Page of an individual record :
They have the author so placed and I did not change its position. Although the presence of this block, imho, useless. Unless it raises the ego of the company employees.
Adaptation to mobile devices :
Full preview in the Chinese enlarged copy of the iPad:
Mobile Phones :
Preview in iPhone 8 with extra rows for icons :):
Probably should have added variety to the design of the logical blocks. Didn’t want to distract the user from the content with colored spots on the side. Also the logo in the background picture with the girl is not very readable. However, the picture I have inserted for clarity and it can always be changed.
For the hat, I specially finished the photo with the girl:
show job #2 After submitting the first job, I still had a few hours left and decided to do 1 more version in a pseudo flat style and dark color scheme.
Home Page :
Page of an individual record :
I removed the useless block with the author.
The page background probably should have been picked up differently. Didn’t finish the readability in the poll block. It’s hard to beat that kind of background color. All in all, my own evil Pinocchio. 🙂
My work didn’t go anywhere.
P.S. I congratulated the Yukoz project manager (he accepted the work) on the future victory of their team in their contest.
Thanks to ICELedyanoj for the tip on how to center the pictures.