New Website Design

[juanpicado]

➡️ Do you have Design skills?
➡️ Wanna re-do our website?
➡️ Wanna be part of a growing project?

We are looking for ideas and help in this area.

[ploh007]

I'd love to give this a shot! Can I be assigned this and have it tagged as hacktoberfest?

[juanpicado]

of course @ploh007

[juanpicado]

Really good job @ploh007 ! Could you try to add the official fonts https://github.com/verdaccio/verdaccio/tree/master/assets/fonts ?
In the website we have 3 buttons, the GitHub one is not in the design. but for us is really important since is a big source of visits from the website to GitHub.

Aside of that, I like it very much, looking forwards seeing in other pages.

[ploh007]

Thanks @juanpicado! Ill definitely update to add the official fonts and include the Github button.
Will complete the rest of design as soon as possible. :)

[juanpicado]

One interesting point would be ... how the blog would looks like, for me is the key for the future :-)

[ploh007]

Hey @juanpicado & @sergiohgz here is an updated version of the mockup. Apologize for the delay as I've been a little busy.

Appreciate any feedback and will progress to motion design + other pages once complete.

Notes:

• Included a "What is Verdaccio?" and "Features" Section
• Mimicked the background header of the current twitter image
• Updated to use official fonts + added Github button
• I did the icons for the features and 2 of them are from material icons.

Questions

• Should I add a section for the latest blog news on the main page?

[priscilawebdev]

Well done @ploh007 I really liked it 👏💪 I have only a few suggestions:

• Maybe we could replace in the header the words: "GitHub" , "Twitter", "Team" and "Language" with Icons

• It's also nice when the website has the option "Light" and "Dark". Maybe we could have it too 😀 Example:
  

• The button "about" should have another description, because the title is already "What is Verdaccio"..maybe "Get started"? then redirect to the installation document?

Please what do you think?

[juanpicado]

@ploh007 great work !! About your question, I think we can't, the reason is we are a bit tight to https://docusaurus.io/ can provide to us.

I am willing to Migrate to V2 #204 but still under development.

[ploh007]

Thanks for the detailed feedback @priscilawebdev! Really appreciate it.

• I do agree with your comments that icons would make the header less cluttered and add tooltips if need be to them.

• I'll try to come up with a dark theme color customization off the current mockup.

• Sure, I'll try to think of a button label. The only thing with "Getting Started" is that it is used in the main "Get Started" and leads to duplication of buttons which do the same thing?

• Update header to icons

• Light and dark theme

• Remove background image on header

• Change "What is Verdaccio?" section button label

@juanpicado Thanks! Noted. I'll take a look at the repository and the docusaurus documentation regarding the blog section and custom pages using React. :)

[DanielRuf]

I have just one addition to the current feedback:

I would remove the "v" background pattern in the upper part.

[priscilawebdev]

@ploh007 thank you! Take your time 😉

Regarding the button label, yes I agree with you...it would be duplicated.. so i think it's better to keep the "about" link 😀

[juanpicado]

thanks @ploh007 great stuff

l. The only thing with "Getting Started" is that it is used in the main "Get Started" and leads to duplication of buttons which do the same thing?

Could you give more context, I don't get it.

[ploh007]

Sure @juanpicado.

Referring to the mockup above, @priscilawebdev had suggested that the following button be changed to "Getting Started" instead of "About".

However, this would lead to a duplication of the button in the main content section.

Hope, this clarifies things :)

[juanpicado]

Thanks that's perfectly explained. I'd say about is ok, we do not have about page yet, but it is a good excuse to have one 👍

[juanpicado]

hi @ploh007 , we want to try with https://www.gatsbyjs.org/ a new PoC website, do you have any experience with it?

[ploh007]

Hey @juanpicado, I completely, missed this message and I apologize for that.

I work with ReactJS and GraphQL but have not used GatsbyJS before.

[juanpicado]

Nice, if you have worked with React is a good to have :) let see wether we can start something next month

[ploh007]

Ok sounds good @juanpicado!

@priscilawebdev - Heres a link to the Adobe XD Version of this. I'm still working on it when I can. I've added the changes that was asked for (dark + light theme, converted buttons to icons, minor updates to labels)

Adobe XD Preview

P.S. You can click anytime to switch between the dark and light preview ;)

[priscilawebdev]

it looks great!!! 👏😀 thank you so much @ploh007 🙏💪

[juanpicado]

Omggggg loookkkkss awesome !!!

[DanielRuf]

hi @ploh007 , we want to try with gatsbyjs.org a new PoC website, do you have any experience with it?

As I am part of the Gatsby community and have contacts there like "lekoarts" I could help here.

Regarding the design; the top right corner looks a bit crowded in my opionion, especially these big counters / bubbles witht he numbers. There are smaller and already available buttons that I would recommend.

Can you explain what the two icons on the right side of the Ttitter icon are meant for (people and world)?

Is the one on the left of the GitHub icon for dark / light switch?

Personally I find that we lose the contrast between content and navigation a bit because there is no different background now (top bar and content).

Contrast wise the dark version could be improved, especially the gray on black at the bottom. And pure white text on black background is not very accessible afaik.

What are currently the next steps? Can you enable the setting in XD to share / generate CSS values?

[DanielRuf]

• Maybe we could replace in the header the words: "GitHub" , "Twitter", "Team" and "Language" with Icons

• It's also nice when the website has the option "Light" and "Dark". Maybe we could have it too 😀 Example:

Ah ok. Well, isn't Twitter duplicate then? Do we really need the numbers? And the stars?

Globe might be explanatory for language but imo the team should be a normal text button. It could be understood as something like community / forum or chat / support. The light / dark switch could be on the right side of the screen.

Take a look at how we did it in the Gatsby docs:

https://www.gatsbyjs.org/

Making the search on the right or left side is also probably better (less pixels to move from the sides, especially on big screens).

[anikethsaha]

Whats the status of this ?

[juanpicado]

@anikethsaha not much, just a mock up.

[anikethsaha]

@anikethsaha not much, just a mock up.

ok, I will try to dig in if getting some time

[semoal]

@ploh007 Pinging you because I've tried to access the design and couldn't enter, requests a password.
Feel free to reach me out via twitter, or mail or even Discord, I'll start working on tis redesign this weekend