Hello, I'm here to embark on a new series which I hope to take a look at many different websites. To start off this series, I'd like to introduce the website, or the front page of somebody I'm following on Twitter, Una Kravets, who currently works with IBM Design. I thought her front page displayed a keen sense of design acumen. Her front page consists of scrolling elements that describe her various projects and aspects of her personality.
Una's website header starts first and foremost with a simple, quirky font that describes herself as a front end developer and design-nerd, complete with a smiley. The front and the "Hi, I'm Una!" gives us an immediate impression of her personality; bright and colorful. True to form, the white text is set against a black background with a pop-up menu icon to the right hand corner of her website. This is important because the rest of her front page uses a lot of white elements that turn into different color backgrounds. The black banner at the top allows for a natural contrast between black and white. The banner doesn't take too much space and it makes it clear whose website it belongs to. The popup menu is set against a gray background with information about her credentials and contact information. It's simple, but it gets the important information in a compact location. I think that instead of having contact information at the bottom, like most people do, Una keeps the important information at the top makes it more accessible especially when her website is based vertically. In other words, the user doesn't have to scroll all the way down to access her contact information.
The second element on her front-page, featured a change to yellow background effect that compliments the quirkier "proofessor" that forms the basis for the banner link to her first project. The yellow color doesn't just work well as a transition color, but it also works against the black header. Scrolling down, we come across something titled "edible arrangements" which is stylized in bright red cursive and print form on the second line. The fruits that accompany the logo consists of green, yellow, orange, purple, red, green and purple. This is important because there are no conflicting colors when these colors are placed against the white background (before hover). The purple grapes are split into two groups and flanked the strawberry allows for a more diverse feel than simple clumping them together. Even after the mouse hovers over this section, the background turns into a faux orange that still perfectly compliments the "professor" banner before it as well as the existing elements within the "edible arrangements" banner. Because green, yellow, purple and red stand out against orange, everything is still legible. I liked this banner.
After the delicious arrangements, we come to a banner dedicated to the boy who lived, Harry Potter. Rather than the classic lighting bolt and possible copyright infringement by using the actual logo, Una decided to try her hand at a pleasant, symmetrical cursive that makes it clear what it's about. It excludes a sense of elegance. The best part of the slide are the different logos that represent the different parts of the Harry Potter series, such as Harry's glasses or his lightning scar. each of these are in colors that again, don't conflict with each other. They are all using the light variants of each color to compliment with the white (pre hover) background. It's also notable that there are seven different symbols, one for each year in the Harry Potter novels. When the background changes to something akin to savoy blue, the outlines of the symbols begin to "fill" in the white spaces between the lines to produce a blue effect, allowing the symbols to highlight itself when the background changes. This produces a nice effect. Following the Harry Potter slide, Una introduces her skill in manipulating fonts and decoration. In this slide, she utilizes three different font styles to produce a distinct logo for E-travel more. Not only do each font uses different serif styles, but it also uses different patterns within each letter. To accentuate the aspect of traveling, Una decorated the logo with what appears to be water drops. This signifies the beaches and traveling in general. It is also this slide that reintroduces the yellow background used in "proofessor". There may be a pattern emerging on this website.
Una doesn't stop right there though; she follows up her understanding of fonts with one that demonstrates her visual interpretation of music in the form of stylized "fannotate" that speaks of musical notation and fans. While the application in question isn't about fans and notations, it is about fans and a new dynamic way to rate music. In contrast to the previous stylized words, this one is done in italics and block cursive; it doesn't convey elegance, but it conveys speed and dignity. The usage of the stylized f is meant to incur images of the musical clefs. The text is done in purple and the background changes to red once the mouse hovers over it. With the use of yellow in the previous slide, Una follows up with an orange slide once more to continue her color scheme.
Her next slide is about something Inaugural Meet up. True to form, by using visual contexts, Una is able to lead the user into knowing exactly what kind of Inaugural it was referring to. Using the American blue on white stars against orange (same background orange as previous section), Una is clear that it has to do with American inaugural, political in nature or not. The use of white letters embedded in orange stripes prove to be useful when the background changes to the "savoy" blue used in the Harry Potter slide. Rather than allowing transparency through the letters like the previous sections do, the letters retain their white color against orange strips.
The final section of Una's website involved "Fruit Story". The font of "Fruit Story" is nothing unique, using two sided serifs in pure orange color. There is a picture of a comical fly right next to it. The fly uses green predominately, but the orange highlights on the binoculars tie it in with the "Fruit Story" font. When you hover over the background, it changes to the same yellow tone. Unsurprisingly, the yellow background works well with the font and the fly. Throughout these sections, I am abel to establish blue, yellow and reddish-orange as key colors on her front page. Had Una used more, it would have compromised on the establishment of a visual theme for her website.
Overall, I like Una's website because it stood out to me the moment I saw it. While the overall website design isn't overly complicated, it shows a decent sense of organization and most of all, colorful design that allow Una's qualities to shine through.
No comments:
Post a Comment