New branding and marketing site direction


#1

Hey guys, I’m currently working on a new brand and marketing design direction for Hugo and I wanted to share it with you all. I love this project and although I’m not a fullstack developer experienced enough to smash bugs, I wanted to do my part and contribute my skillset.

I believe with a strong branding position and clear marketing portal we can attract more people to this project and help Hugo become the most popular static site generator in the world.

Check it out!
STILL WORK IN PROGRESS



#2

Can you explain a bit of your rationale behind this proposal?

For instance I see that you are proposing a new Hugo monogram, that is a tilted H with gradients.

If I half-close my eyes it seems to me a bit like a butterfly.

Also why the lowercase? Is this custom lettering or an Open Source font?

Regarding the typography I am not sure about the g character in the wordmark. It is a bit complicated and it won’t scale well at small sizes.

Other than that I do not know whether the Hugo maintainers accept design proposals for the Hugo project’s brand identity. (I’m just a forum moderator who happens to be an art director).

CC/ @spf13 @bep


#3

I’m also curious: what’s wrong with the current?


#4

Is branding much of factor when selecting a technology for a project?

You don’t see that notion popping up in the benchmark/comparison articles do you?

But I’m curious to hear your point.


#5

Thanks for your feedback, when completed I will provide a full visual walkthrough of the thought process but for now will answer in the meantime.

The rationale behind the new Hugo monogram is actually quite simple, Hugo is the world’s fastest framework for building websites. The new Monogram is a combination of the letter H, a flame, and scaffolding. H because well, Hugo, flame because it is blazingly fast and scaffolding because hugo is a framework/foundation that we build out projects on.

The typeface is a fully open source typeface which was recently added to Google’s public family of fonts called IBM Plex Sans.

After experimenting, what I’ve found was that this g with its cursive nature adds that extra level of personality to the typemark. Writing out the typemark in lower case was a personal design choice, it also happens to be a common style adopted in the tech space to allow for a more friendly look.

So just a quick background about myself, I am currently a Marketing design lead for a software company and also run a boutique design studio with my wife providing our clients with branding, advertising and digital design services. We’ve been super lucky to work with clients based in San Francisco and also recently helped launch a premium outwear brand based in New York, 2017 has been a fun year.


#6

Nope. But everyone wants to look their best. :wink:


#7

Hi Rick!

To be honest in my professional opinion I think the current design of Hugo is very weak, outdated and doesn’t live up to its potential. The four cmyk like colors on the homepage has no obvious connection to its values and in my opinion the site does a poor job of establishing trust for newly exposed visitors. Even myself, I nove love Hugo and I’m glad I made the decision, but it took me a long time and I probably would’ve been convinced earlier on if Hugo visually portrayed itself as a thriving project.

Hugo has the ability to provide immense value and efficiency to many users and businesses, and I think there are real opportunities to communicate those values and position Hugo to be the best in this space by aligning its strengths with its messaging.


#8

I can only speak for myself but for me yes, branding and visual design plays a huge factor when selecting technology for a project. It plays a big factor for three reasons, it tells me that the project/company cares about detail and hopefully this attention to detail is reflected in their product. It tells me the project/company is well established and has a growing community with bright future ahead. It also helps me to get excited about using the product. There are other emotional responses I get but those are some of the reasons.

Benchmark and comparisons are important, but if we can achieve both then we would maximise our chance of capturing our users hearts.


#9

I hope they do consider design proposals, It would be great if we could unlock its potential!


#10

Conceptually I have reservations about using a font that is associated with a big multinational for an Open Source project. And I am saying this as a designer not as an Open Source fanatic.

Other than that I now see what you mean about the flame and the scaffolding.

Again it’s not for me to decide about anything. And good on you for putting your time into this.

But if Hugo’s maintainers feel that the project’s identity is weak they could I suppose make some sort of an Open Call.

Personally I have refrained from creating a brand identity proposal for Hugo out of the blue and it’s not like I haven’t thought about it in the past.


#11

Your comments are very interesting but I think if a new logo emerge it should build on the octogone hexagone legacy. Attracting new people should not derail current’s community feeling of ownership.

I would not bet on a future website overhaul. This one is not even a year old.

But I must admit I love reading ‘hugo’ with the typeface you selected.


#12

That’s a bit tricky. There is after all Hexo that also uses an octagon hexagon.

BTW I’m not sure who came first (Hugo or Hexo).


#13

Yeah that was one of the biggest reasons why I steered away from the hexagon. There were already too many node related associations. nodejs, hexo. Personally I don’t moving away from the hexagon of derailing the current community’s feeling of ownership, the emotional responsive I WOULD like to hopefully achieve is excitement for change, differentiation and positive outlook.


#14

Also it’s a bit of a design cliché. A naturalistic beehive metaphor. (yawn)


#15

2 things I learned in this thread

  1. Nodejs and Hugo both bear an Hexa
  2. This is not an octogone dummy!

I wouldn’t go too hard on the current logo, people very important to this community put efforts and fun designing it. And I grew found of it.

Nice chatting.


#16

This isn’t about hurting people’s feelings. This about communicating efficiently.

And efficient design does exist in Open Source Projects, for example the Debian logo is very cool and memorable.


#17

I understand, and I understand hurting anyone’s feeling was not your intention. Yet I believe there is way to present ideas or need for evolution without dissing the work of others.
The minute you start focusing on growth, all the greatness of an Open Source project (sums up to its focus on human convergence and community) is put at risk, so words should be chosen wisely.

I am in no way questioning the existence of efficient design in Open Source Projects. I just don’t know about the memorability of the Debian logo helping its user base grow.


#18

I appreciate your passion and desire to help improve Hugo’s brand. We all volunteer our time, and it’s valuable, so thanks for spending it on the Hugo community. However, …

The Hugo site was redesigned and launched over the last year. Several people put much time into it’s design, iteration, and launch (which I contributed little to–I’m not a designer). I’m not going to discourage you from fleshing out your ideas of a full site redesign, but realize that you have an uphill battle on your hands.


#19

Thanks for taking the time to answer. Now that you explain it, I like the logo concept. As was mentioned in this thread, the hexagon is indeed pretty overused, when you search for something like hexagon logo on Google.


#20

As the primary designer/developer of the current site, I’d be quite happy to not have the current logo, or color scheme I derived from it. I also like—at a glance—the Plex lower case g; though aside from that, it is very similar to the current typeface, Muli, which, again, is derived from the logo.

What you may not be aware of is that the current color scheme of the logo may be related to the Go language’s gopher mascot and that the original design (from 2013-14) was meant to convey friendliness and fun, which those colors do convey. I don’t see any of that in your mockup (because you didn’t ask first).

I think if Hugo were to go through a branding there should be a brief with careful consideration of these factors. Suddenly showing up to say the entire site is “weak” is not a great place to start.

What I think would be productive, if you really really want to contribute, would be some help in other, more incremental regards. The icons just below the news section all have different line widths (they were the only thing I could find at the time) and need improvement. We could use better icons for Twitter and GitHub and there are specific sections of the site that could use some fresh ideas, that I or others would be happy to discuss.

and for what it’s worth, Hugo already is one of the most popular static site generators in the world.