Homepage redesign #3
Comments
|
Thanks for starting this. Where is this idea in terms of high-level approval? Seems to me could be a lot of work that could be for nought. |
|
And, I think it would be a good idea to get a sense of what's important and what's not. e.g. colors, the "logo," such as it is. However, I'm happy to jump on this whenever it's appropriate. |
|
Right next to the gopher you added the Markdown logo. Markdown is perhaps the most widely used format but it could underrepresent the support for Asciidoc, reStructuredText and the Org mode. Below you added a few commands to install Hugo via brew (on OS X). What do you think about the addition of a panel with tabs, where the user can choose the source manually? Currently, third-parties maintain packages for nearly every platform:
|
|
Sorry gents for the delay. You can see the latest homepage at
Honestly, spf is still silent on the Gitter channel. The way I see it, the biggest problem with these docs isn't the design at all: it's the content. I might just tweet him at this point.
You make a strong point. I removed the markdown logo. This was my own markdown-centric bias. That said, I use "Markdown without Limits" in the "features" row of the homepage. Any suggestions? I do at least call out the other formats below the heading...
I like this idea too. The little animated gopher (I need to a CC reference to Renee French) is now just about a In fact, I could probably just write a little browser sniff that pulls up the command auto-magically, although scripts I've written before were only tested on Windows and OS X. |
|
@rdwatters you are a man of action. See you created something already. |
|
@budparr @digitalcraftsman Seems like some good news in the Twittersphere.
READ: man of compulsiveness, haha. But thanks @budparr I could use your input on typography. I was going to let gohugo.io use my Typekit account...but it looks like my monthly limit is 500k. Gohugo.io is getting 1M+. Any suggestions on a free/open-source alternative to Museo Sans? Or just a better font? Code is currently using Roboto Mono. If not, I have an actual purchased version of the font that I'm happy to donate...I clearly love this font 😄 That said, I would still like input from both you guys because: a. I'm not a designer. At all. The lion's share of the work I've done on this has to do with content and making the documentation usable and beginner friendly. This also meant improving the organization and URLs to be a bit more intuitive. My next big change will be redoing the "Quick Start" to showcase v18+ features and to be, well, quick. I'm very happy to take even the harshest of criticism on matters of visual design...which to me is always secondary. Seriously, we can completely scrap even this second homepage if that's what the maintainers want. Even then, please keep the content revisions coming. I have a lot of editing and revisions to make yet. Thanks for the keen eye @digitalcraftsman. b. Honestly, I'm not a huge fan of Hugo colors, so if you guys think we can do something else and get Steve to sign off on it, I'm open to do the coding even if it's just a matter of someone sending me a PSD file and me recreating it to spec. I'm really open on this...and I'm just not naturally drawn to hot pink. |
|
I think an open source typeface would be most appropriate. |
That's good news.
1M+ would exceed your limit by far. I'll try some other fonts but the current looks pretty decent.
Overall, it's defenitely an improvement over the current design. Currently, the theme has a very sterilewhite. A rebranding with a new color scheme would be consequent. |
|
@rdwatters we also have a adapt the new design to the theme site. What pros and cons do you see if we treat the new design as a portable theme that can be included as a Git submodule in the Hugo main repo and the repo for the theme site? This way we don't have maintain two code bases which might diverge. Updating a commit reference should be easier. |
|
@rdwatters I think this font will get you close to what you like about Museo Sans, and it's open source, and there are no limits, of course. I think it works well at all sizes. I think you have to watch using those lighter weights in there too (you have a 100 weight for the tagline, at least). You don't need all the weights I've listed here. I'm happy to implement this. |
|
I have Poppins locally and just added it to the I have a handy little "fonts" mixin that's called at the top of The only thing about Poppins is that there is no italic. Thoughts? If either of you guys want to play with the typography, there is already a decently sized selection from what I have in the repo. You can probably infer the signature for calling the mixin from the above. The naming convention is just lowercased without spaces: I should probably remove Proxima Nova 😄 |
That's either a lack of creativity on my part or just the assumption that the highest readability is always a) black text on a white background or b) white text on a black background. I know moorereason will be concerned about readability.
Honestly, I see very few drawbacks and I'm all for sharing the final design one it's ready to launch. Actually, I originally set it up as a theme (i.e. in |
Agreed. Updated. |
|
Funny. Didn't know that about the italics. I wonder why. At any rate, yeah I don't mind playing around. I don't find any of the open source fonts terribly inspiring, it just seems to me appropriate for the project. |
Agreed. I was a little tongue in cheek in saying how much I love Museo Sans, but I think it seems to work okay...and I'm happy to make the donation to Hugo if the three of us can't find a better free alternative. |
|
Here's a draft of the home page, and a couple of notes. Been going through the copy, but it still needs some work there. There's been some discussion about colors. I embraced the existing colors in this design and think I found a balance with them. Look forward to your feedback. Note that here I'm using releases as news. I don't want to create work for anyone, or subvert any existing automated processes, but I know as a user that I like to see activity, so I created a place to list these items. Something to talk about. I didn't use all the icons you had on your initial draft, Ryan, but happy to add those in. @rdwatters Consider the "Muli" typeface. It's open-source and shares characteristics (loosely) with the HUGO in the brand image. I think it works well on headings and is capable with text. Let me know what you think. When creating this page, I assumed an audience like this:
I tried to keep the messaging somewhere in the middle. Also, @rdwatters . I don't know what happened to the blinking gopher eyes. Maybe you can tell me how you did that. Note that I changed "The world's fastest static website engine. Written in Golang." to "the world’s fastest framework for building websites" to try to get to the heart of what someone might be coming here for. I think users care about a "framework" for "building websites" and that it's "fast." Whether or not "fastest framework" actually has meaning, is another question, but the overall phrase struck me as a strong assertion. Link: http://hugo-home-page-concept-170315-v1.surge.sh/ Some screenshots:
|
|
That looks absolutely awesome @budparr 🍻 Here are my two cents: The hero section of the homepage should take the full screen height so that the news are shown at the bottom of the screen. Furthermore, the changing background color in the when hovering a news item makes it look like a link. Perhaps we should add some kind of blog section where we threat the news as posts. Last year there were some discussions (somewhere in the forum) about the creation of a blog. @rdwatters? Furthermore, the hero section has in opinion a but too much text. |
|
Yeah, I think it's a very copy-heavy page in general, just wanted to make sure we said all the things, but certainly can be pared. The news items are meant to be links to the full release notes or news item. I just took out the actual links until we decided whether not having them there was feasible. I hope so, because I think it's valuable. Unless there's an automated process for adding the release notes as they are now (all in one document) it doesn't seem like a news section would be much of a burden since there's already something there. Maybe there could be a group of the core team who are essentially editors and make sure that sort of thing gets posted. I know I'd be happy to help on that. |
|
I would propose that each release note etc. should be a single post. Adding them automatically to the homepage should be a no-brainer with a few lines of code. |
|
@digitalcraftsman Thanks again for your comments. Responses to specific items:
|
|
Hey guys. Long day at work so I'll give this a thorough review tomorrow night but first impressions on my phone? I love it!
Oh, and the gopher is a combination of CSS keyframes pointing to IDs in the embedded svg and then a couple extracted animated.css classes that are added on scroll. The typing in the terminal is done with blast on top of velocity.js, the latter of which I use on all the JS-powered transitions since it's so good at obviating JQ-jank. More to come tomorrow. So stoked, Bud. Thanks a lot!
…Sent from my iPhone
On Mar 15, 2017, at 10:01 PM, Bud Parr ***@***.***> wrote:
@digitalcraftsman Thanks again for your comments. Responses to specific items:
I shortened the copy in the hero section by 26 characters (-15%). That copy doesn't feel perfect to me, but it's in the ballpark, and I think about the right length (comes to 3 lines on all but the smaller screens).
I tried both vertical height and padding to make the hero section take up more screen space, to focus on the hero and news, as you pointed out. I went with padding because the VH setting caused an unnatural space on large screens. The padding option seems okay, and I am, to a degree, indifferent between the original and how it is now. Let me know how you like it: Here's the link: http://hugo-home-page-concept-170315-v3-header.surge.sh/
―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
D'oh! One more thing before I pass out. +1 on the Muli. It's already in the assets and is actually what I used for the original site I shared with the team!
…Sent from my iPhone
On Mar 15, 2017, at 10:01 PM, Bud Parr ***@***.***> wrote:
@digitalcraftsman Thanks again for your comments. Responses to specific items:
I shortened the copy in the hero section by 26 characters (-15%). That copy doesn't feel perfect to me, but it's in the ballpark, and I think about the right length (comes to 3 lines on all but the smaller screens).
I tried both vertical height and padding to make the hero section take up more screen space, to focus on the hero and news, as you pointed out. I went with padding because the VH setting caused an unnatural space on large screens. The padding option seems okay, and I am, to a degree, indifferent between the original and how it is now. Let me know how you like it: Here's the link: http://hugo-home-page-concept-170315-v3-header.surge.sh/
―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
@budparr I will have time to dig in this afternoon. What is your preferred feedback mechanism, especially w/r/t content changes? I already have some notes if you're cool with the GH thread. |
|
GH is fine. I had to build this in its own repo to make quick work of things, so I think right here is fine. Maybe you want to start a new thread just for content, and keep this one to design? |
|
Let's stick with this thread since I'm only talking about content for the homepage. A couple quick notes before I hop into this meeting:
This looks even more fantastic on desktop, Bud. Thanks again. P.S. Low-priority copy edit, but all instances of "OS X" are now "macOS." |
|
Cool, thanks. Quickly, on your 2nd issue. They are meant to be links, there's just nothing to link to until we set up a page for them. |
|
This line is pure gold:
|
|
This looks fantastic @budparr ! Just a couple of comments from an amateur:
|
|
Quick aside. As you may know, Smashing Magazine is moving to Hugo/Netlify, launching today, I think. Netlify has put out a video. It doesn't mention Hugo, but there's sure to be some, and perhaps, at some point, we could put a "look who's using Hugo" type of thing. |
|
New version with copy change from issue #42 |
|
Open questions:
Initial design discussion on current version starts here: #3 (comment) Very rough interior page for blog/news: #3 (comment) Current prototype here: http://hugo-home-page-concept-170317-v1.surge.sh/ |
|
@budparr I will look closer on this tomorrow, but this looks very, very nice. Love the colour scheme and layout. I'm a typography nerd, and while the font looks great in headlines, it would be great to see it in use in a long-text documentation page. Maybe an idea would be to use a serif for the body text in the doc part of the site and keep the "landing page" all sans serif? |
|
Thank you. I'm a typography nerd (or more like freak, in my case), too. The same typeface is in use on the current docs concept, so you can see it there, keeping in mind we've got another issue open (#43) on the docs design, which will contain further type improvements (adding a measure, that sort of thing) |
|
There are a dozen or so open-source fonts in the static folder if you want to play around with them, @budparr. I mentioned Museo Sans as well, which I'll have to find, but I'm happy to donate. @bep @budparr I'll defer to both of you (and the Hugo team) on visual design decisions--I'm by no means a designer. I think @digitalcraftsman can provide better insight and recommendations than I can. Color or font changes seem like easy wins, and Bud's design is easily 100 times better than what I put up on the live site. The blog concept looks wonderful too! I'd like to note that I want to avoid bikeshedding. This thread has the most comments and it's about three lines of copy. The content changes number, literally, in the thousands--including a pretty massive source organizational change, new content types and archetypes, etc--and I need to focus on these content pieces, especially in the issues list... I'm more than happy to outsource all things visual, including final decisions on what to use. I want to help write the book rather than design the cover: it's just not my area of expertise. @budparr would you like to be a collaborator on this repo? Then you can hack away as much as you'd like. Regardless, we both need to keep in mind this whole repo will ultimately be moving to spf13 once the stamp of approval has been put on it. Thanks guys! |
|
I'm fine with "Muli." Every font choice is a compromise–particularly when using open-source, but I think that's appropriate here)—and I think Muli is a good choice. Mentioned this earlier, but maybe it got lost in the comments, but there's an geometric affinity with the title in the brand image, and it's capable for headings (distinctive, but not too much) and appears to me to work okay at smaller sizes. That said, while it's good to have consistency with the documentation site, the docs have different requirements for type: density of the copy is greater, and the work that the headings have to do to separate chunks of content is critical. Muli is a good starting point and can be addressed if need-be, in my opinion. |
|
I will say this, though; I'm fine with Muli, too. It looks good (is distinct) and is easy-to-read in body text as well. this looks plenty good enough (and miles better than @rdwatters); and I am a big fan of getting stuff that is good enough out so people can use it and get a feel of it, and not jerk around too much with pixel peeping ... But then we need to get control of the deployment flow ( <= @spf13), and then we can push a new version every day if needed. |
Agreed on both accounts. It's awesome! I have added you as a collaborator, @budparr. Feel free to do whatever you think best to make the site prettier, friendlier, or more usable. That said, I request we talk about any substantive content changes you might want to make to the actual docs. I really appreciate your help and expertise. Thanks guys! |
|
Thanks @budparr for taking our feedback into account for each iteration 👍 This are some points that I would like to highlight in my feedback:
|
|
Good comments, @digitalcraftsman Thank you.
That should/will link to an aggregate page. I've stepped tentatively into that element, not wanting to put too much effort into it if wasn't going to be a thing. But sounds like people want it, so I'll go for it.
Only if they have meaning. Otherwise they're just dressing, and I find it a stretch to find appropriate icons for each of those things.
100% on all three of these.
I agree this should be addressed. I didn't want to work too hard on the initial version, but will definitely work on that, particularly since what we have their doesn't make the argument very well.
I think it's catchy though :) Open to suggestions, as long as it keeps the light tone.
💯 on this one too. Again, here I didn't put much effort into this page. Was just getting the ball rolling. I'll build out the news section. |
|
I'll break the releases into individual files (already an issue in here but I'm on my phone and getting car sick in this Uber) for easier management and to help create a list page for it.
As far as a separate repo, I still think all the docs and news/blog would just be within a single repo within the Hugo organization. The idea of only making changes to the docs with releases doesn't make sense either, since it negates any potential for iterative improvements as we collect feedback from the community for both old and new features. I don't see how a blog repo would somehow make it more inviting to contribute @budparr. Could you expand? We should also note that we currently have zero blog posts, and I'm happy to hand over design responsibilities and decisions to whomever, but form-before-content is asking me to kill my content strategist soul...
…Sent from my iPhone
On Mar 17, 2017, at 6:52 PM, Bud Parr ***@***.***> wrote:
Good comments, @digitalcraftsman Thank you.
the text "latest news" shouldn't change the background color while hovering it. Otherwise it would indicate a hyperlink.
That should/will link to an aggregate page. I've stepped tentatively into that element, not wanting to put too much effort into it if wasn't going to be a thing. But sounds like people want it, so I'll go for it.
what do you think about adding a few icons to the "What makes Hugo so special?" section?
Only if they have meaning. Otherwise they're just dressing, and I find it a stretch to find appropriate icons for each of those things.
in the "100s of Themes" section we could link the theme site.
the "Capable Templating" section only mentions Go templates but Hugo also has native support for other template engines.
the install section should have a link to the getting started / installation guide in @rdwatters revision
100% on all three of these.
the install section should have a tab menu for selecting the preferred installation method, i.e. the binaries from GitHub or the commands for the installation via a package manager
I agree this should be addressed. I didn't want to work too hard on the initial version, but will definitely work on that, particularly since what we have their doesn't make the argument very well.
"Install in minutes and start building websites in (milli)seconds." for a headline is rather long. What do you think about a shorter and more concise one?
I think it's catchy though :) Open to suggestions, as long as it keeps the light tone.
the font size of the main content of a blog post could be increased. On larger screens it looks rather small
💯 on this one too. Again, here I didn't put much effort into this page. Was just getting the ball rolling. I'll build out the news section.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Having the main repo is not encouraging to the average user (i.e. someone who may build sites with Hugo, but not a Go developer) to see past this and know what to do with it:
If there's to be a content-driven website, the repo should be focused on that. The Hugo repo is for software development. A repo to run a website that is content driven is a very different thing. Not only is it inhibiting to content creators, it's extra overhead for the core maintainers. More issues to sift through to see if they're just content-oriented or not. I'm not certain about this, but I imagine there are automatic tests run on the main Hugo repo, that are not necessary for updating content. Again, small thing, but just that much more of a cognitive overload for those involved. It also makes it harder if a content creator wanted to hook up their fork of the site to one of the external editors that exists now. (p.s. I understand, as @bep had made the case elsewhere, that Docs should be a part of the main repo so they can be released with the underlying software.)
I disagree that it's form over content, because we have the release notes, and we understand the tenor of a blog post (I've built well over 100 websites, I hope I understand by now ):). Sometimes we have to make assumptions about our content and adapt. I think for this to be successful, the minimum content would be a short version of the release notes, pointing to the full version in the docs (this is what Jekyll does, and it works well, in my view). But with that as a base, there could be much more: I think it's 'if you build it, they will come.' type of thing, and if they don't, the release posts are there. |
|
Note that the mono-repo motivation is mainly versional and not distributional. I.e. with a fast moving software, what API version does this doc support? With a monorepo that comes for free. And free is hard to compete with. A couple of requirements drops from that hat:
|
|
I was arguing specifically for the home page with a news section, not the docs. |
Sorry, didn't quite get this part when I first read your comment. |
|
Reflect some of the changes above and a [wip] news page |
|
Drunken St Patty's Day rant... 🍺 🍻 🍀 So sorry @budparr. |
Of course they should have a meaning but I can understand that it's hard to find appropriate icons. I just had a layout in mind that is similar to GitHub's homepage (if you're not signed in). |
|
@budparr The new font on the news page is golden. Very very nice to look at, and it nicely marks the distinction between "marketing" (i.e. the front page) and stuff that is meant to be read, long text, documentation etc. |
|
Should also add a good monospaced font for source code and "back ticked" text: Here is my choice of font faces in that department: |
|
Hey, @rdwatters Sorry for offending you, man. Certainly not my intent. I'm not sure if your criticisms are about the home page or my comment about the blog, or everything, but my "brandishing the credentials" was specifically about my ability to start with a set of assumptions about what a blog post might look like, so that we can get it up and push on it. Build/test/refine. |
|
@budparr please see my revisions to my comment above. I was out of line. Rough week and no worries. This all looks incredible! 😄 |
|
@digitalcraftsman - I think we're agreed on this. The Github homepage is great, though those are not off-the-shelf icons. That's my only point - just hard to find the right ones. I'll make an issue on the homepage repo so the idea doesn't get lost. |
@budparr @digitalcraftsman I have a premium membership to flaticon.com or nounproject if you find something you dig and want to add to the site or if you find something that's easily tweakable. I think I mentioned this, but there is a custom icon font(including a Hugo icon 😄) in this repo I made via fontello for reduced bloat. Embedded svg whenever possible (Bud is already doing this) for perf and accessibility is a better approach. Here's a direct link to the |
|
For anyone following, the [wip] site is here: http://gohugo.netlify.com/ and the repo is here: https://github.com/budparr/gohugo.io note on post design: https://github.com/budparr/gohugo.io/issues/3 |
|
I've accounted for everything brought up here, either by implementation or noting in the code or issues. Closing this issue so further conversation can take place in that repo. Hope that's okay, @rdwatters. |
Okay and then some. This looks freakin' fantastic. What are next steps for changing style in |
Feeling that the current homepage is a bit cheesy. I want this to look more like a slick marketing/landing page extolling some of Hugo's features.
This will likely live on a subdomain for review during developer (e.g. https://hp.hugodocs.info).
Some other OS projects with slick landings:
Parse
Feather.js
Yarn
Hyper
Bulma
The text was updated successfully, but these errors were encountered: