Interface – Kevin McElligott

My gridded interface design for the Syracuse Public Diplomacy site came to life organically, as most do. Originally I had stuck to technology sites for my inspiration; Apple (www.apple.com) and tech blog The Verge (www.theverge.com) each had the menu dropdowns and multi-column layouts that I had envisioned. Reality soon set in when I saw that the dearth of content made such layouts impractical, but I was enamored with their economical dispersal of images near the bottom of the page.

The Chicago Tribune’s (www.chicagotribune.com) recent redesign provided another flourish. Its use of white space and the placement of the logo by itself in the header was something I wished to emulate. Further, the exclusive member content box below the fold served just the purpose I wished my site to: the highlighting of stories or elements of the site that can easily fall through the cracks. I wouldn’t have imagined a news site to embrace the concept so wholeheartedly, but this proved a core element of my process.

Design Strategy

Public diplomacy is a rich and complex field; sadly, the website did not mirror those values. Intended to reach the vast target publics of current and prospective PD students, professional diplomacy scholars and administrators, it was my intention to deliver a professional site that allowed for above-the-fold access to critical information in five seconds or less while accommodating the increasing use of mobile devices. I did this using large visuals, column headers, and other navigation elements in an easy-to-follow grid. The inclusion of white space was similar to the initial site, but the distinctive (and larger) typeface made it appear more streamlined and welcoming while reducing eye strain.

To this point, the website was essentially the last choice for those hoping to access information quickly or learn more about the program. I believe I accomplished the reversal of this trend through a varied social presence and a sensible typeface/color palate choice that more effectively publicizes vital details.

The Old Design

Syracuse’s Public Diplomacy program has delegated the maintenance of its website to students, and as a consequence the site has stagnated in recent years, a perfect candidate for this project. From the start, the linear appearance of the page and the ineffective white space signal that this is a by-the-numbers site that espouses neither the influential aspects of the program nor the raison d’etre of public diplomacy. Links engage the user in endless content loops, relegating important information such as the annual student-produced video and the events calendar to secondary status. The main images are not reflective of the content within (the man standing on the world is particularly egregious), and there is shockingly little social interaction on the page; this, from a program that is active on Twitter and the online publishing community. The key structures of the program are left to the imagination, buried in copy-dense expository pages that are not capable of delivering substantive advice without an abnormally high time investment from the user.

In sum, the site is unsuitable for a program as diverse and far-reaching as Public Diplomacy. My effort (I hope) has not only enhanced its visual profile but also delivered a host of content-related enhancements. The key now lies in sustaining and growing that content.

Style Sheet

Header (Syracuse University): ITC Franklin Gothic Standard Demi, 48 pt./57.6, unkerned
C=0 M=83 Y=99 K=0
Header (Public Diplomacy): ITC Franklin Gothic Standard Demi, 52 pt./62.4, unkerned
C=100 M=90 Y=10 K=0
Navigation Headers: ITC Franklin Gothic Standard Book Extra Compressed, 48 pt/57.6, kern
C=0 M=83 Y=99 K=0
Navigation Subheads: ITC Franklin Gothic Standard Medium, 24 pt./36, unkerned
Column Headers: Verdana Bold, 24 pt./28.8/unkerned
Slideshow Header: Verdana Bold, 32 pt./38.4, unkerned
Slideshow Subhead: Verdana Bold, 18 pt./21/6, unkerned
Footer: ITC Franklin Gothic Standard Demi Condensed, 14 pt./16.8
C=100 M=90 Y=10 K=0
Body Text: Verdana Regular/Bold, 14 pt./16.8, unkerned

Choice of typefaces/colors

Because my website is a Syracuse University product, I always intended to mirror its brand guidelines and use its standard font, ITC Franklin Gothic. The school colors were also taken directly from the branding document. Unlike the prior website, this choice enhanced the continuity between this design and the school’s own pending redesigns and brand identity.

Visuals

The gridded appearance is a stark contrast from the formerly linear page that contained copious links and misdirection. The main photograph, taken directly from a Public Diplomacy event last year, exemplifies the direction of the site: to deliver the latest program news in a social, visually appealing manner. The inclusion of social media is a continuation from the old site; however, their more prominent placement and consistent inclusion here is indicative of the program’s recent social media initiatives.

The navigation bar ultimately succeeds in retaining most of the content while jettisoning that which was no longer active in the original page, and the side Quick Links bar provides faster access to information and remains constant, a plus in this frenetic program. Footers are classic Syracuse, incorporating the school’s logo while keeping the base contact information that provides a logical conclusion to the page.

4 thoughts on “Interface – Kevin McElligott

  1. Hadeel Alhaddadeh

    I like the designes, it is pretty organized and easy to read and explore.the home page also is interesting, the picture and the video that you used are great.. Great job 🙂

  2. Rocio Lower

    Man, what a difference. Your redesign has a strong visual appeal. On top of being much more legible, your layout actually make me want to read the content. I also like the continuity of the right sidebar – let’s me know what to expect on each page. But I think my favorite fix is the header and navigation. Really nicely executed, Kevin! It looks great!

Comments are closed.