Capstone Portfolio
The Grady College of Journalism and Mass Communications at the University of Georgia is one of the top-ranked journalism schools in the nation. And now, it has an equally premium source for all the news, media, and events surrounding the college’s students, faculty, alumni and donors: Grady Connection.
Grady Connection is implanted in Grady College’s newly rennovated website, and as such reflects the visual themes of the main website: long landing pages, sans-serif font faces, rectangles, and, of course, the red-white-and-black color scheme. However, we made certain CSS changes from the main site to make Grady Connection feel like a premium online magazine.
Although our New Media Capstone project was a group effort shared equally by all members, each of us had certain skills and tasks that we contributed to the best of our ability.
In my case, I am most interested in coding and web design, so I focused a lot on constructing the wireframe, beta, and CSS supplements to the final product. I also constructed the final project website which pulled together all of our work and main project idea into an attractive and organized website.
I also attended the large team meeting that our client, Sarah, held with the Grady communications team and Redclay Interactive.
In this meeting, I observed how Grady Connection was going to be implemented into the rennovated Grady website and received training on how our NMI team would administer and use the page. Below is one of the pages from the training manual that showed how to utilize content within pages:
Wireframe (on Wordpress)
Here, I implemented the Related Posts and Social plugins to make the wireframe version of the digital publication both engaging and interactive.
Below is some of the custom CSS I helped add to the Grady Connection article pages to add a premium appearance. These lines of CSS reduced the line and character count length of the articles. We were also able to change the heading font of each article title:
Lastly, below is the initial research I contributed in the planning process of our project:
Card Layouts
Originally created and used by Pinterest, the card layout is becoming popular because it presents chunks of information perfect for scanning and usability. This kind of layout appeals to modern users who look for fast information and who look to minimize search time. Each card is a unified concept and a single content container. It also makes it easy to arrange for different device breakpoints.
jQuery Masonry is a free plugin that can be used to mimic this kind of layout style with animated cards for various heights and widths. This plugin works by putting its elements in optimal position based on the available vertical space.
Hover Animations
Hover effects on an image or web entity allows for easier information gathering as users mouse over content. They work when a user is unsure about a feature/link’s function and users hover over them for instant visual feedback on the function. This can be used in conjunction with the card layout to showcase different articles, stories, or other aspects of the digital magazine and to offer a preview
Background animations/video
Many websites are starting to use features like video backgrounds and animation in the background to create movement and visibility on the site, and to draw the eye to something visually appealing. Video backgrounds are usually implemented in the header background image to instantly engage the user, but could be used in other aspects like in conjunction with the card layout and and hover animation to provide a preview of the features.
Flat Design
Flat design has been widely used as a design style focused on content and will continue to be a web staple and compatible with simpler trends like minimalism, responsive web design, and material design (a new style language launched by google). This design style based on simplicity removes a lot of the complex textures, shadows, gradients, bubbles and other similar effects. It’s also characterized by a focus on typography, lack of embellishment, and focus on color. One of its shortcomings, however, is ability to graphically distinguish the static elements of the website from the interactive elements (which are still possible in flat design).
Material Design
With the goal of creating clean, modernistic design with a focus on UX, Google’s Material Design aesthetic has been called a game-changer and has been praised. It’s characterized by a minimalistic look, in common with flat design, but also makes use of depth and shadow. Material Design has been recently extended from its initial app-design-only nature, to be more suitable for websites (Material Design Lite). It doesn’t rely on any particular framework, allowing designers to use a variety of front-end tools to create sites. It emphasizes bold intentional graphics and motion. Wordpress recently added a Material Design theme.
Ghost buttons
Ghost buttons are a new trend that are starting to emerge already in many Bootstrap templates, Wordpress themes as well as other web templates and tools. This style of button provides functionality without distracting from the website’s UX. Ghost buttons often show up as outlined, clickable links that change layout when the user hovers over.
Ghost buttons provide several visual benefits in the modern age of digital and graphic design. They are easy to create with Illustrator, Photoshop or with any similar software, though they don’t appear unsubstantial on the page; they can add an elegant finished look to a design layout. When used correctly, they easily integrate with many basic design elements and styles.
http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html
https://material.google.com/#introduction-principles
http://materialdesignblog.com/15-awesome-examples-of-material-design-done-right/