Web Design for The Daily Californian

This semester, I wanted more experience with UI/UX Design, and a way to force myself to give some attention to design work so I don’t get lost in the mayhem of programming every single day. I rejoined The Daily Californian (An independent run student newspaper at UC Berkeley) staff, where I had previously worked in infographics, as a web designer. Designing for a newspaper online website is challenging. Their current website, www.dailycal.org already has a unifying theme, so redesigns and new designs all had to match up with their theme. Needless to say, as a designer and font enthusiast, I’m not the biggest fan of their current style and font choice, but it is an interesting experience trying to apply my design skills in compliance with their rules, and create something I can feel proud of as a designer that they also appreciate.

My first project was to create a new section for the Newspaper, the topics section. I thought that because I’m not redesigning a page, and because the page is not directly connected to current web pages, that I can have more creative control over the designs. I picked a dark background and a sans-serif font because I didn’t think it was as relevant to the newspaper and wanted to do something drastically different, which had better site flow and a cleaner design.

Although they enjoyed the simplicity of this design, the feedback I got from my editors was not enthusiastic. They disliked the dark background of the site, and preferred I keep the font (Georgia) they were accustomed to. They also wanted more images on the landing page.

In my second iteration, I tried to come up with a concept that was consistent with the current style of the Daily Californian, yet incorporated my ideas for a cleaner design and better site and user flow.

Unfortunately, after this iteration of the design, the online manager and lead web designer decided there wasn’t a clear flow for the web page, and my project got temporarily put on a hiatus. As a freelance designer, I’m accustomed to my work always being appreciated and I gain a sense of satisfaction from feeling that my work has value and contribution to a cause, so I was a little disappointed about this outcome. I feel like all my sketches, wireframes, and iterations have gone to waste. However, this is a huge lesson I’ve learned, because I know this will be a common occurrence if I do go into the professional design industry. There are times where I feel like my hard work will not be implemented, and I need to not feel discouraged.

However, although this particular project was put on hiatus, the design and format of the next two projects I received was very similar to this one. First, I was instructed to create a page that collectively documented all articles about the ASUC student government elections. Although I was required to maintain consistency with the current Daily Cal style and brand, I had a little bit of creative freedom to experiment with fonts and colors.

In order to maintain consistency with the website, I kept the white background and serif fonts for content. I also wanted to keep the timeline the same format as the other pages. Currently, a lot of topics pages are very cluttered, and I wanted to create a page which reduced the clutter. One of my biggest inspirations for this page was Medium. I usually don’t like serif fonts, but Medium’s website does an amazing job of creating a clean website that integrates both serif and sans serif fonts. I had to keep the same menu bar and title at the top to maintain consistency, but in order to reduce clutter, I added a picture under because the current topics pages are very text heavy. I also made the headline extend across the entire page because side by side texts are very distracting.

I also don’t like how the current sans serif headline fonts clash, so I decided to switch the fonts of the headlines into Helvetica, and I increased spacing between headlines. Currently, the way articles are divided are with solid black lines. When added on top of the bolded headlines, the visual result is extremely clashing, and deters the reader from focusing on the story. In order to fix this, I removed the vertical bold line on the side and changed the divide of the lines to a light gray. Another subtle change I made was the color of the background page. Currently, the Daily Californian uses pure white (#FFFFFF), but I generally prefer off-whites because they contrast less with the black font and create a softer affect that is easier on the eyes. My favorite off-white is (#FCFCFD), because it’s a generally warmer white with an extra hint of blue, because of the D at the end.

Another project I took on is to redesign the endorsements page for ASUC candidates the Daily Californian endorses. Because this page is more independent of the newspaper, I had a little more creative freedom.

The old endorsements page is extremely outdated, and I dislike how cluttered it is, how non-intuitive it is to navigate, and also how the fonts don’t compliment each other.

Current Endorsements page for Daily Californian.

Current Endorsements page for Daily Californian.

My current project is in wireframe stage because I don’t have pictures and details yet. I wanted to keep the color palette and general style similar and still compatible with Daily Californian’s brand. Some of my biggest changes were cropping pictures of the candidates in a circular form, creating a navigation tab that appears more like a navigation tab and is m ore intuitive to navigate, changing the current display of candidates, and cleaning up the icons for Twitter, Facebook, and Print. I also changed the headline fonts to Helvetica, and reorganized the Endorsements in brief side bar into part of the main page to reduce clutter. I feel it is better as main content because it is one of the main purposes of the page. In order to maintain consistency across all Daily Californian pages and website, I kept the layout of the Senior Editorial Board at the bottom of the page. The arrows show the flow of the page.

This is my experience so far working as a designer for a newspaper and an independent firm with an established style and brand. Although most of it’s style is out dated and inconsistent with a lot of UI/UX principles, it was an interesting experience trying to create more modern web pages with a cleaner style while remaining true to the necessities of a newspaper and keeping consistent with the current brand. Of course, my work is still in draft stage, so I’ll keep this story updated as I continue to work.