Jenkins 2.0 Website Redesigned.

[Arshad Khan]

Hello all,

I have tried to redesign the Jenkins 2.0 website to make it look even more beautiful. I have attached a full-website screenshot and a link for a video. Have a look!

Video link: https://youtu.be/FFFF3QUOjm0

Code: https://github.com/arshdkhn1/jenkins.io/tree/redesign

Best Regards,
Arshad Khan

[Oleg Nenashev]

Hi Arshad,

It would recommend to create separate PRs for different things.

I definitely prefer the original visualization of the Jenkins logo, but some other changes in the design seem to be reasonable IMHO. So it would be better to review the changes one-by-one.

BR, Oleg

[R. Tyler Croy]

(replies inline)

On Mon, 04 Apr 2016, Arshad Khan wrote:

> I have tried to redesign the Jenkins 2.0 website to make it look even more
> beautiful. I have attached a full-website screenshot and a link for a
> video. Have a look!
>
> Video link: https://youtu.be/FFFF3QUOjm0
>
> Code: https://github.com/arshdkhn1/jenkins.io/tree/redesign

Interesting work Arshad, like Oleg I'm not fond of the "hiding" of the Jenkins
logo as a watermark either, but here's some (hopefully) more constructive
criticisms:

* The text capitalization on the button in the top-nav and the main carousel
don't make sense to me. It looks to me like everything .btn has a
capitalization. Why? All capitalized letters always looks aggressive to me,
because this style is applied to all the buttons there are multiple
"aggressive" buttons jumping out at me.

* Return of dropshadows. I explicitly removed drop shadows around the feature
list and the "Getting Started" cards because they're not buttons. To me the
visual cues are totally backwards here, buttons which are clickable are
flat, but cards which are not clickable are "raised" visually through drop
shadows. There's also a hover shadow change I noticed on the blog entries on
the homepage which is unnecessary since the whole area isn't clickable.

* Colors: I don't know if this is the screencast or not, but it appears that
all colors have a 25-50% opacity black layer above them. As in, everything
appears darker than what is currently on jenkins.io. If this was
intentional, I don't see what benefit it provides. In some places, like the
Getting Started cards, background colors disappeared removing any visual
distinction between sections (feature list verus getting started).




So those things I don't like, but the footer improvements and the popover
improvements I would love to see as standalone pull requests so they can be
merged.



Cheers
- R. Tyler Croy

------------------------------------------------------
Code: <https://github.com/rtyler>
Chatter: <https://twitter.com/agentdero>

% gpg --keyserver keys.gnupg.net --recv-key 3F51E16F
------------------------------------------------------

[Arshad Khan]

TEXT capitalization in buttons -  I think as long as text in buttons are not long, capitalization is good. Capitalization makes the text stand out from the rest of the text(I know there is background color to make it look different but capitalization also serves the purpose) and it grabs the user attention from ux point of view. I think use of uppercase depends on context and is subjective, somewhere it may give an aggresive touch  but somewhere it also serves the purpose of grabbing attention to a particular thing.

Drop-shadows - Before giving the reasons I want to tell you that i didn't followed any specific rule sets while making this design. I just did what felt right to me. First of all, when you will hover the button then they will have drop shadows, maybe in video this is not visible. I have given the dropshadows to feature list to make it little more prompting to user but one thing that you will notice that its dropshadow will not change when it's hovered because it not clickable. All the clickable things that are having dropshadows will have change in dropshadows when hovered to make it look like the cards are being pushed down when cursor comes over them. On blog posts, I have intentionally added dropshadows which reduces when hovered for the above reason. I have always wondered why things goes up when hovered when it should go down to give a more realistic feel.

Colors - There is some problem in video. Things are not having a black mask or shade over them, it's just video problem. I have chosen different colors than the previous design because I really didn't like the sky-blue color at all. I dont want to offend anyone but the color of fixed navbar( solid black) and sky blue color really felt odd to me from a user pov, so I changed them to a better shade. The benefit that it provides is that the color I have used is more soothing and it is more comfortable to eyes. I have intentionally removed the background of the feature list section because I didn't like the blue-greyish background it was having, but some work can be done to make sections look distinct.

I changed the logo's red color in the background to white color so that it kinda of blend better in background. I tried putting logo at different position but it was looking a lil odd so I put it in background with low opacity. Some other changes that I have done are the mask over the images is darken a bit more, font selection and line height. When there is so much text then I think a good amt of line height and word spacing is needed. I prefer other fonts but for this design I have used montserrat. 

I really suggest you to see the live version of this design and maybe I can share my screen with you, if you have enough time. I just said what I felt right which is likely to be wrong. It will be really very appreciable to have any conflicting views so that I can change what's wrong and don't make such mistakes in future.

BR, Arshad 

[Oleg Nenashev]

My action item is to run your branch, Arshad. IANAD, so I have no strong opinion regarding the most of the style changes. I definitely agree that the top toolbar is not perfect. IMHO we could reduce the number of items there and make the text bold.

E.g. we could introduce the "About" section with...

• About Jenkins
• Press Contacts
• Code of conduct

Same for the "Documentation" section

• Website docs
  
• Wiki
• Security
• Use-cases (multi-level dropdown?)

But I feel it's offtopic a bit :) IMHO the content and content contribution simplification are more hot topics for the website right now.

Best regards,

Oleg

[Arshad Khan]

I agree. Some improvements like that should be done to cut down the no of nav items. Currently due to large no of nav-items navbar breaks into two line in pc-screen range.