SF State News Site
University Communications
San Francisco State University
2014 - 2015
Responsive layouts of SF State News website
I was one of the leading designers and coders for the conceptualization, redesign and building of the News site for University Communications Department (now Strategic Marketing and Communications). Our director expressed beginning needs for an innovative look, using inspiration from Pinterest and other university websites. I was in charge of refining the design in Drupal content management system, creating CSS files and color schemes, and making the design both accessible and mobile friendly.
Front Page
Features
— Navigation: redesigned unique to the regular SF State template, with incorporated social media links
— Main articles: view that pulls most recently posted news story to format
— What's Trending: showcased articles that display the wide range of SF State's programs, students, alumni and news.
— Social Media: views that pull from Facebook, Twitter, and Instagram feeds
News Story
As the lead designer for the individual news stories, I wanted to ensure that users were able to grasp a feel for the story while remaining for the following design for individual news stories. In the implementation of this design, we broke our branding guidelines through a wider page layout and repurposing the second collumn, which in turn profoundly altered future template considerations at the university. We also had to ensure that the template was easy for publicists to use this format on a regular basis, which included hard coding using the Drupal interface. Many fields are preprogrammed to aid the daily duties of our publicists, including easily updating side bar information, linking related stories, and adding responsive images.
Features
- Expanded design without left side navigation
- Byline with author and date
- Large photo to increase visual appeal
- Story text with supplementary images
- Side bar: share icons, contact info, and quick links to increase engagement
