Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HDDS-9577. Add HomePage Banner, Styles and Responsive Design #65

Draft
wants to merge 1 commit into
base: HDDS-9225-website-v2
Choose a base branch
from
Draft

HDDS-9577. Add HomePage Banner, Styles and Responsive Design #65

wants to merge 1 commit into from

Conversation

will-sh
Copy link

@will-sh will-sh commented Jan 28, 2024

  • Added responsive design for mobile devices.
  • Included a replaceable banner image.
  • Incorporated new CSS stylesheets and components.

@will-sh
HDDS-9577. Add HomePage Banner, Styles and Responsive Design
1b69842 
- Added responsive design for mobile devices.
- Included a replaceable banner image.
- Incorporated new CSS stylesheets and components.
@errose28 errose28 added the website-v2 Tasks for the new ozone website targeting the HDDS-9225-website-v2 branch label Jan 29, 2024
@errose28 errose28 self-requested a review January 29, 2024 20:17
@errose28
Copy link
Contributor

Thanks for working on this @will-sh. Just a few questions:

Added responsive design for mobile devices.

  • Can you elaborate more on this point?
  • Where did the banner image come from? Are there any licensing implications we should now about? Do we have the ability to adjust it in any way (change some colors in the image, for example)?
  • Is ozone-logo-hug.svg just a cropped version of ozone-logo.svg? I'd been meaning to crop that svg image down to a proper size, so if this is the case I think we can just make this tighter cropped version the new ozone-logo.svg.

@will-sh
Copy link
Author

will-sh commented Jan 30, 2024

Thanks @errose28 for the review.

Added responsive design for mobile devices.
Can you elaborate more on this point?

In the banner.css file, we've implemented a responsive layout that adjusts to different screen sizes. For larger screens like desktops or laptops, we use a flex layout, as detailed in this guide to flexbox. For smaller screens, such as those on mobile devices, we've added CSS media queries to ensure the components adapt to the screen size. This approach allows the page layout to respond dynamically to various device sizes, enhancing usability across devices.

Where did the banner image come from? Are there any licensing implications we should know about? Do we have the ability to adjust it in any way (change some colors in the image, for example)?

The banner image, banner.png, was created from scratch using Figma, a popular design tool known for its versatility and ease of use. As the image is an original design and not derived from existing internet resources, there are no licensing issues. We used the Helvetica font, which is a standard option in Figma’s font library. The advantage of designing in Figma or Adobe Illustrator is not only creative freedom but also the avoidance of licensing complications often associated with using pre-existing images. Also, another advantage of using Figma is easy to adjust the PNG size according to different screen sizes.

Feedback and suggestions are welcome regarding the banner style. If anyone has thoughts on its design or ideas for improvement, I'd greatly appreciate the input. We can discuss potential changes to ensure the banner effectively aligns with our project's aesthetic and functional goals.

Is ozone-logo-hug.svg just a cropped version of ozone-logo.svg? I'd been meaning to crop that svg image down to a proper size, so if this is the case I think we can just make this tighter cropped version the new ozone-logo.svg.

Yes, ozone-logo-hug.svg is a cropped version of ozone-logo.svg, tailored using Figma to achieve a more appropriate and tight size. This adjustment makes it easier to align with other components in the layout. I agree with your suggestion to adopt this tighter-cropped version as the new ozone-logo.svg. This change should streamline our asset library and ensure consistency in our visual presentations.

@will-sh
Copy link
Author

will-sh commented Feb 20, 2024

@errose28 Is there any else I could help with?

@errose28
Copy link
Contributor

errose28 commented Feb 23, 2024 •
edited
Loading

Hi @will-sh sorry for the late response. I was busy working on CI for the website and did not have time to review this. Thanks for providing the info about figma, flexbox, and CSS media queries. I don't know a lot about this area so every pointer helps.

For the overall styling, can we try something with a more minimal color palette? Maybe just grays, greens, and white since these are the main colors used in Ozone's logo. I would like to try some banner designs in Figma myself but have not had the time to learn the tool yet. Maybe we can do simpler (gray?) banner with a more subtle design in the background.

For reference, here are two other apache homepages I like but are simple enough that I think we can get something similar:

https://nifi.apache.org/
This homepage has a minimal color palette that looks pretty sleek. The subtle use of brighter colors in the images helps, but we don't need to worry about images yet. It also fills a lot of space with what is really not that much text content.

https://airflow.apache.org/
Disregard the sparkly banner. I don't think we should do something like that. What I like about this page is the three subsections: principles, features, and integrations. I think we may want to have the same three sections in our homepage too. I also like that the background and foreground colors of this site is just black and white. The vibrancy comes from the images (especially the integrations ones that light up when you hover over them).

Don't worry too much about the subtask breakdown I put under the main homepage Jira. We may end up with a design more organically that doesn't exactly line up with what is described there. I like your approach here of defining a blueprint that we can fill in with text and image content later.

@errose28
Copy link
Contributor

Also, could you add your cropped ozone svg logo as a separate pull request? I think we should incorporate that portion right away while we iterate on other design aspects here.

@will-sh
Copy link
Author

will-sh commented Feb 27, 2024

Hi @errose28 I created subtask (https://issues.apache.org/jira/browse/HDDS-10426) with PR (#80)

@will-sh
Copy link
Author

will-sh commented Feb 27, 2024

I like your idea about simpler banners and styles, please bear with me I'm not an expert in design.
I will try some designs and update you.
Regarding figma I feel it is really helpful to make design easier, maybe we can have a remote meeting to discuss more.

For the overall styling, can we try something with a more minimal color palette? Maybe just grays, greens, and white since these are the main colors used in Ozone's logo. I would like to try some banner designs in Figma myself but have not had the time to learn the tool yet. Maybe we can do simpler (gray?) banner with a more subtle design in the background.

@errose28
Copy link
Contributor

I have no design experience either, so thanks for taking a stab at this! Figma looks like a good tool, but I will need to find some bandwidth to figure out how to properly use it before I can be of much help on content generation.

@errose28 errose28 marked this pull request as draft March 25, 2024 21:57
@errose28
Copy link
Contributor

Just moving this to draft since we are still brainstorming ideas here.

@errose28 errose28 added the homepage Changes related to the homepage of the Ozone website label May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@errose28 errose28 Awaiting requested review from errose28

Assignees
No one assigned
Labels
homepage Changes related to the homepage of the Ozone website website-v2 Tasks for the new ozone website targeting the HDDS-9225-website-v2 branch
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@will-sh @errose28