Redesigning Mark Susters blog, Bothsidesofthetable.com

Mark

Mark Susters blog is one I’ve been reading for years and one of the very few I check daily.  Being a designer by trade, I readily offer up my design critiques for free.  I’ve already given Brad Feld my two cents and wanted to do the same for Mark.  However Mark’s blog was less in need of critique and more in need of a complete overhaul.  I bugged Mark about it (in July) and he agreed to give it a go.  Having worked with Mark before on creative projects I knew this was going to take a very long time.  That’s just the way it is with busy people (and free work).

You can see an archived image of Mark’s site here.  Large file warning! Thats what you get when your front page is 21,000 pixels in height.

There are two major problems with Mark’s old design.  The first is that it completely lacked personality.  It was top blog in its category, from a technology investor, and it was using the most basic wordpress theme.  The content deserved a better treatment.  Something with an identity that was also modern in its implementation.

For a while I’ve been totally enthralled with the way Newsweek treats its feature magazine content online. Huge graphic headers. Really clever parallax cutaways to surface full width images. Carefully guttered content images.  All legit.  So I found a wordpress theme that had the right basic elements and was able to hack in what I wanted with the help of a fiverr coder.  I am a huge fan of fiverr and have spent over $1,000 there in $5 increments.  It’s been an invaluable extension of my skill set.  I don’t code, I’ve tried, and while I am decent at hacking with html/css the intricacies of some of the more modern wordpress themes elude me. I took a chance on a Pakistani developer named Mudassar Ijaz and he’s been indispensable.

The other indispensable person was Kyle Taylor who does “platform management” (whatever that is) at Mark’s firm Upfront Ventures.  On this project Kyle was Mark’s liaison and also a second pair of design eyes and hacking hands.  Working with Kyle (starting in November), rather than with Mark directly we were able to get this project done in record time.  Well… three months.

So with the right blog theme and structure, I could focus on the lacking personality.  I had this concept of doing a pixel art illustration of an old and young Mark sitting across a table.  I am no pixel artist, but that is what fiverr is for.  I found a guy, Eloy, and he is awesome at pixel characters.  I did a little photoshopping and came up with the follow header for Mark’s blog.

bspixels

I thought this was just awesome.  Humorous, light, and fits in with the tech audience.  Kyle dug ‘em, but Mark wasn’t too jazzed.  Too… gimmicky maybe.  I went a few rounds to see if there was a way we could adjust and get them in there, but it wasn’t happening.  Back to both sides of the (drawing) table for this central element.  Side note: I did work with Eloy on another outside-of-fiverr project that did really well.  But the header was the main opportunity to inject some personality and customization.  We tried a few different backgrounds of LA, but they felt too generic.  Then while searching around for inspiration I came across this charcoal image of Mark, which he is using for his about.me page.

marksuster_1284707325_12

I am pretty sure the other guy is Brad Feld and this is from an episode of This Week in Venture Capital.  I thought it could make a great background header but of course would require a lot of ‘charcoal-shopping’.  I went back to my young and old (er.. current) Mark idea and extended the table, ‘shopped out Brad (sorry!) and added a younger Mark.  It came out really well I think. Click for larger version.

MarcoalLargeI am all about details when designing, so for this ‘shop I had the younger Mark be a bit more wide-eyed (literally) and optimistic (up-turned mouth) which I think fits well with Mark’s blog and content.  If you can’t tell its been manipulated (without seeing the original) then I have succeeded.

There were 101 other smaller design decisions and Kyle did a stellar job turning many of Mark’s post into really handsome works of content.  The second major issue with Mark’s blog is the organization and structure is a mess.  He has so much evergreen content that it just impossible to find since, as many bloggers due, he abandoned useful post tagging and categorizing early in the blogs life.  But we already have a really great solution for this in place, it’s just not live yet.

The whole thing turned out really well and I think Mark’s blog is certainly the dopest VC blog on the net right now, as always in function, but now in form too!

http://www.bothsidesofthetable.com/

Edit: In case there are future design changes from my original, here is working version for posterity. http://byjess.net/bothsides/

11
Feb 2014
AUTHOR jess
CATEGORY

audit, design, projects

COMMENTS No Comments

Movie Trilogies: Visual.ly + BYODesigner

In the unending quest for viral graphics I had the idea to compare movie ratings across trilogies.  This is not a new idea, and has been done before, but it’s a great idea, and worth exploring yet again with a different angle.  IMDB is a goldmine of data and one angle I thought was interesting was the difference between the composite critics rating and the average user rating.  Did viewers agree with critics?  Where was the gulf the widest?  A survey of the top movie trilogies would surely surface some insights.  But that alone is not enough for virality, like I said, its been done before.

I wanted to bring a visual element to the graphic.. a custom touch.  I had worked with a pixel artist, Eloy, before and knew his style would be perfect for what I envisioned.  As I have many jobs to do as Creative Director at Visual.ly, I always ‘dogfood‘ our own product as it saves time and headaches.  I started a project in our marketplace and brought in a journalist who could collect the data.  Normally on these marketing graphics we would source a designer from our own pool of certified talent but since I already had a designer on board, I only made use of Visual.ly’s journalist talent and the efficiency of the project center itself to get this graphic to completion in record time.

I love the result.  Eloy’s characters are wonderful and I regret not being able to use them at full resolution.  Below is the one trilogy I wasn’t able to include in the graphic as there was no acceptable critics score available.  Can you guess which trilogy it is?

Dollars

 

The rest of the design, besides the characters, was done by myself, and my Visual.ly compatriot Drew came up with the title.

[Link to larger version]

 

Movies So Nice They Made Them Thrice

by jess.
Explore more infographics like this one on the web’s largest information design community – Visually.

 

16
Jan 2014
AUTHOR jess
COMMENTS No Comments

Logo exploration: BR

Logo flexing on the BR letter combination.

BR logo

 

BR2

 

BR4

 

BR3

 

Br7

 

It doesn’t work so well as light-on-dark because it flips the light direction and becomes less legible  Although it still looks handsome, it feels more ‘baseball’ than ‘bevel’.

29
Oct 2013
AUTHOR jess
CATEGORY

design

COMMENTS No Comments

Bartering design services (for the post-apocalypse)

My son Forest is 6 and enjoys archery lessons from a local coach in town.  While talking to his coach I mentioned I was a graphic designer and he mentioned that he needed a logo and some apparel created.  It just so happened that Forest needed a new recurve bow so a straight up trade was a made.  One logo for one recurve bow.  The bow was $150 and this is NOT what I would charge normal clients for a logo but factor in the local discount and I was up for the challenge.  I had never bartered design services for a physical item before so I wanted to experience that.  In case.., you know… the monetary system collapses and I have put my design skills to use in the post-apoaclypse, I wanted to see what they were worth.

I also wanted an excuse to test out Hunie.co, a design feedback community, founded by my Visual.ly colleague, Damain.

I like my logos to pack a lot of meaning and depth.  I already had the idea to use the rings of a tree cross-section to represent an archery target, and an bullseyed arrow could be pointing “north”.  Actually visualizing the name is the best you can hope for in a logo.  Here was my first attempt.

Archery

I submitted it to hunie.co and got some quality and actionable feedback from several people.

feedback

I made the recommended changes and uploaded another version for round two.  The circle icons below are where on the graphic people have left feedback, a super handy feature for getting at those details.

NWAblog3

 

At this point I considered the design final and decided to use my 3rd and final revision to get feed back on some colorways.

 

NWAblog4

I received another three comments on the colorways and presented the finals to the client who was quiet pleased.  While I normally would not do a logo for $150 I wanted the opportunity to work with(for) someone so far outside of my design startup circle.  Forest’s archery coach did not even know how to use a computer and request the file on “tape”, not joking.  The whole process only took a few hours and it felt good not having to pay money for something for a change.  Thanks to ol daddy’s design skills, Forest is hitting more bullseyes.

Watch out zombies!

08
Oct 2013
AUTHOR jess
CATEGORY

design, personal

COMMENTS No Comments

Quickie: FeldThoughts.com

I wasn’t planning on posting this, but since Brad made it public, I might as well.  FeldThoughts is a site I visit a few times a week.  One of few, so when the site design was radically altered (not for the better) I was a bit disappointed.  After I was able to filter out my irrational objections to change, I sent some annotated feedback to Brad.

click for largeness

Feldthoughts

 

In short, the overall aesthetics are good.  The designer, J Cole Morrison has demonstrated some talent here for sure.  And while the enthusiasm in design is present, the focus is not.  I see this a lot.  Too much attention paid above the fold combined with other inefficiencies do not add up to a sum of their parts.  Great design is holistic.  See Jerry Colona’s blog for a masterful look at focus and branding.

21
Jun 2013
AUTHOR jess
CATEGORY

audit, design

COMMENTS 1 Comment

Hierarchy of Designer Skills

This post originally appeared on the visual.ly blog.

When I evaluate a designer for potential inclusion into the Visually Marketplace, I have very little time to assess their work and portfolio. Usually, fewer than 10 seconds. This may sound like far too short of a time to get a sense of someone’s work, but in most cases the decision is obvious.

In less obvious cases, I work from the hierarchy below to see if they pass the test.

I created this specifically for infographics, which is the medium we work in most — but it may apply to other design disciplines as well. As a designer becomes more skilled, they progress up this pyramid, usually – but not always – in this order. Let’s go through these skills one by one.

Color

The effective use of color is one of the most basic skills to learn. An inappropriate use of color is the largest and most immediate red flag I spot. Do the pallets fit the mood and tone of the content? Are the colors overly muted, too contrasted, or just off? These are some of most common mistakes I find.

Space

The use of space is very important for infographics, as there is a lot of information to convey with limited real estate. The first mistakes I look for are the overcrowding of elements and not letting them breathe. Then I look for the use or non-use of white space. Efficiency of space is important in an infographic, but if it’s too dense, the viewer will find it off-putting.

Typography

Effectively working with type is a skill that can take a long time to master, but an understanding of the basics is required for any successful design. Choosing the right font will only get you so far. Appropriate weighting, leading, and tracking should be applied every time. Kern those headlines, too.

Customization

You would be surprised how far a designer can get with stock images and icons. But to take it to the next level, a designer should be able to transform or create new graphics. This certainly includes traditional skills like illustration, but also modern skills like Photoshopping. I personally can draw slightly better than my five year old, but I can certainly create anything in my mind’s eye using Photoshop. This skill, above others, takes lots and lots of practice and there are no shortcuts. A high degree of customization skill will provide you a near infinite tool box.

Creativity

Being really creative involves having the design say more than merely the pixels on the screen or paper. Creative design makes connections between elements, ideas, and concepts that have not been thought of by the client, or the viewer. It often involves asking yourself, “Is this the best way to represent this?” and “How can I say more, without adding more”.

Storytelling

Many of the projects in the Visually Marketplace have a journalist assigned to them, to craft the story. But the final product is always more unified when the designer is also a storyteller. This doesn’t mean they create the story, but design is a language, and a collection of pretty words does not make an interesting book. Successful designer-storytellers pay attention to the evolving tone of the narrative and incorporate that into their work. The client may be too close to the subject matter to be objective, and so the designer needs to use the right tone, structure and imagery to guide the audience through the graphic effectively.

Versatility

If you have got a handle on all of the above (or below), then consider yourself a very good designer. Now, master being able to bring those skills to a wildly diverse range of styles, and you will be an invaluable designer. Specialization is good, but can be limiting, especially in a freelance world where clients can come from all walks of life. Can you create something that is minimal and clean? Loud and audacious? Suitable for a 19th century antique book seller? Or a 21st century aerospace company?

Every designer has their own preferences, but it’s good to get outside your comfort zone. Force yourself if you have to. I cut my teeth in design doing concert posters for a local music venue. I did one for every band that came in the door, whether they were death metal, experimental noise, traditional singer-songwriters, or hippie jam bands. Hundreds of posters later, I have picked up a deep collection of tips, tricks, and ideas that affect my personal preferences.

14
Jun 2013
AUTHOR jess
CATEGORY

design, visually

COMMENTS No Comments

How to Go Viral Every Time

Originally appeared on the Visual.ly blog.

Everyone wants their content to go viral. It’s the holy grail of marketing. It can turn companies and product into the talk of the town, even if they sell toiletries. The ROI on content with more than a million views is almost unmeasurable. So how do you make sure your content will go viral?

The secret is simple. Be incredibly lucky.

Luck is the third piece of the virality triumvirate and obviously the hardest to bank on. In fact, you cannot achieve true virality without it. With great content and powerful tactics you can certainly get millions of views on a consistent basis, but if lady luck doesn’t give her blessing, you will end up with a good – but not great – ROI.

So let’s take a look at these three puzzle pieces and see how they fit together so you know where to put your efforts.

There are different levels of viral success, from a few thousand views to Gangnam Style. It’s important to understand what you can reasonably achieve with the right amount of effort and to set your expectations accordingly. The chart below outlines what you need in order to achieve consistent results. Consistency is important because virality is, by nature, all about the outliers — and you can’t set expectations on outliers.

Tactics

To get any type of fire going on a consistent basis, you need the right tools and expertise. The most important is your platform. You just put up some content that you think will do well, how many eyeballs can you access to jump start the viral loop? This can be YouTube subscribers, Twitter followers, blog and newsletter subscribers, and main website traffic.

CollegeHumor has a huge YouTube platform of almost 4 million subscribers. This alone is enough to get the first 100,000 views on their videos inside of a day. This huge subscriber count is an outlier and would push the slopes of the above chart to the right, but it still does not guarantee virality. Their content is consistently funny and well produced and they have vaulted 16 videos above 10 million views. However, their total uploads number 1,900, making 10 million views a 100-to-one shot. You can’t escape the luck factor.

If you are looking to create dozens of videos with over a million views, then at the very minimum, you need a platform of this magnitude.

What if you have no platform? No YouTube subscribers, no audience, no tribe? Then you are like most people and everyone starting out. There is no roadmap of what to do here other than hustle and be smart. Social voting sites like Reddit and HackerNews will allow great content to flourish… some of the time. Sometimes, the very best content will get lost in the noise and never be heard from again, or it will resurface a week or a month later as the biggest thing ever. Trying to make sense of this will drive you mad.

The lucky outliers will destroy your expectations

Remember Rebecca Black? Her Friday video has topped anything by College Humor and her 33 total uploads have netted her 244,000 YouTube subscribers: a very respectable platform. But her Friday video was an outlier and with the absence of any real platform power (at the time), and questionable content, pulled in 48 million views. The obvious major factor here was just luck. She has done six music videos since, each receiving fewer views that the previous, with the latest one receiving 1.2 million views.

So if you do achieve some viral success and want to replicate it, take a hard look at the factors that lead to your virality. If it does look like luck was a major factor, then avoid a strategy that includes “winning the lottery twice.”

Even if you think your content is great, do not be seduced by outliers. The video from DollarShaveClub is hilarious and with a minimal platform would be enough to get to 100,000 views. But 10 million? That requires a substantial amount of luck and it’s likely they will not repeat that level of success even with better content. That doesn’t mean they shouldn’t try, as 100k views can still provide an exceptional ROI.

 

 

22
Apr 2013
AUTHOR jess
CATEGORY

marketing

COMMENTS No Comments

Notes from a Thousand Portfolios

100portfolios

 

Part of my role as Creative Director at Visual.ly is to evaluate infographic designer candidates and make sure the best are members of our Marketplace. Mostly, this involves reviewing around 20 to 100 portfolios per week. After looking at thousands of portfolios this year, I have come up with somes tips for designers to stick to if they are looking to get the attention of a creative director.

Your own domain vs hosted portfoio sites

Having your own domain and website is an opportunity and a risk. It allows you to immediately show off any website design skills you may have and this should be required for website designers. It isn’t needed for illustrators and other designers, but can still be an opportunity to show off your creativity.

My process when reviewing hosted portfolios is pretty automatic and routine. Stumbling onto a really well done personal website can immediately peak my attention.

The risk, however, is that most personal websites I’ve seen are not well done.

Regardless of your abilities or client references, it often is hard to get past a dated, sloppy, or out-of-touch site design. Remember: if you are applying for an open position, you can assume many more are applying as well, and the reviewer or creative director often has seconds to make a gut decision.

If you can’t put together a well crafted personal site, just direct me to a hosted portfolio.

Not all hosted portfolio sites are the same. Some are a pleasure to work with, others I would count as a strike against the designer.

Showcasing your best work

The ideal portfolio, whether hosted or your own, will allow the viewer to be able to quickly get at your best work. This means big images and good categorization. Some thoughts on the most popular sites out there:

Behance: This is by far the most popular service, which is unfortunate becaus

e it requires a lot of clicking on my end. The categorization is rolled into the same hierarchy as individual projects, so portfolios are often a mix of collections and one-off projects, which is confusing. If you have a diverse set of skills, Behance will not show them off. Also, the preview icons are small, which necessitates a click to find out what’s going on. Behance also has all sorts of useless information on the page, which reduces the amount of your work you can get on the screen and increases my inefficiency.

Cargocollective: Another popular one and it can do some impressive formats. The problem is that people don’t use them. The typical Cargocollective portfolio I see is a righthand text list of projects or clients, usually in a small type and a smattering of 200×130 thumbnails. There is no real hierarchy, which results in a lot of wasted clicks. Cargocollective does strip out all the useless info that surrounds Behance portfolios, but it often leaves a hole for content, which few designers opt to fill with further design or useful info.

DeviantArt: I’m a big fan of DeviantArt and have been a member since 2003. The portfolio offering does a lot of things right. This is different than the gallery on your DeviantArt page: please don’t send me there, it’s a mess. The basic structure of daportfolio.com is a list of categories, which take me into the projects or samples. The project images are nice and big, which is what I am looking for. The images roll through in slideshow format and I can usually get a good sense of your work in 10 clicks or less. My main gripe about daportfolio is they afford the designer little room for personality or personalization and the fixed-width/ non-responsive design is a bit dated.

Carbonmade: It’s generally a pleasure to view a Carbonmade portfolio, as they do much of what daportfolio does right — hierarchies and large images — but also allow the designer to express some of their style in the portfolio design itself. While some Carbonmade portfolios are put in a clickable slideshow, there is also an option for a scrolling presentation. I generally prefer to use the scroll wheel on my mouse rather than click to view content.

Visual.ly: I am certainly biased, but it’s worth noting that some sites are really geared to certain types of content. Often, video or interactives will be displayed poorly on the above sites. Likewise, infographics — which are often very tall — end up displayed awkwardly. If you have infographics in your portfolio, I suggest you get them on Visual.ly.

Recipe for a successful portfolio page

There seem to be portfolio sites popping up all the time so if they can follow this basic recipe, you can have a winner.

Use categorization. If you have 20 illustrations, 10 site designs and 6 infographics, group them! Ditto, if you have 5 projects for Coca-Cola and 4 for Adobe. This helps me get an overview of what I am looking at and I can focus on the quality of the work rather than deciphering the context.

Go big or go home! I suspect most creative directors like myself have some pretty big screens. Do not be afraid to use big images, even in thumbnails, to show off your work. Large images stimulate more of my cerebral cortex and if the work is good, this will easily put you in the “memorable” category.

Don’t get too fancy. Please refrain from unnecessary fading or moving effects; those just slow me down. They may impress a wide-eyed potential client, but it’s just friction to me. Krop uses this technique and it’s irritating as hell. Not the frame of mind you want me in when looking at your work.

Do you need the network? Many portfolio sites are network and community oriented. Dribbble is a great example and Behance goes down this road too. A community of your peers can be a great asset to your progression and networking ability but it’s superfluous to someone who is evaluating your work. Please do not send me any Dribbble profiles! I do suggest designers maintain an active Dribbble, Forrst or Behance account for the community benefits but also have a separate profile that they link to when showing clients or employers.

Your portfolio is an expression of yourself, but always remember the intended audience. If you are actively seeking clients or a job, you should try to stand out but err on the side of efficiency and ease of use. Employers who have a stack of 100 portfolios to go through will thank you for it, maybe with a job!

 

07
Jan 2013
AUTHOR jess
CATEGORY

marketing, visually

COMMENTS No Comments

Ballot Prop Round-Up: California

Rushed this one off the presses this morning.  Really interesting to see how much money it takes to defeat a popular idea (prop 37) and how much is hugely wasted pushing an unpopular one (prop 38).

Click or larger…

07
Nov 2012
AUTHOR jess
COMMENTS No Comments