Karen Civil is a self-made marketing maven and influencer in the music industry. Her

Transcription

1 Karen Civil is a self-made marketing maven and influencer in the music industry. Her website, KarenCivil.com, is the product of her marketing genius and passion for hip-hop music. Launched in 2008, KarenCivil.com was a simple solution to Civil s need to discuss up-andcoming artists. It has since blossomed into the number one source for hip-hop and celebrity news. KarenCivil.com is an entertainment site, and it effectively engrosses visitors with its endless stream of visual content. Civil s design supports the influx of content well. However, her emphasis on content forces her to neglect the basics of good web design. What Works Header The header is the highlight of the website. Its design is clean, simple and easy for visitors to navigate. It includes the navigation and search bars, the Karen Civil logo, social media links and a subtitle. I love where Civil positioned the social media icons. They run along the logo, suggesting these links are exclusively for the site. The navigation bar is easily visible because of its grey color. It stands out against the black background, and it has a pink triangle that attracts attention as well. Visitors can navigate from the homepage to one of five other pages made accessible through the navigation bar. Civil divides the pages based on categories, as in one page is solely for video content (Civil TV) and another for photos from exclusive interviews (Civil Booth/Macbooth). The other pages include contact information, a link to the blog s paraphernalia and a standard about page. The header houses information that appears on every page of the site which is crucial for navigating it.

2 Color Scheme The color scheme is rather simple, but is representative of both Civil and the music she covers. Despite its universal appeal, hip-hop is a subculture created in opposition to mainstream music. Civil is also a part of a subculture as a blogger. Bloggers are members of fringe media, which have gained traction, but are not viewed as traditional media outlets. The site s color scheme embodies this alternative culture by using dark colors. The use of grey and black gives an underground, urban feel that complements the content well. The pink offsets the dark colors, offering the eyes relief from the darkness of the site. It also unifies the site because it ties the logo into the overall web design. Image Glider Visitors are welcomed with visual content as soon as they open the site. The homepage features an image glider, highlighting the latest hip-hop news. It displays two stories every five seconds, transitioning to a new story on the sixth second. Civil successfully uses the image glider by maintaining a balance in several ways. (1) The images are appropriately sized. They are neither too large, forcing your eyes to wander from corner to corner, nor too small, forcing you to squint. The size falls somewhere in between, and the images are easy to see. (2) The transition time is not fast. Five seconds is enough time to see both images and read the text on them. (3) The image glider features one new picture and one old. Instead of changing both photos every six seconds, it displays one from the previous set and a new one. If visitors missed the incoming photo, then they will be able to see it again in the next set pictured above.

3 Repetition, Alignment and Proximity Civil repeats her headers throughout the website. She has two sets: one for the posts and the other for the sidebar content. The header for the posts includes their title and date. It is grey and pink, and it spans the width of the posts. The sidebar header is light grey and has a shorter width to umbrella the content beneath it. It is shorter in width because it umbrellas visual content, which is normally square and requires less space. The headers indicate the beginning of new content. The alignment and proximity of the header to the content also helps distinguish which content belongs to which header. The content never extends past the width of it. It falls directly under the header and is rather close to it, clearly indicating the connection between the two. The repetition of the headers, especially in regard to color, differentiates the main content from the sidebar content. Civil s consistency with headers makes it easier for visitors to shift through the posts without confusing them. Sidebar Below the image glider is the heart of KarenCivil.com: its blog. Each post includes an image or video with body text. The layout follows the Rule of Thirds because the posts are not centered. They are slightly to the left of the screen, leaving room for the site s sidebar. The sidebar is another positive element of the site. It features the most popular posts and signature content, such as Civil TV and Civil Booth. Civil TV and Civil Booth house exclusive videos and photographs of Civil and her interviewees. This launched Civil s site in 2008, and she continues to post them six years later. To position Civil TV and Civil Booth alongside the most recent content shows their significance to the site. KarenCivil.com would not be what it is today without Civil TV and Civil Booth, and it is smart of Civil to include it not only in the sidebar, but also on every page.

4 Fixed Scrolling Some people are fans of infinite scrolling, but I am not. Having pages to shift through helps me keep track of where everything is on a site. KarenCivil.com s fixed scrolling element is then a positive for me. However, with all the visual content, infinite scrolling would work better for the site. It would continue the endless stream of content mentioned in the introduction of this critique and further entertain visitors. What Does Not Work Contrast - There is little to no contrast in the website design. With the exception of color, everything on KarenCivil.com mirrors one another. Civil uses the same, sans serif font throughout the site, and she fails to differentiate the home and story pages. The only outliers to the first observation are the Karen Civil logo and the subtitle beneath it. Civil uses a script for the former, and another sans serif font for the latter. Everything else such as the navigation and header font are no different from that used for the body text. The text is also illegible on some of the headers, as seen on the left. The headers in the sidebar have grey and white text against a darker grey background. Visitors must strain their eyes in order to read both see the header and the text in the sidebar, which is a significant error in Civil s design. Visitors are less inclined to read the content in the sidebar and its header because there is no contrast. The second observation addresses the uniformity of the home and story pages. The same design and content appear on the story page as they do on the homepage. There is nothing unique about the story page because it has no additional content or design elements. Civil devotes a lot of her attention to visual content and neglects her site s aesthetic. It would do her well to incorporate distinguishable design elements into her layout.

5 Stray/Dead Links In the site s header are three icons linking to different subsites of KarenCivil.com. Always Civil Enterprise is Civil s business site, where visitors can hire her for brand marketing services. Live Civil is another blog with content related to things other than music. Civil Regime is Civil s fashion blog and clothing site. There is no clear indication of what these sites are, and Civil randomly placed their icons into the header. While I understand their connection to the site, these links should have been integrated into the site better. This way they would not need further explanation and would have a better location on the site. The navigation bar s Shop Civil link which leads visitors to Civil s clothing and accessory page actually directs visitors to a page with inoperable links. This page, pictured above, is essentially useless, especially since Civil Regime is the fashion component of the Karen Civil brand. Civil should either delete this page altogether or replace it with the Civil Regime page. The page is also poorly designed and seems like an afterthought. Purpose The image glider alludes to the website s purpose and content. However, both may not be apparent to unfamiliar

6 visitors. They must scroll to the next section of the site to understand its objective. In that following section is a graphic with bullet points framed in the image below explaining the site s content. It also describes it as an entertainment site. This graphic, or the information it contains, should live in the header. By placing it here, the purpose is independent of the image glider, and it becomes a more integral part of the homepage. There are more positive elements of web design than negative on KarenCivil.com. Civil effectively displays her visual content, but at the expense of good, basic web design. The minimal contrast, inexplicable links and poorly communicated purpose are all minor drawbacks to the site. Once Civil addresses these issues, she will have a more holistic, well-crafted website.