You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@ozone.apache.org by "will-sh (via GitHub)" <gi...@apache.org> on 2024/01/28 08:35:20 UTC

[PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

will-sh opened a new pull request, #65:
URL: https://github.com/apache/ozone-site/pull/65

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "will-sh (via GitHub)" <gi...@apache.org>.
will-sh commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1966069530

   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.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "will-sh (via GitHub)" <gi...@apache.org>.
will-sh commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1966056969

   Hi @errose28 I created subtask (https://issues.apache.org/jira/browse/HDDS-10426) with PR (https://github.com/apache/ozone-site/pull/80)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "errose28 (via GitHub)" <gi...@apache.org>.
errose28 commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-2018991514

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "will-sh (via GitHub)" <gi...@apache.org>.
will-sh commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1953613867

   @errose28 Is there any else I could help with?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "errose28 (via GitHub)" <gi...@apache.org>.
errose28 commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1960632076

   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 more 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.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "will-sh (via GitHub)" <gi...@apache.org>.
will-sh commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1916010914

   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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). For smaller screens, such as those on mobile devices, we've added CSS [media queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) 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.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "errose28 (via GitHub)" <gi...@apache.org>.
errose28 commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1915932437

   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`.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "errose28 (via GitHub)" <gi...@apache.org>.
errose28 commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1960633118

   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.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org


Re: [PR] HDDS-9577. Add HomePage Banner, Styles and Responsive Design [ozone-site]

Posted by "errose28 (via GitHub)" <gi...@apache.org>.
errose28 commented on PR #65:
URL: https://github.com/apache/ozone-site/pull/65#issuecomment-1967210395

   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.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org