Trends

Life, liberty, and the pursuit of good web design

Hillary vs. Trump, web design edition.

Hillary Clinton and Donald Trump don’t agree on too many things. However, there’s one idea that they can both get behind: the importance of good web design. In honor of the end of election season, I put politics aside and compared the designs of both candidates’ websites, hillaryclinton.com and donaldjtrump.com.

There are a few consistent themes throughout both websites – from flat design and card-based UI to bold, sans-serif fonts – that have us thinking that maybe the two candidates have more in common than it seems. Here’s what we found:

T -1 day until the election

Landing page: Hillary Clinton

screen-shot-2016-11-07-at-1-54-53-pm
A landing page for hillaryclinton.com.

Landing page: Donald Trump

Landing page: donaldjtrump.com.
Landing page: donaldjtrump.com.

A day before the final presidential election, both candidates implemented a splash page as a gate to their main site. The design of these pages are somewhat similar: a prominently displayed donation call-out on the left, a media feature (video for Trump, a supporter card design for Hillary) on the right, and the requisite paid for disclaimer on the bottom of the page. Let’s continue to site!

Winner: Hillary Clinton

Home page design

Above the fold: Hillary Clinton

screen-shot-2016-11-07-at-2-02-23-pm

Above the fold: Donald Trump

screen-shot-2016-11-07-at-2-04-40-pm

Hillary and Trump disagree on a lot of things, but the topic of web design isn’t one of them: both websites feature flat web design, simple color schemes, and clean, grid-based layout.

Someone on Hillary’s design team must have heard that video is increasingly on-trend this year – it’s front and center on the home page of her website. The to-the-second countdown at the top of her site also adds more movement to the home page. Meanwhile, the above-the-fold of Trump’s website is static. However, the full-width image on Trump’s website stands out more, and muted colors feel more professional.

Both websites reserve the very top of their site for a call to action for voter registration.

Winner: Donald Trump

Blogs and news feeds:

Card-based news layout: Hillary Clinton

screen-shot-2016-11-07-at-2-08-54-pm

Card-based news layout: Donald Trump

screen-shot-2016-11-07-at-2-09-06-pm

Maybe it’s a nod to material design, or a reflection of the influence on iOS10 on web design, but the internet has been focused on card-based blog layouts, and the pages of presidential candidates are no exception.

Winner: Hillary Clinton

Media and communications:

Publishing & media: Hillary Clinton

screen-shot-2016-11-07-at-2-14-08-pm

Publishing & media: Donald Trump

screen-shot-2016-11-07-at-2-18-28-pm

This particular category might be a no-contest: Hillary’s website is more focused on media and interactive ways to communicate with her audience. For example, this article, written as a timeline with bright yellow and blue highlights, looks more like something we’d see on media site Vox than on a campaign site – and it does an excellent job of communicating points from her platform. In contrast, Trump’s news section is largely composed of pull-quotes and excerpts from external sources, lending a more traditional newspaper-feel for his website.

Winner: Hillary Clinton

Get involved

Act: Hillary Clinton

screen-shot-2016-11-08-at-11-39-54-am

Get Involved: Donald Trump

screen-shot-2016-11-08-at-11-45-23-am

Let’s get involved in the campaigns! The Act section on the main navigation for Hillary’s website brings us to a simple signup form that says, “There are so many ways to do your part for Hillary. Let’s find the one that works best for you”. The ‘Get Involved’ navigation on Trump’s website opens a pop-up, instead of a new page, with more form fields and a prompt to “Receive updates from Donald J. Trump”. While we like the visual design of Hillary’s page more, the user experience is a little unclear about what list you’re actually signing up for.

Winner: Donald Trump

Online Store

Shopfront features: Hillary Clinton

screen-shot-2016-11-07-at-2-23-53-pm

Shopfront features: Donald Trump

screen-shot-2016-11-07-at-2-24-41-pm

Maybe Hillary and Trump used the same designer for their online stores? Both of their shops feature bundle packs and collections with a similar layout, from the font choice to the imagery. Hillary’s is a ‘45 Pin Project‘, with 45 different pins designed by graphic artists, and Trump’s is a ‘Make America Great Again Pack‘, with mini-megaphones and rally signs. Clinton’s site displays items in a more consistent way, and the navigation menu stays at the top of the site. On Trump’s shop page, our design team noted that the CTA was more difficult to find, and that the static location of the menu bar makes it more difficult to navigate.

Winner: Hillary Clinton

State-specific

Virginia page: Hillary Clinton

screen-shot-2016-11-07-at-2-36-06-pm

Virginia page: Donald Trump

screen-shot-2016-11-07-at-2-36-36-pm

I visited the Virginia page on both campaign sites (in honor of my home state). Hillary’s page leads with information about volunteering, organizing, and field offices, while Trump’s Virginia page presents donation information and upcoming events. The attention to detail is a +1 for Hillary here: the hero image for Hillary’s state pages are specific to each page, highlighting iconic landscapes from each state.

Winner: Hillary Clinton

Donation pages

Donation page: Hillary Clinton

screen-shot-2016-11-07-at-2-42-43-pm

Donation page: Donald Trump

screen-shot-2016-11-07-at-2-43-12-pm

The donation pages for each candidate follow similar design trends: a full-width photo background, a simplified payment interface, and a left-side card overlay.

Winner: Tie

Bonus: Social media comparison

Facebook design: Hillary Clinton

screen-shot-2016-11-07-at-2-31-20-pm

Facebook design: Donald Trump

screen-shot-2016-11-07-at-2-31-44-pm

Again, the designs are pretty similar here – each candidate stands in the center of the Facebook cover photo for their campaign, with a sea of signs/flags in the background.

Winner: Tie

Who wins?

Let’s tally up the votes:

  • Landing page: Hillary Clinton
  • Home page: Donald Trump
  • Blog & news: Hillary Clinton
  • Media: Hillary Clinton
  • Get involved: Donald Trump
  • Online store: Hillary Clinton
  • State-specific: Hillary Clinton
  • Donation page: Tie
  • Facebook page: Tie

Although many of the categories were close, and the design of each website shares similarities, the score shows Hillary as the overall winner, with a 5-category win (over Trump’s 2 points).

It’s worth mentioning that each website also has special features that bring their sites above and beyond. such as the prominent En Español option on Hillary’s website, which makes it more accessible for Spanish-speaking viewers, or the Trump Talk feature, which allows supporters to make phone calls for Trump from the website.

And, of course, the websites are geared towards very different audiences – though we might be stretching the web design analogy a little far, it seems like each candidate’s website reflects their personality and campaign. Trump’s newspaper-based style and classic serif fonts reflect a more traditional aesthetic, while the bright colors and flat design of Hillary’s website appeals to a more modern audience.

Unlike in the election itself, the candidates are unified here by their shared interest (in well-designed websites).

Special thanks to the Envato design team for their editing assistance and design expertise for this article.

Featured image: dxc

Related article: 10 Winning WordPress Themes for Your Election Campaign


Brittany Jezouit

About the Author Brittany Jezouit

Brittany is the editor of the Envato blog. You can follow her on Twitter @brittanyjezouit.