#27 Improve Docs Experience - Change fedora Docs page layout and improve features
Opened 2 years ago by joewest24. Modified 2 years ago
fedora-docs/ joewest24/pages master  into  master

@@ -1,110 +1,5 @@ 

- = Fedora Documentation

- :page-layout: homepage

+ position: relative;

+ width: 1440px;

+ height: 1024px;

  

- ++++

- <div class="homepage-page">

-     <div class="homepage-section homepage-section-user-docs">

-         <h2>User Documentation</h2>

-             <div class="homepage-section-container">

-             <a href="../fedora/f35/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Linux&nbsp;35</h3>

-                 <p>Documentation covering the most recent release, Fedora Linux 35.</p>

-             </a>

- 

-             <a href="../fedora/f34/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Linux&nbsp;34</h3>

-                 <p>Documentation covering the Fedora Linux 34 release.</p>

-             </a>

- 

-             <a href="../quick-docs/" class="homepage-link homepage-link-primary">

-                 <h3>Quick Docs</h3>

-                 <p>How tos and tutorials for using and configuring Fedora Linux.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora-server/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Server</h3>

-                 <p>Are you using Fedora Linux on a server? This section is for you.</p>

-             </a>

-             <a href="../iot/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;IoT</h3>

-                 <p>Strong foundation for IoT projects at home, industrial gateways, smart cities or analytics with AI/ML.</p>

-             </a>

-             <a href="../fedora-silverblue/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Silverblue</h3>

-                 <p>Immutable desktop variant of Fedora Workstation and an excellent platform for container-focused workflows.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora-coreos/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;CoreOS</h3>

-                 <p>Fedora CoreOS is a minimal, container-focused operating system, designed for clusters but also operable standalone.</p>

-             </a>

-             <a href="../epel/" class="homepage-link homepage-link-primary">

-                 <h3>EPEL</h3>

-                 <p>Documentation for the Extra Packages for Enterprise Linux (EPEL) project.</p>

-             </a>

-             <a href="../fedora-kinoite/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora&nbsp;Kinoite</h3>

-                 <p>Immutable desktop variant of Fedora featuring the KDE Plasma desktop and container-focused workflows.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../fedora/rawhide/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora&nbsp;Linux&nbsp;Rawhide</h3>

-                 <p>Draft documentation targeting future Fedora Linux releases.</p>

-             </a>

-             <a href="../Fedora/26/html/Release_Notes/index.html" class="homepage-link homepage-link-secondary">

-                 <h3>Older releases</h3>

-                 <p>Older Fedora Linux user documentation.</p>

-             </a>

-         </div>

-     </div>

- 

-     <div class="homepage-section homepage-section-project-docs">

-         <h2>Fedora Project &amp; Community</h2>

-         <div class="homepage-section-container">

-             <a href="../project/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora Project</h3>

-                 <p>Learn how the Fedora Project works.</p>

-             </a>

-             <a href="../council/" class="homepage-link homepage-link-primary">

-                 <h3>Fedora Council</h3>

-                 <p>Learn about the Fedora Project governance.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../engineering/" class="homepage-link homepage-link-primary">

-                 <h3>Engineering Teams</h3>

-                 <p>Learn about FESCo and Engineering subprojects, SIGs, Work Groups, and teams.</p>

-             </a>

-             <a href="../mindshare/" class="homepage-link homepage-link-primary">

-                 <h3>Mindshare Teams</h3>

-                 <p>Learn about Mindshare and its subprojects and teams.</p>

-             </a>

-             <a href="../diversity-inclusion/" class="homepage-link homepage-link-primary">

-                 <h3>Diversity & Inclusion</h3>

-                 <p>The goal of this initiative is to help foster diversity and inclusion in Fedora community.</p>

-             </a>

-             <a href="../program_management/" class="homepage-link homepage-link-primary">

-                 <h3>Program Management</h3>

-                 <p>Release planning, scheduling, and status tracking.</p>

-             </a>

-         </div>

-         <div class="homepage-section-container">

-             <a href="../packaging-guidelines/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora Packaging Guidelines</h3>

-                 <p>Learn about packaging for Fedora Linux — from both a policy and a technical perspective.</p>

-             </a>

-             <a href="https://fedoraproject.org/wiki/Outreachy/2017" class="homepage-link homepage-link-secondary">

-                 <h3><i class="fas fa-external-link-alt"></i> Fedora's Outreachy Docs</h3>

-                 <p>Outreachy is an internship program for people from group underrepresented in free and open source software.</p>

-             </a>

-             <a href="../mentored-projects/gsoc/2021/" class="homepage-link homepage-link-secondary">

-                 <h3>Fedora's Google Project Participation</h3>

-                 <p>Information about Google Summer of Code (GSoC), Google Code In (GCI), and Google Season of Docs (GSoD).</p>

-             </a>

-         </div>

-     </div>

- </div>

- ++++

+ background: #FFFFFF;

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.

1 new commit added

  • Improve Docs Experience - Opening Pull requests
2 years ago

2 new commits added

  • Update homepage/modules/ROOT/pages/index.adoc
  • Update homepage/modules/ROOT/pages/index.adoc
2 years ago
Metadata