<GSoC’22 @GNOME = “Project Updates & GUADEC”/>
This blog is about GSoC project’s progress as well as my experience attending GNOME’s biggest conference, GUADEC.
My GSoC Project
Skip this section if you have read my previous blogs.
GNOME HIG CSS Library project aims to design, develop and publish a unified CSS library incorporating the revised Human Interface and Visual Identity Guidelines allowing developers to update the existing GNOME websites and create new ones with a congruent visual identity.
To get more context on my project checks out my previous blogs here.
Fresh Updates!!
We are incorporating both light and dark modes in the GNOME HIG CSS library. The benefits of doing this are:
- Added flexibility for developers while creating future websites for GNOME.
- Giving a choice to the end-users for switching between light and dark modes while accessing GNOME websites.
- The Norman-Nielsen Group has found that in people with normal vision (or corrected-to-normal vision), visual performance tends to be better with a light mode, whereas some people with cataracts and related disorders may perform better with dark mode.
Designing Inclusive Links
One of my first tasks in the project was to update the links. While performing the inventory(you can learn more about this in my previous blogs here) for links I realized that there weren’t specific way links was designed across all websites which made me ask the question, “how to make sure links are well-designed?”.
While researching the first thing I realized was that most links on the internet weren’t accessible or inclusive. Links are typically underlined, and that’s how users perceive them. Underline your links.
But if underlining your links goes completely against the design language of your website, then the link text should be discernible from body text by at least a 3:1 contrast ratio.
This was just one of the many guidelines that I read about while doing my research on the internet. I have summarized all the points I could find in a document that you should definitely check out here.
I realized that this was a super important step that needed to be done for every element/component that was to be designed, and hence I will create more such documents and share a combined drive link in the next blog!
Texts
While working on the inventory of Texts, I observed that the GNOME websites had inconsistent font sizes defined for H1, H2, H3, etc. Ensuring consistent designs is one of the project’s most important objectives. Hence, I incorporated and analyzed both the HIG-defined typographies and new designed websites.
To not make the users strain their eyes while reading, the base font size of the body text was updated to 18px from 16px. If text is legible, it doesn’t mean it’s readable. With legibility, text can be interpreted, but readability takes it a step further and incorporates the emotional effect of design and the amount of effort it takes to read. This is why smaller body text sizes thought as ‘legible’ are considered sufficient. More about this can be read in the article Your Body Text Is Too Small.
I also ensured that the contrast ratio between the fonts and background was 7 : 1(AAA standards) for both dark and light modes.
Lists
GNOME websites have several types of lists including a vertical list without bullets, with arrow bullets, with numbers, and a horizontal list. I had to ensure that I included all the different styles in the mockup designs.
I was unsure about the default margins and padding of the lists since they depend on the positioning of the list on the webpage and it’s structure. I’m looking into a few frameworks and libraries right now to learn how to solve this problem.
Buttons
Buttons were fairly easy to design since some work on them was already done by Clarissa(previous GSoC intern). Her work on it helped me in deciding the different variations of buttons that I need to include in my designs.
Currently, buttons have rounded corners, but after talking to my mentor, we are also including square buttons and buttons in small and large sizes. This way developers will have more alternatives and flexibility while designing GNOME Websites.
GUADEC — GNOME’s biggest conference🎉 super fun ++ informative week
25th Anniversary of GNOME
This year GNOME marks the 25th anniversary in Guadalajara, Mexico with the first in-person GUADEC in 2 years, celebrating GNOME and free software!
GNOME Users and Developers European Conference(GUADEC) is the GNOME community’s largest conference, bringing together hundreds of users, contributors, community members, and enthusiastic supporters together for a week of amazing talks and workshops.
Sadly, I was unable to travel to Mexico, but the events that were streamed online allowed me to participate from far away. I enjoyed the workshops, seminars, and erudite discussions of the speakers along with the Lightning talk where I got a chance to present and talk about my GSoC project🤩✨ Here’s the YouTube Link to the Lighting Talk
Some of the most intriguing and informative talks that I enjoyed
Peeling Vegetables and the Craft of (Software) Inclusivity by Robin Tafel
The talk was about how analyzing products from varying abilities and backgrounds opens opportunities for creating better experiences for everyone. Example Audiobooks were designed for people with visual impairment but later became a part of everyone’s routine.
Key Takeaways
✓ Near ubiquity — solving from one problem can solve many
✓ Accessibility is the byproduct of inclusive design and both aim to reduce barriers between humans and technology
✓ Inclusivity is not one thing for all people but a diversity of ways to participate so that everyone has a sense of belonging
✓ Ability is context dependent which can be permanent, temporary, or situational
✓ To learn more about inclusivity embrace an accessibility culture in your organization and allow them to work with you
✓ Try to look from various new perspectives that can be done by nurturing new talent, hiring fewer experience people (unique perspectives=empathy)
Best Practices for GNOME App Design by Allan Day
The talk was about the best way to approach the GNOME platform from a design perspective, and how to leverage that platform to create amazing application designs by familiarizing oneself with design patterns, and resources such as HIG, and design tools.
Key Takeaways
✓ Design systems are holistic and comprehensive and they are built around patterns and not just components which allow design creativity
✓ Design system includes principles, style guide, component library, pattern library, and UX guidelines
✓ Design for people, make it simple, reduce user effort and be considerate
✓ How to use the GNOME Design system — treat it as your platform manual, use the patterns, recognize patterns, and use them to solve problems
Workshop: Usability testing workshop: Making your software easy to use by Remote Jim Hall
This was a hands-on 2-hour workshop on usability testing and how it helps to make websites and software easier for everyone to use. It included the fundamentals of usability testing and walking through all the steps to design, create, execute, and analyze a usability test.
Key Takeaways
✓ Usability and user experience go hand in hand
✓ Usability testing is done by creating personas, use-case scenarios, scenario tasks, testing, and analyzing
✓ Usability testing should be done by real users for an unbiased view of the system
Other insightful talks that I attended includes
➢ Paying technical debt in our accessibility infrastructure by Federico Mena Quintero
➢ How to be a GNOME Graphic Designer by Daniel Galleguillos
➢ How GNOME can help your career GROW by Melissa Wu
➢ BoF: Opensource, Neurodiversity, Accessibility and How to include people with disabilities in opensource by Rikard Grossman-Nielsen
➢ BoF: App Criteria and Organization by Chris Davis Felipe Borges (Red Hat) Sophie Herold
Though gonna miss the Tequilla tasting!!!
GNOME Foundation has a knowledgeable-driven community for anyone who wants to learn and in the process contribute. Reach out to me for any more information.
For feedback on my design process or in general on how can I improve my blog, writing do Email me :)
