{"id":13323,"date":"2019-05-08T14:00:09","date_gmt":"2019-05-08T20:00:09","guid":{"rendered":"http:\/\/mind.sh\/are\/?p=13323"},"modified":"2019-05-16T22:36:02","modified_gmt":"2019-05-17T04:36:02","slug":"presidential-candidate-website-design","status":"publish","type":"post","link":"https:\/\/mind.sh\/are\/presidential-candidate-website-design\/","title":{"rendered":"Presidential Candidate Website Design"},"content":{"rendered":"\n

Here at Mindshare we talk a lot about why it’s important to hire a designer, especially when it comes to branding. Like any other profession, there is a wealth of knowledge associated with design that is not readily apparent to the layman. Take, for example, political website design. <\/p>\n\n\n\n

Book publishers spend a lot of time (and money) on cover design. Candidates, likewise, spend a lot on their landing pages. Whether consciously or not, voters make judgements based on design factors. My theory is that if a politician doesn’t understand how to present themself, then they’ll have a hard time presenting other ideas as well. We can gain a lot from the design choices they make.<\/strong><\/p>\n\n\n\n

While there are many, many things associated with design, I’d like to focus on 3 key areas; colors, typography, and layout. <\/strong><\/p>\n\n\n\n

Colors<\/h3>\n\n\n\n

As I’m sure most are well aware, we see our flag’s colors most often. Red, white, and blue, together, have become a symbol for the good ol’ USA. However, this year we’re seeing candidates branch out and use other colors, most notably by our female candidates. <\/p>\n\n\n\n

The first couple of years of the Trump presidency has been tumultuous. The relentless attack on minorities, our civil liberties, and, basically, anyone not white has caused the Democratic party to lean left in opposition of these ideals. In doing so they’ve had to re-define what patriotism really<\/em> is. Many of the democratic candidates define patriotism as an inclusive, multicultural, society in search of equality. This is represented in their color choices.<\/p>\n\n\n\n

After years of red, white, and blue our mainstream woman candidates — Elizabeth Warren, Kamala Harris, Kirsten Gillibrand, and Tulsi Gabbard — are embracing color palettes that break from the norm. In doing this these candidates are able to re-establish an identify without the cultural weight of past (or current) candidates. <\/p>\n\n\n\n

\n
\n

Elizabeth
Warren<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n

Kamala
Harris<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n\n
\n

Kristen
Gillibrand<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n\n
\n

Tulsi
Gabbard<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Elizabeth Warren has a familiar red and blue (though they differ from the standard) but, she’s also thrown in a very refreshing mint green. This gives off a fitting activist vibe.<\/p>\n\n\n\n

Kamala Harris’s pallet is similar in that she chose two colors that are close to blue and red (a purple and a desaturated red-orange), but threw in a butter-like yellow. Kamala Harris has talked about Shirley Chisholm<\/a> a bit during her campaign and this yellow is likely a homage to her. Plus it establishes her campaign as an authentic celebration of America’s multiculturalism. <\/p>\n\n\n\n

Kirsten Gillibrand’s pallet is a far departure from the standard red, white and blue. She has a long track record as a feminist, so it’s no surprise she chose “pussy hat” pink in as the leading color. <\/p>\n\n\n\n

Tulsi Gabbard uses a very bright red-orange as a dominant, main color. In the leading image on her site she’s not only wearing her bright red-orange, the background is a radiant splash of it as well. Her other colors are so close to black and white, one could say she’s chosen only one color, a refreshing and bold choice. Although, these colors could also be described as red, white, and blue when not placed in next to any other colors for comparison.<\/p>\n\n\n\n

As for our leading male candidates, it’s interesting that the established politicians are running with red, white, and blue, while our new (non-established) candidates are breaking with the norm. <\/p>\n\n\n\n

\n
\n

Bernie
Sanders<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n

Joe
Biden<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n\n
\n

Beto
O’Rourke<\/h4>\n
<\/div>\n
<\/div>\n<\/div>\n\n\n
\n

Pete
Buttigieg<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n

Donald
Trump<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n

United States Flag Colors<\/h4>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Bernie Sanders is using two different blues. The lighter, sky blue, is a refreshing and interesting choice. It offers a refreshing, relaxed, take on the standard blue which will undoubtedly help to counter his “crazy old guy” vibe.<\/p>\n\n\n\n

Joe Biden is probably the most established candidate in the field and his campaign colors show it. I wont be surprised if this is damaging to his campaign. It’s almost as though he’s running on the established ideals, which we know democratic voters are not down with. <\/p>\n\n\n\n

Beto O’Rourke’s website color pallet is, by far, the most interesting. He’s chosen to go with a stark black and white. This has the effect of pushing photos to the foreground, which is nice as it establishes him as an energetic rockstar-esque figure. After all, his charisma is what catapulted him to national stardom during his senate race. I’m sure he’s hoping his rugged good looks and energetic photo choices appeal to voters… it’s worked in the past.<\/p>\n\n\n\n

Pete Buttigieg’s color pallet is very similar to our leading women in it’s risk taking. Among the 5 candidates we are reviewing, he stands out. The refreshing yellow and sky blue establish him as an edgy, forward thinking, progressive candidate. The yellow screams inclusion and multiculturalism. <\/p>\n\n\n\n

Note: I think we’re going to be talking about yellow for a long time in politics. <\/em><\/p>\n\n\n\n

It’s no surprise that Donald Trump is using red, white, and blue. His colors are a bit more desaturated from that of Joe Biden making him feel somehow more gritty. Of all the candidates, his color pallet is the least risky. In fact, one would have a hard time seeing a difference between this pallet and that of the US flag.<\/p>\n\n\n\n

\n\n\n\n

Layout<\/h3>\n\n\n\n

Website layout tells us a lot about the priorities of these candidates, and how they handle the complex communication of ideas. Content hierarchy and use of white space<\/a> tell us what candidates are deeming important. <\/p>\n\n\n\n

As a whole, political website layouts don’t differ that much<\/em> from website to website. All of them lead with a photograph or autoplaying video, and all use bold typography to introduce tag-lines or ideas. However, there are a few that stand out. <\/p>\n\n\n\n

Tulsi Gabbard<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Tulsi Gabbard’s landing page is straight forward, and simple in concept. She’s the only candidate that uses a flat, single color background (instead of a gradient, photo or video.) Unfortunately this makes her site come off as a commercial brand, maybe an airline, instead of a candidate. There is also a nice, subtle, animation in the photo… check it out to see what I mean.<\/p>\n\n\n\n

This site does have a nice feature in that no matter the size of your screen the bottom menu is always visible. This menu UX choice is important and very well done. <\/p>\n\n\n\n

Kamala Harris<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This landing page seems directionless. It’s almost as though the form on the right was an afterthought or designed by someone else. The fonts in the placeholders don’t match and we’ve broken the grid in a weird way. Tho whole site sorta feels like an old, in need of refreshing, website from the early 2000’s. I’m not impressed. <\/p>\n\n\n\n

Elizabeth Warren<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

There are some great ideas here. I love that the headline is engaging in presentation and as content. Though, the placement of the logo and lack of photography make it feel like an edgy magazine. <\/p>\n\n\n\n

One thing I hate about her site is a weird horizontal scroll just under the banner. It makes navigating the landing page a pain, and very slow. Doing away with the weird horizontal scroll would make everything under it more accessible. As it stands, I’d be surprised if many people at all make it to the content below that section. <\/p>\n\n\n\n

I’m not a fan of the hamburger menu… there is just not enough navigation to warrant it. I’d like to see the 6 items in that menu visible from the start. <\/p>\n\n\n\n

Pete Buttigieg<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The very first thing I noticed is the distinct lack of a last name (maybe because I was looking for spelling). This is probably a good thing as it’s a hard name to pronounce (it’s butt-edge-edge) and spell. However, this design is nice and simple, to the point, and easy. He hasn’t hidden his navigation and the call to action is evident. <\/p>\n\n\n\n

The photo is weird to me. He’s looking in the wrong direction and crossed arms give the impression of a closed off nature. I’d like to see a better choice here.<\/p>\n\n\n\n

The rest of the page features some nice grid breaking layouts that help to carry his “Fresh Start” idea, the layout is different and unique. I will say, though, that the navigation disappears when you scroll down. While this might be a choice, we are left little context on the rest of the page… and no ability to navigate without scrolling up… a problem on long pages. Note: I should take this note on Mindshare’s Website… practice what you preach.<\/em><\/p>\n\n\n\n

Kirsten Gillibrand<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Brave is definitely the word I would use in describing this site. It’s bold, interesting and unique. But it does have it’s problems. Most notably the word “wins” is cut off. From a web development perspective that’s an easy fix. Actually, in playing with the code I was able to fix it with a single line of code… there is a lot of negative space above her headline to allow this.<\/p>\n\n\n\n

I’m not incredibly excited about her various button sizes and widths (see join, donate, and volunteer). I’d like to see the same treatment across those buttons. They should all have a background, or not; they should all have an icon, or not; and they should probably all be the same width. This same note can be applied to the navigation… those items should be vertically centered in relation to each other.<\/p>\n\n\n\n

The layout is bold, but relentless in its presentation. It’s almost tiring to look at and read. I’d like to see more negative space, more time to parse what she’s presenting. So, good bold choices, but the site needs some refinement. <\/p>\n\n\n\n

Bernie Sanders<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Bernie’s site is to the point and simple. His landing page is the simplest of them all as it doesn’t scroll much below the main banner. However, the small amount of text below “Not Me. Us.” is completely lost. I’ve read it a couple of times, but couldn’t tell you what it says off the top of my head. <\/p>\n\n\n\n

The auto play video in the background is a nice touch. He’s using footage from his 2016 campaign likely hoping to re-energize his supporters. It’s nice to see the movement and his charisma presented as he’s one of the oldest candidates running. Although, from a technical standpoint, that video doesn’t play in some browsers… not a huge deal but something to consider.<\/p>\n\n\n\n

Joe Biden<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This website is simple, direct and well done. His site is meant to feel relaxed and effortless. This allows him to be specific in his call to action and in his design. (I mean, his tie matches the font colors.) There is a generous use of white space which is nice and elegant. <\/p>\n\n\n\n

From a photographic standpoint I’d like to see his shirt not blend into the background… although that feels a little nit-picky as the design is well executed. <\/p>\n\n\n\n

The UX of the site is a little lacking. As I scroll down, the menu navigation doesn’t follow me, but the donation menu does. This is an odd choice, but does present his priorities clearly…. and unfortunately. <\/p>\n\n\n\n

Also, check out the bold choice of putting the word ‘president’ right under his name. <\/p>\n\n\n\n

Beto O’Rourke<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This site has a similar layout to Bernie Sander’s home page. There is nothing below the main banner and his paragraph text is mostly lost to the bolder elements around it. His headline could be a statement and<\/em> a call to action making the words below it useless. I’m not a huge fan of the sweaty photograph, but it is a nice departure from the clean presentational look all the other candidates are rockin’. <\/p>\n\n\n\n

His navigation menu is executed well. It could be a bit bolder and more present, but it works well as a second thought. <\/p>\n\n\n\n

Donald Trump<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This is one the least successful candidate website of the bunch. It’s void of any risk taking and feels much like a newspaper or blog website. It’s more of a promotion than it is a representation of a candidate. The silly use of a solute photograph comes off as pandering and cocky. <\/p>\n\n\n\n

\n\n\n\n

Typography<\/h3>\n\n\n\n

Typography choices not only provide a way for candidates to communicate effectively, they can also help to shape the tone and character of a campaign. Back in 2008 the Obama campaign presented a fresh new perspective on political typography using the font Gotham<\/a>. This introduced a fresh, outsider-like feeling. Now, almost every candidate in the field is using a sans serif Gotham-esque font for headings. It seems that geometric sans serif fonts are here to stay. <\/p>\n\n\n\n

Headings and Display Fonts<\/h4>\n\n\n\n

Bernie Sanders and Beto O’Rourke are the two that have strayed from the pack when it comes to website headings. Bernie Sanders is using a Slab Serif. Slab serifs offer bold, weighted presentations. They can often come off as oppressive and heavy, but the font he chose, Jubilat, has nice fillited curves into the letter feet which make it come off as strong, humanistic, and friendly. <\/p>\n\n\n\n

Beto O’Rourke, once again, surprised me with his choice. His headings use a font called Prohibition. This font harkens a sporty vibe that introduces energy almost in the same way a team’s jersey might. In fact, I wouldn’t be surprised if this font is used on jerseys someplace. He seems to be saying ‘I’ve got the energy and gumption to get things done.’ <\/p>\n\n\n\n

Kirsten Gillibrand stands out amongst the crowd for her bold use of headings. While her font choice is not very surprising, the way she’s using it is. She’s stacked and overlapped her geometric font creating a very fresh, bold, and brave look throughout. Unfortunately, Joe Biden tried the same thing but his website comes off as a Squarespace template. <\/p>\n\n\n\n

Trump chose the font Montserrat which is the free knock off of Gotham. It’s interesting that he chose a font so close the one of his fiercest rivals, Obama (yes, even though they never ran agains each other). It’s a simple, readable, established font choice. <\/p>\n\n\n\n

Body and Paragraph Text<\/h4>\n\n\n\n

Body and paragraph text should related to and support the display fonts. These two font choices should work together to establish tone, message and character. So, it’s no surprise that most candidates are choosing to rely on display fonts for the heavy lifting. The body copy fonts are straight forward, dependable, and obvious choices. Which is good. There is often a considerable amount of information packed into these paragraphs, so the font must <\/em>be easy to ready, parse, and understand. <\/p>\n\n\n\n

Kamala Harris, Pete Buttigieg and Tulsi Gabbard chose serifed fonts for their paragraph text. Serifed fonts typically present information with a little more weight and seriousness which sans serried fonts are more friendly and conversational. I like this choice, especially as it relates to other parts of their campaigns. Kamala, Tulsi, and Pete have all taken risks in their color choices so it’s nice to see a serious tone so the overall feel of the campaign doesn’t come off as campy or funny. <\/p>\n\n\n\n

The use of sans serifed fonts in the other candidates body copy seems typical but reaching. Candidates are all having a hard time relating to voters and this choice seems to reflect that. Using a more conversational, friendly font helps to bridge the gap, but it’s coming off as typical and tired, especially when paired with red, white, and blue. <\/p>\n\n\n\n

Conclusions<\/h2>\n\n\n\n

What I found most interesting in my research was not how similar the websites are but how a few candidates chose to stand out amongst the pack. Beto O’Rourke with his energized presentation, Pete Buttigieg and Kamala Harris with their bold use of yellow and Kristen Gillibrand brave layout choices. These differences speak volumes about each candidate and what their plans are to engage voters. <\/p>\n\n\n\n

\n\n\n\n

Disclosures:<\/p>\n\n\n\n