From 243e50275714a4c6d301ec6a0cb9720f03b28fb0 Mon Sep 17 00:00:00 2001 From: Joseph Lawrence Date: Apr 03 2022 23:53:45 +0000 Subject: [PATCH 1/4] Update homepage/modules/ROOT/pages/index.adoc Opening the front page of fedora docs, and at first, I didn't know if I was on a page that was live because whenever I hovered over a button I didn't know if after clicking on the button, anything could happen because nothing seemed to change or no button seemed to animate while I hovered over it. It creates a false impression initially that the buttons don't lead anywhere when actually, they do. So, I added animations to all the buttons on the front page. Secondly, I changed the arrangements for the documentation. The present arrangement on the site isn't in order nor does it look appealing to viewers. I had to share the page link with 7 people from different backgrounds, races, and job types. Only 3 of them found it appealing to them in both arrangement and appearance. Most of them didn't see the reason why some documentation has different colors from the others, some colors being thicker than the other when they are all of some importance under the "user documentation" heading. If there should be any differences in color, it shouldn't be under the "user documentation". So, I had to make all of them the same color. Furthermore, I added a search bar for users to be able to quickly search keywords or documents using a search bar. Many users don't have the time or luxury of going through all the documents, so a search bar would really come in handy. As a plus, I'd suggest the programmers or SEO team create a wide range of keywords that would enable both newbies and returnees to use the search bar effectively. If you take a look at the new page I created, you'd notice at the top right corner of the page, an "Edit Page" button. I made it very conspicuous and bold, unlike the recent fedora docs page. The "Edit Page" button isn't visible at first glance to new users. Plus, it doesn't have an icon in front of it to help people with disabilities or people who can't read properly. Icons help a lot better in cases like this, so I added an "edit" icon in front of it and in front of every doc header. It helps the site be a lot more inclusive as inclusion is important in design. Lastly, the difference between headers and document previews is not all that visible and noticeable. I had to make the headers not just bigger like the present fedora doc page, but also bolder so the difference would be noticeable. If you noticed, I still maintained the same fonts as used in the present fedora docs page to maintain design systems. The same color code was also used in the documentation. I used lighter colors because colors that represent docs files should be light and simple. Here is a link to the prototype page I designed https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?page-id=0%3A1&node-id=7%3A2&viewport=241%2C48%2C0.87&scaling=min-zoom&starting-point-node-id=7%3A2 I made use of Figma as a design tool. --- diff --git a/homepage/modules/ROOT/pages/index.adoc b/homepage/modules/ROOT/pages/index.adoc index eb30203..3127e47 100644 --- a/homepage/modules/ROOT/pages/index.adoc +++ b/homepage/modules/ROOT/pages/index.adoc @@ -1,110 +1,94 @@ -= Fedora Documentation -:page-layout: homepage - -++++ -
- - - -
-++++ +/* Desktop - 1 */ + + +position: relative; +width: 1440px; +height: 1024px; + +background: #FFFFFF; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 7 */ + + +position: relative; +width: 396px; +height: 266px; + +background: #51A2DA; +box-shadow: 0px 0px 12px #214282; + + +/* Frame 8 */ + + +position: relative; +width: 249px; +height: 109px; + +background: #FFFFFF; + + +/* Frame 9 */ + + +position: relative; +width: 225px; +height: 85px; + +background: #FFFFFF; From 5c5c46f7f98bac08100ba548e45c70cd952be994 Mon Sep 17 00:00:00 2001 From: Joseph Lawrence Date: Apr 09 2022 04:47:50 +0000 Subject: [PATCH 2/4] Improve Docs Experience - Opening Pull requests Contributing to Open Source is exciting and has given me opportunities to learn new things and contribute to real-life issues. As exciting as contributing to open source has been, I've still had big challenges as a newbie and as an outreachy intern with contributing. Some major challenges I faced were - Learning how to open and submit a pull request successfully - Submitting a pull request without coding **Learning How to submit a pull request** As an outreachy intern and a newbie in contributing to open source, I was instructed to submit my contributions as pull requests, but I didn't know how to do that successfully. I wasn't the only one who had that challenge, so it limits contributors and users in a way. My proposal for this would be to add a pull request line on the "Quick Docs" page to properly teach how to open pull requests and also add a short youtube video tutorial to improve accessibility. The video should be able to play on the Fedora Docs site without moving to youtube. Here's a prototype of my proposal. (Please click on "pull request" to see the interaction) https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?page-id=0%3A1&node-id=131%3A786&viewport=241%2C48%2C0.46&scaling=min-zoom&starting-point-node-id=7%3A2&show-proto-sidebar=1 I had to do a google search about opening pull requests on fedora before I was directed to a page on fedora which didn't properly explain it. **Submitting a pull request without coding** This was a problem for not only the new outreachy interns but also for new contributors to Fedora in general. I want to know if it's possible to successfully submit a pull request without making code changes but instead submitting a design sample for a particular page like on Figma, sketch, etc because coding isn't listed as part of the skills needed to contribute to the project "Improve Docs Experience". Please, I'd really need clarity on that. --- diff --git a/homepage/modules/ROOT/pages/index.adoc b/homepage/modules/ROOT/pages/index.adoc index 3127e47..507f451 100644 --- a/homepage/modules/ROOT/pages/index.adoc +++ b/homepage/modules/ROOT/pages/index.adoc @@ -1,94 +1,8 @@ -/* Desktop - 1 */ +/* Desktop - 5 */ position: relative; width: 1440px; height: 1024px; -background: #FFFFFF; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 7 */ - - -position: relative; -width: 396px; -height: 266px; - -background: #51A2DA; -box-shadow: 0px 0px 12px #214282; - - -/* Frame 8 */ - - -position: relative; -width: 249px; -height: 109px; - -background: #FFFFFF; - - -/* Frame 9 */ - - -position: relative; -width: 225px; -height: 85px; - -background: #FFFFFF; +background: #FFFFFF; \ No newline at end of file From 1eaf50bde25a4b58fe939aee8b91ad3386da17e8 Mon Sep 17 00:00:00 2001 From: Joseph Lawrence Date: Apr 11 2022 11:35:29 +0000 Subject: [PATCH 3/4] Update homepage/modules/ROOT/pages/index.adoc I believe every site should be built to make its constituents easy to access, that's why I would like to propose another adjustment to the fedora docs page. I did a survey of 5 persons that I specifically handpicked for the sake of the survey due to the rate of use of devices by these 5 persons. I asked if they liked having options for viewing a page and I asked them to state those options. 70% of them mentioned that they'd have also preferred if they were given an option of viewing pages in dark mode as it helps reduce battery consumption and reduces the effect of blue light on the eye(it has been scientifically proven). The idea of also being able to sort data on the page was also brought up in the survey. I used the information from the survey to design a new prototype of the fedora docs site. Note: I added a "night mode" icon at the top right corner, by clicking on it, the page changes to a darker theme and vice versa. A drop-down menu was also added at the top left corner to be able to sort data on the site. Here's a link to the prototype https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?page-id=0%3A1&node-id=169%3A643&viewport=241%2C48%2C0.35&scaling=min-zoom&starting-point-node-id=7%3A2&show-proto-sidebar=1 I used Figma as a design tool. --- diff --git a/homepage/modules/ROOT/pages/index.adoc b/homepage/modules/ROOT/pages/index.adoc index 507f451..1bccd2c 100644 --- a/homepage/modules/ROOT/pages/index.adoc +++ b/homepage/modules/ROOT/pages/index.adoc @@ -1,8 +1,8 @@ -/* Desktop - 5 */ +/* Frame 17 */ position: relative; width: 1440px; height: 1024px; -background: #FFFFFF; \ No newline at end of file +background: #FFFFFF; From 0a55dbc5537e6512a3ae058d9395047e71b8782f Mon Sep 17 00:00:00 2001 From: Joseph Lawrence Date: Apr 21 2022 14:12:52 +0000 Subject: [PATCH 4/4] Update homepage/modules/ROOT/pages/index.adoc I tried to research and look for ways by which the fedora docs site could be more accessible to people with disabilities or difficulty in exploring and using the web. After much deliberation, I decided that a good option would be to add a "text to speech" button right there on the website, which would be available on all pages. "Text to speech" would enable people with disabilities like dyslexia (a common learning difficulty that mainly causes problems with reading, writing, and spelling) to be able to access the data on each page of the fedora docs site easily. I also thought it'd be great to add a "what's new" button at the top right of the site to enable users easily access information on new updates, new developments, upcoming events, and the latest fedora software. Below is a link to an interactive prototype page showing the "speech to text" and "what's new" interactions https://www.figma.com/proto/opx3qcXcFYIPzaift58Pl7/Fedora-proposed-front-page?node-id=169%3A643&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=169%3A643&show-proto-sidebar=1 To be able to interact with the page; - hover on the "what's new" icon at the top right corner - Click on the "text to speech" icon at the top right corner to open the options and click anywhere on the screen to exit the options. --- diff --git a/homepage/modules/ROOT/pages/index.adoc b/homepage/modules/ROOT/pages/index.adoc index 1bccd2c..ea4fa6e 100644 --- a/homepage/modules/ROOT/pages/index.adoc +++ b/homepage/modules/ROOT/pages/index.adoc @@ -1,6 +1,3 @@ -/* Frame 17 */ - - position: relative; width: 1440px; height: 1024px;