Enhancement: make homepage UX better

[takanome-dev]

People like what they see so a pretty landing page is a necessary aesthetic. I think they're plenty of landing page examples out there for libraries but here's what I had in mind:

• A flowfield coverpage that has shifting colors (kinda makes the project goal obvious that its about color). This could be preferably full viewport.
• A description of the library capabilities, a getting started section and at the footer we can put some statistics about the project e.g stargazers, forks and contributors.

I've attached an example landing page above. Feel free to make suggestions

[foss2cyber]

@takanome-dev Want to get started on this. Can you elaborate a bit on the shifting colours part ?

[takanome-dev]

@takanome-dev Want to get started on this. Can you elaborate a bit on the shifting colours part ?

Thanks for your interest @foss2cyber. This issue has been extracted from this discussion #62 (comment)

@prjctimg can you provide more info here?

[prjctimg]

@takanome-dev Want to get started on this. Can you elaborate a bit on the shifting colours part ?

Thanks for your interest @foss2cyber. This issue has been extracted from this discussion #62 (comment)

@prjctimg can you provide more info here?

Of course!

@foss2cyber The shifting colours part is simple since the library already has such a utility for that, hueShift() see the docs under 'Palette utilities'. It returns an array of hueshifted colors from a single base color.

Now that we have our array of colors from running the hueshift() We can then pass each particle of our flowfield with a color from the array. For more information about flowfields see Dan Shiffman's original implementation here. It uses p5js

[foss2cyber]

@takanome-dev Want to get started on this. Can you elaborate a bit on the shifting colours part ?

Thanks for your interest @foss2cyber. This issue has been extracted from this discussion #62 (comment)
@prjctimg can you provide more info here?

Of course!

@foss2cyber The shifting colours part is simple since the library already has such a utility for that, hueShift() see the docs under 'Palette utilities'. It returns an array of hueshifted colors from a single base color.

Now that we have our array of colors from running the hueshift() We can then pass each particle of our flowfield with a color from the array. For more information about flowfields see Dan Shiffman's original implementation here. It uses p5js

Thanks a lot, mate!

[prjctimg]

No worries!

@foss2cyber Here's a rough pseudocode example for how you could initialize the color generation:

// Importing the colors() and hueShift() utils
import { colors,hueShift } from 'huetiful-js'


// We want an array of  colors of value 400 from the TailwindCSS default palette. This means blue-400, red-400 etc

let baseColors = colors('all','400')

const { map } = Array


// This will make a nested array of hueshifted colors with each array containing 10 elements in the hex format
let hueShiftedPalette = map(baseColors,(color) => hueShift(color,{num = 10,hueStep = 5},true))

[foss2cyber]

No worries!

@foss2cyber Here's a rough pseudocode example for how you could initialize the color generation:

// Importing the colors() and hueShift() utils
import { colors,hueShift } from 'huetiful-js'


// We want an array of  colors of value 400 from the TailwindCSS default palette. This means blue-400, red-400 etc

let baseColors = colors('all','400')

const { map } = Array


// This will make a nested array of hueshifted colors with each array containing 10 elements in the hex format
let hueShiftedPalette = map(baseColors,(color) => hueShift(color,{num = 10,hueStep = 5},true))

Thanks. Gonna try this out. Let's see how it goes...!

[prjctimg]

This issue has been resolved, by @adarshswaminath in this commit at the docs repository. See the preview here

[foss2cyber]

This issue has been resolved, by @adarshswaminath in this commit at the docs repository. See the preview here

@prjctimg Ah....I was too late it seems. I just made a PR with some UI changes.

[prjctimg]

This issue has been resolved, by @adarshswaminath in this commit at the docs repository. See the preview here

@prjctimg Ah....I was too late it seems. I just made a PR with some UI changes.

@foss2cyber No worries! The issue was temporarily closed to keep the issues trimmed.

Thank you for the changes! I reviewed the build logs and it seems like your deployment failed because of a yarn install based error . Here's the screenshot for the build error: @takanome-dev is working on setting up the GitHub Action for Vercel deployment so that all contributors can have access to the build logs.

Or you can see the entire logs here
Note that the last part mentions about the lockfile being prohibited from modification during dependancy installations. Is there a way to resolve the dependancy issues?

[foss2cyber]

This issue has been resolved, by @adarshswaminath in this commit at the docs repository. See the preview here

@prjctimg Ah....I was too late it seems. I just made a PR with some UI changes.

@foss2cyber No worries! The issue was temporarily closed to keep the issues trimmed.

Thank you for the changes! I reviewed the build logs and it seems like your deployment failed because of a yarn install based error . Here's the screenshot for the build error: @takanome-dev is working on setting up the GitHub Action for Vercel deployment so that all contributors can have access to the build logs.

Or you can see the entire logs here Note that the last part mentions about the lockfile being prohibited from modification during dependancy installations. Is there a way to resolve the dependancy issues?

I'm working on the dependencies. Will give you a heads up asap.

[prjctimg]

Thank you @foss2cyber and @adarshswaminath for the redesign! We'll revisit and iterate on the design with more complex visuals and accessibility improvements.

Are we all satisfied with the design 🚀

@H-K-R @arcVaishali @Cubic-ctrl @takanome-dev

Lol, I'm bringing this back. Switching to markdown from the default typedoc Html theme we were using.

I'm rebuilding the docs with showdown.js ,htmx and TailwindCSS

[prjctimg]

Please note any design inconsistencies and we'll resolve them by building an as per requirement design system.

Some of the errata and changes I think would be beneficial are:

• At the end of the page there's a declaration saying `Tailwind starter theme.
• The primary and secondary colors are clashing. One appears more saturated than the other. Thus we need to define a palette. We could use the logo colors as a starting point.In the future we'll make our palette color blind safe and more adaptive.
• Inconsistencies in padding. Some elements seem to have more padding than others.
• Do we need a newsletter? If no then we should probably deprecate that component, right?
• Can we add a bit of animations and transitions to the page. For example easing in components as the user scrolls.
• Can we add a "Star this project" or similar button on the homepage. Lol, 😂 Okay so our stats may not really worth that much bragging but we should include them still. We can use badges from Shields
• There's a redundant description below the Utilities heading which is similar to the description on the cover page.

Please feel free to suggest changes and better approaches to a standard design strategy we can use throughout the docs 🙏.

I'll share some ideas of using generative art for our backgrounds and example websites where those technics are used. We're after all, a project about color so we should flex a little 😁

[prjctimg]

Please note any design inconsistencies and we'll resolve them by building an as per requirement design system.

Some of the errata and changes I think would be beneficial are:

• At the end of the page there's a declaration saying `Tailwind starter theme.

• The primary and secondary colors are clashing. One appears more saturated than the other. Thus we need to define a palette. We could use the logo colors as a starting point.In the future we'll make our palette color blind safe and more adaptive.

• Inconsistencies in padding. Some elements seem to have more padding than others.

• Do we need a newsletter? If no then we should probably deprecate that component, right?

• Can we add a bit of animations and transitions to the page. For example easing in components as the user scrolls.

• Can we add a "Star this project" or similar button on the homepage. Lol, 😂 Okay so our stats may not really worth that much bragging but we should include them still. We can use badges from Shields

• There's a redundant description below the Utilities heading which is similar to the description on the cover page.

• Do you guys honestly love those icons ? For me to ne honest they look chunky, clumsy and generic. How about a lighter iconpack for example 'Feather Icons'

• What about the font, are you okay with the typographic qualities of our text ?

• What about the thickness of our component borders. Should we make them thinner to give them a 'sleek' feel ?

• Do we need more 'Call to Actions' ?

• And can we add a contributors component so that the open source community can know your commitment to the craft 💻.

Conclusion ⛓️

Please feel free to suggest changes and better approaches to a standard design strategy we can use throughout the docs 🙏.

I'll share some ideas of using generative art for our backgrounds and example websites where those technics are used. We're after all, a project about color 🎨 so we should flex a little 😁

[foss2cyber]

@prjctimg For choosing a better color palette and typography, I suggest taking a look at this site here & this article here. Could also take a look at BarbaJS for really dope animations we could use.
Also, Feather Icons are 👍 .
I'll get started on the padding inconsistencies.
We should definitely include a star this project button to the homepgae & the contributors component sounds cool.
What do y'all think? @adarshswaminath @takanome-dev @H-K-R

[adarshswaminath]

yeah, we need to correct the paddings of some elements, and the changes suggested by @prjctimg are nice. It's good to have some transition; it makes it better. We can change icons if they look chunky, clumsy, and generic. I think currently, we don't need the newsletter component. Please remove the Tailwind starter theme text. Additionally, I believe we need to consider changing the color themes because they are clashing. Also, we need to make sure the color theme is suitable for both dark and light themes. @foss2cyber For easing in components as the user scrolls , we can use libraries like AOS or Framer Motion, or any other. It's cool to add a 'star this project' button to the homepage, and the contributors component sounds cool.

[prjctimg]

@prjctimg For choosing a better color palette and typography, I suggest taking a look at this site here & this article here. Could also take a look at BarbaJS for really dope animations we could use.
Also, Feather Icons are 👍 .
I'll get started on the padding inconsistencies.
We should definitely include a star this project button to the homepgae & the contributors component sounds cool.
What do y'all think? @adarshswaminath @takanome-dev @H-K-R

I think using pastels (colors with low chroma and high value ) may be our best bet on creating the calm feel we're looking for. Because reading takes focus, we can't use colors that are too saturated or bright because they draw attention. I've attached some screenshots showing an example palette liked .

Please share your choices too and we can pick the best color suited for our task.

Pastels when paired with generative art using random SVG patterns can create a very flexible starting point for a dynamic UI. Lol, in fact the library has a function pastel() which returns the pastel variant of a passed in color by clamping the saturation and value channels to certain ranges using the HSV color space. So you don't have to worry about picking them manually. Check out how 11tyrocks! designs their cards.

[foss2cyber]

@prjctimg Here's what I liked:

[prjctimg]

@foss2cyber I see that the blue is popular so maybe we can use a pastel version of it as our primary color or the color to CTAs
And let's proceed with a pastel purple as our accent color.

We'll finalize the palette option tonight.

[foss2cyber]

@foss2cyber I see that the blue is popular so maybe we can use a pastel version of it as our primary color or the color to CTAs And let's proceed with a pastel purple as our accent color.

We'll finalize the palette option tonight.

Cool!

[prjctimg]

@foss2cyber Well, I guess that's the poll. We can proceed with the palette chosen.

[adarshswaminath]

@prjctimg Here's what I liked:

The UI and color palettes are looking cool!

[prjctimg]

Stale issue message