about.gitlab.com - Homepage redesign
Activity
@sytses @JobV we can always find them work in CE/EE. I wanted to propose help to website because:
- it is far from perfection in design perspective
- Sytse asked recently in email about improving website
Implementation is different question - obviously we can implement it only when have enough frontend power. But we can make design and implement it later. Or we can wait and stay with current design too. In this case UX people will not spend time on website but only on app. I am perfectly fine with that too.
@dzaporozhets I misunderstood, I thought app dashboard, not static website homepage, I forgot to look at the url.
I think it would be nice to look at improving the homepage, but it would be nice if it can be quickly implemented (no change in navigation structure).
@dzaporozhets totally agree about colors and style
Related: https://dev.gitlab.org/gitlab/organization/issues/413
@skyruler I want to redo the backend. If you can do the design and SCSS I think we can knock it out fairly quickly.
@rspeicher I know that we don't have a year for redesign our website but I'll try to do my best to finish it as fast as possible
mentioned in issue #418 (closed)
@jschatz1 what do you mean? ><
Edited by username-removed-127938Added Website Redesign label
-
@skyruler please stop working on website and pass all work to Luke tomorrow
@lukebabb
Source files:
Pattern source file (pattern.ai) and homepage wireframe (gitlab home.psd) you can find in gitlab design repository https://gitlab.com/gitlab-org/gitlab-design. It would be awesome if you can push also your work there so we can have an access in case that you or we need something.
Great, thanks @skyruler!
Could we set up a quick 30 minute 1:1, get to know each other a bit, and walkthrough the design repository? Might be a nice refresher, and help get familiar with gitlab.
@jschatz1 sure thing! We were going to split the meeting talking hand off and current state of the homepage redesign, second half chatting design repository and design process. Welcome to join for as long as you'd like, I could see value in all of it moving forward.
mentioned in issue #532 (closed)
Regrouping on the homepage this week and wanted to provide a quick update. I put together a fairly high-fidelity WIP wireframe based on our re-group meeting last week (https://gitlab.com/gitlab-com/www-gitlab-com/issues/532) and pulling some of the work Andriy did initially.
- Tagline/illustration: (placeholder) The idea is to create a nice welcome image, really like @skyruler icon/branch pattern and would like to develop it further — splashes of color, add in the tanuki, windmill (to represent the Netherlands, too cliche?), other objects that express the culture and personality of GitLab. Any suggestions?
- The "selling points" copy (purple section) could use some work...less wordy, to the point but without leaving out any key points.
Bring on the feedback...
@lukebabb This is good. First round of feedback below. More to come tomorrow when I have a little more time.
- I like the white at the top.
- Let's cut copy down heavy purple section down. I plan to re-do all of this copy but assume there will be 3 total sections horizontally and not 9 total.
- Will there be icons for the 3 purple sections?
- Will there be icons for the different editions? Same as current ones or re-imagined?
- Logos, logos, logos. Love it.
- Scrolling quotes from press are good. How is it on mobile/tablets?
- Let's think about how we can have the editable line (currently about Q&A) above the fold.
@lukebabb that is really nice and definitely needed! Love the graphic at the top
Design nitpicks:
- I like the color scheme, but I'm not sure the orange-on-purple contrasts very well. Maybe differentiate with text weight instead of color?
- I think the footer would be better off with just a single shade of purple. Assuming it has the same content as the current footer, maybe a dividing line or some other way of differentiating between the sections?
Grammar nitpicks:
- "Self-hosted, Scalable and Updated Monthly" should be "Self-hosted, Scalable, and Updated Monthly" (Oxford comma)
And @AshleyS is definitely right about the above-the-fold Q&A line. The January Q&A notice was up on the site for more than a week before it was updated. We should either have a second MR open that removes the notice so we can merge as soon as the relevant event is over, or we should have some sort of script to do it for us. I'm guessing this is Jekyll, so I don't know how we'd do the latter other than with JavaScript, maybe?
@connorshea I just caught the Q&A too and updated. Ping to @nearlythere and @EmilyKyle to add to the webcast process to update going forward.
Also, all copy is changing but YES for Oxford comma.
Edited by Ashley Smith-
@lukebabb @AshleyS Can we make sure that the company logos on the front page all use dark gray, preferably the exact same shade? Comparing the current front page with Mapbox's company list right below the fold, Mapbox's stands out a lot more because the logos are less "faded", I guess. Some other good examples would be Mixpanel and Intercom.
The sizing should also be worked on, a lot of the logos on the front page right now feel heavier than others.
@AshleyS Are you saying the old webcast link was up as of 10 hours ago? I changed that 2 days ago when we put the blog post live :/
https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/1488
But yes, the CTA should be an updated webcast link.
@lukebabb a braindump:
- the orange / purple combination is too intense. The orange should be less saturated..or different
- the product boxes can be lighter, maybe remove the background and add a little more border radius
- on my 13" macbook (screenshot full size), the products are below the fold and there is no visual cue leading me down
- the solid purple buttons are not pretty
- the purple links on top would probably look better in the same color as the letters in the logo, not sure
- I'm also not a fan of smallcaps / caps for the links on top
- the CTA about the webcast can use some more whitespace above and under. Maybe remove the line above.
- the grey text on the purple background looks a little meh. Why not #fff?
- the three headers (staring with
feature packed) look too close on the three boxes of text below it, maybe because of the lack of a graphic for on top though
Thanks for the feedback @AshleyS @JobV @connorshea — digesting it all...
@JobV this sounds silly, but could you send me a screenshot of your view so I can better accommodate the fold on smaller screens like the 13" macbook?
@AshleyS short answer on icons: yes. Currently the circles you see are placeholders for icons. I'd love to re-imagine them, and maybe do some custom work. But @skyruler mentioned we want to stick with Font Awesome icons?
For icons I think it's worth checking out https://fortawesome.com/ by Font Awesome. Paid version allows you to choose from several icon sets AND add custom icons. Pricing is driven by page views, so may or may not be realistic simply for icons.
Working through feedback, will update soon. Would love your feedback @sytses and @dzaporozhets@nearlythere updated the tagline last night as i didn't realize it was pointing to the next webcast.
I see in history you indeed changed two days ago! sorry about that. will revert my changes.
Yep let's try to change out webcast same day from homepage.
Regarding the background pattern. It shows a sort of pattern with items connected like notes in a network. It's eerily similar to a competitor's home page background.
https://www.atlassian.com/teams/software
@nearlythere are you referring to the proposed illustration at the top of the new homepage or the background pattern in the purple section? Or both?
GitHub also has their version: https://github.com/
Heroku, too: https://www.heroku.com/
Totally open to exploring other concepts. I just like the idea of taking icons related to GitLab i.e. the Tanuki and illustrating it in a way that also has the visual representation of a branch.@lukebabb I meant this background pattern in this comment: https://gitlab.com/gitlab-com/www-gitlab-com/issues/488#note_3642669
I didn't realize Heroku was also similar.
Weird!
-
I definitely thought it was reminiscent of Heroku's home page, Atlassian didn't even register in my mind. I don't know if we need to re-invent the wheel for our illustrations, but whatever we choose we have to be able to reproduce between multiple designers, that way we don't end up with a style only one person can produce.
Update: I simplified this version a bit more with a focus on getting our product offerings and company events/updates (currently Q&A) above the fold (~600px). In the case that there are no company updates/events this box can simply be hidden and reappear once something has been added.
To-dos- plug in relevant icons from font awesome, or custom, whichever is preferred (cc: @AshleyS @sytses)
- branch illustration is WIP
- update "selling points" section titles and copy (cc: @AshleyS)
- need to look at how to handle this responsively, collaborate w/ front-end (cc: @jschatz1)
Edited by Luke Babb-
@lukebabb I love the footer! Very nice job.
Some comments:
- In the Selling Points section, the center-alignment of the titles and left-alignment of the descriptions bothers me. Maybe left-align the titles for consistency?
- I think the Sign Up button in the header should be as prominent as possible, have you tried giving it an orange fill and border with white text?
Other than that, looks good to me :)
-
Some other things I've thought of after looking at this a bit longer:
- The Selling Points section is now a lot lighter on content than it was in the initial mockup. Feels kind of empty, although I'm not sure how much customers would really care.
- A "Call to Action" at the bottom of the page below the quotes carousel might be a good idea, e.g. a link to the features page with a "Explore more reasons to use GitLab" button.
- The CC-BY-SA icon in the footer is rather unattractive compared to everything else. It may be better to just put "CC-BY-SA" in text, or remove it altogether.
Edited by username-removed-386624 @sytses thanks. same goes for pricing page @lukebabb
We should include githost.io in the product pages for EE and CE
I want to add an observation that I don't think has been said before.
People don't have a concept of 4 separate things, unless you make it so in their minds. We are imposing a mental model that is incorrect. A correct mental model which matches the situation would be more like:
- There is one thing: GitLab.
- There are instances of GitLab.
- There are ways of managing and hosting GitLab.
- There are ways of getting support for GitLab.
- They are all GitLab.
The question becomes: How would you like your GitLab served today?
When we ask that question, then we don't hide this totally awesome option we have! Which is GitHost. Someone can come to that conclusion by expressing how they want it served.
- I want my own instance.
- I don't want the hassle of maintenance.
- I want either CE or EE, depending on my license needs.
Could we use an interactive display in which someone has already chosen GitLab when they come to the page and they can "choose their own adventure."
In a potential move towards better support for decentralization, this "It's all GitLab" model will help users as well.
Right now, people are rightly confused by the option and it's not promoted well.
GitHost.io is:
- "personal GitLab" https://twitter.com/QuadPiece/status/699200466983505922
- "my own private git server" (original post in this thread) https://twitter.com/luislavena/status/696103079289159680
Great observations @nearlythere
Interactive displays don't respond well on mobile so that isn't something we can do.
We have to rely on messaging to get this right. Once we get the copy drafted I'll shared here and feedback on copy to better message our offerings is welcome.
Ideally we make it clear that the is .com (hosted gitlab) and on-premises (self-hosted gitlab) and then if they go along the on-premises pathway, we explain the features of EE and CE and benefits of on-premises for certain companies/developers.
@JobV what if we called "features"->"products" once we re-do the features page to be more product overview focused with individual pages for each core offering (.com, CE, EE)
@JobV fabulous. it leaves us room to use all the great feature marketing you've been working on for the product pages. They will also act as landing pages for ads we drive for CE -> EE conversion.
Thanks for the feedback everyone, I'll have an update with just the 3 product offerings shortly.
@AshleyS Is the purple "hello bar" full bleed? Are you referring to the purple bar up top with event announcements? My gut was to find a width that accommodates the typical length of messaging for these announcements...but now looking at it full-width I like it, assuming that's what you mean.
@JobV so to confirm we are dropping GitLab.com and Community? I would be in favor of keeping Community on the top level menu — transform it from the current jump-off links to a very informative and engaging page. I've got some idea for this.Edited by Luke Babb@lukebabb can we do a dark overlay on the top part?
https://www.twilio.com/ coloring catches my eye
The purple and white w/ the pattern at the top is just looking a little too similar to https://www.heroku.com/ for my comfort. I would like to see dark gray incorporate above the fold as an overlay with the pattern in a different color...or something.
Thanks @EmilyKyle!
@AshleyS yep, lets try it. Haven't had a chance to hone in on the final pattern illustration yet, but we can definitely play around with the color of it.
I will say Twilio's dark overlay works really well because there's a photo behind it. So to get a similar effect we would need a photo or something similar...perhaps a full-bleed pattern. Otherwise it will look less like an overlay and more like a flood of dark gray.
The latest update is a push to distinguish the overall look & feel of GitLab and will set the tone for the rest of the redesign. Among other small edits, I've developed an experience above the fold that has a unique feel and differentiates us from Heroku, GitHub, https://www.atlassian.com/git/, and others.
This concept (utilizing dark gray @AshleyS!!) incorporates a mosaic background made up of user/contributor avatars (whether static of dynamic we can look at the technical details later). It sets us apart visually and hints at our tagline, being community driven, and open source.
While it may not be as simplistic as the other concepts thus far, I think it strikes a balance and has a significant impact on developing and expressing our brand.
Also note the completed branch-inspired illustration — pulling in icons relevant to git and the culture of GitLab; also an extension of our brand image that can have various applications.
incorporates a mosaic background made up of user/contributor avatars (whether static of dynamic we can look at the technical details later). It sets us apart visually and hints at our tagline, being community driven, and open source.
I like the sentiment of this. I do think it would have to be dynamic, though.
@lukebabb nice work. My design related feedback is complete. :)
@sytses @JobV @dzaporozhets thoughts? how do we get this on the schedule for front-end?
I can input the messaging if front-end team just uses fake copy.
cc'ing @jschatz1 — we chatted briefly today about getting this coded but were unsure of the plan and timeline moving forward once design is complete.
@AshleyS @lukebabb This is great. The background should be dynamic cc @rspeicher
One of the front end engineers has to pick this up and work on it full time. I don't remember what @sytses and I thought about who's best for this. Probably one of the new engineers.
- "Community-loved, enterprise ready" - theme: Great for 1 to infinity team size. We scale with your team size, etc. Enterprise features but also great for independent developer.
- "Everyone can contribute" - theme: All the things you need to collaborate on code, everyone has a voice, build together.
- "We are never done" - theme: we release something awesome monthly, always listening to community to improve current, features come often, community feedback is key
Edited by Ashley Smith@iamphill can you work on implementing the homepage design @lukebabb made? /cc @dzaporozhets
As far as I know I'm still doing the backend, right? So what I'd need from @iamphill is some generalized SCSS we want to use throughout the site, and then homepage-specific HTML (or Haml) and SCSS so we can begin implementing. Then we can go page-by-page as needed.
And I assume we'll need more design work from @lukebabb as we get to things like the Team page, and https://about.gitlab.com/consultancy/.
Edited by Robert Speicher@rspeicher yes you are
@sytses sure
mentioned in merge request !1592 (closed)
Thanks @dzaporozhets, excited to see it go live and gather feedback. We can adjust the purple background on the fly during dev to see that we find a happy medium for most screens.
Also, here's a quick update with custom icons in place. @AshleyS is it possible to trim down the first header in the purple section? The others fit perfect, "Community-loved, enterprise ready" is a bit long unless we take down the heading font size quite a bit.
@iamphill @rspeicher also note that "Products" is now "Features" in the top nav.
@lukebabb
-
I love the little 22 over "we are never done". Love it.
-
I think having "everyone can contribute" at the top is too vague and doesn't say "hey this is what we do" quickly". Can we replace that with our current thing for now and I'll improve?
-
Community-loved, enterprise ready => Community led, enterprise ready. Still too long? We knocked off 2 characters
-
recapping what @lukebabb and I are currently trying
- Make taglines longer and split into two rows, change spacing, etc. Longer taglines = Community led, enterprise ready | Open source so everyone can contribute | Release often because we are never done
- Community-loved, enterprise ready => Community led, enterprise ready (still too long)
- Change Community-loved, enterprise ready => Enterprise ready and move it to the last column with plan to talk about community under "everyone can contribute".
We'll work on "About GitLab" copy here as a reference:
https://docs.google.com/document/d/1dAbD3P6s5e4sGIzfqRqGq2FxGYgPB2kRmppGbDtTYOQ/edit?ts=56d09f2b
Chiming in on earlier notes about GitHost.io;
I understand why it is being removed from the homepage: don't want to clutter / confuse, not a large part of our offering now. @AshleyS pointed out GitHost should be discussed on the CE/EE product pages. I worry that since the copy in the boxes for CE and EE on the homepage explicitly refer to on-premises solutions, if someone is looking for a GitHost-type of solution, they are unlikely to click on CE / EE boxes, no?
Since it is a hosted service, would it also make sense to refer to it from the GitLab.com "product" page?
@ernstvn thanks for the feedback - we will include all on product pages.
@lukebabb @AshleyS In regards to the homepage:
My quick two cents is that one's eyes compare the three column white boxes (product boxes) with the three column purple area below.
Currently it looks like this:
It should look like this:
One is left justified and the other is full justification with centered titles and icons. Compare with white boxes above.
Here are two fullsize images if you need a clearer look:
old-left-justified
[new-full-justification] (/uploads/38986e50e2820f7132c0b4137be340e2/full-justified.png)@jschatz1 while I understand your reasoning, in my opinion the best experience is how it currently looks. While the formatting may be a bit inconsistent to the top three columns, the icons and text still fall into the same rough layout. These will be viewed as two different sections so I think this subtle difference between the two is ok.
Also @AshleyS is working on significantly shortening the copy for the purple section. So with the shortened copy, the left-aligned text reads better and creates a bit more separation between the three columns of text versus justified.
Happy to chat further about it and try some things out, but I feel pretty confident that the current solution is the way to go
mentioned in merge request !1966 (closed)
Thanks for checking @dzaporozhets, we can close this issue.
