Skip to content

Instantly share code, notes, and snippets.

@vaidap

vaidap/GSoCreport.md Secret

Last active Sep 22, 2017
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Google Summer of Code 2017 Summary
Raw
GSoCreport.md

GSoC '17 Summary: Illustration & Web Design Project

Vaida Plankyte | website | twitter | github | email | CV

Introduction

I'd like to start by thanking Zulip's community for making my summer really dynamic, fun and full of learning!

I feel much more comfortable with Git and frontend web development, and I've developed a skillset for learning how to debug and figure out how to resolve problems. I dabbled in some Python backend, as well as learning how to use Handlebars/Django templating, read a lot about best accessibility practises, and was able to adapt my illustration skills to communicate a message. Most importantly, I learnt about the workflow of an OS community, how to organise my priorities, communicate and submit clearer PRs.

The following sections summarise the different areas I worked on, listing the merged and open PRs, as well as emphasising the bigger PRs in bold.

Illustrations

I made a large number of illustrations to be used on the landing, marketing, login and documentation pages. I've also created some that are more context-independent but themed (portraits, holidays, ships) that can be reused for other pages, and a seamless pattern that can be used as a background.

All illustrations went through multiple rounds of iteration based on feedback. This was very useful to me, as I would normally work on illustrations for my own projects and not receive extensive feedback: I was able to fine-tune my workflow. I also learnt about SVG animations, which were completely new to me.

Page Illustration Implementation

I redesigned the 5xx/4xx error pages, as well as making illustrations for the for/ marketing pages, why-zulip and login/registration pages and ensuring that the images are responsive.

Merged PRs:

Open PRs:

Email redesign

Another large portion of my work was focused on building onto the proposed design of the emails, creating illustrations for them, and testing them in different email clients to make sure they rendered properly. This involved using putsmail.com and fiddling around with the CSS to make sure everything rendered properly.

Working on small "hacks" and fixes to make the emails render well in all clients really tested my HTML/CSS knowledge, and it was very interesting to find different solutions for issues online and work out which one would work the best in this case.

Merged PRs:

Open PRs:

Accessibility

I worked on fixing the warnings thrown by the Chrome Accessibility Tool. I spent a large portion of time implementing a high contrast mode (frontend & backend), as well as fixing modal visibility, image alt values, and making various markup changes that improve screenreader experience.

Working on the high contrast mode was very challenging as I had to make lots of small CSS changes and implement the backend, but it was also very rewarding to see it all work!

Merged PRs:

Open PRs:

Documentation

I worked on improving both user and developer-facing documentation. It was sometimes easier for me to see where the documentation needed improving as I was reading it when using a new feature of the development environment. I mostly made improvements to the git documentation, including integrating the GCI documents into the main repo, as well as improving the GitHub/Google authentication error warnings, and documenting some new features.

Writing in a concise manner and considering different interpretations was more challenging than I expected. I most enjoyed working on improving the Git documentation, as I was learning about it while editing the docs.

Merged PRs:

Brand Guidelines

I worked on the first version of branding guidelines, meant to cover the general aspects of Zulip's presentation, including allowed uses of the logo, and modifying the look of the document itself to fit this.

Note: the work has been done in Brock Whittaker's private repository Zulip Style Guide. If you can't access this repo, a couple of screenshots of the work are here.

Open PRs:

Various improvements/fixes

I also made some small improvements to the UI of some parts of the web app-- such as the confirm_continue_registration.html page, as well as refactoring work on do_refer_friend and replacing some of the scrollbars with perfectScrollbars.

I enjoyed refactoring as I got to look at backend code and consider how the different parts interacted and how I should remove the different bits of code while not breaking the other features.

Merged PRs:

Open PRs:

Next steps:

  • I was not able to work on the Zulip-themed Emoji Kit part of my project, as the emoji picker was being worked on and it was wiser to wait until the picker was solidly implemented before working on the emoji kit. The idea of having custom stickers instead of emojis might also be more relevant.
  • Replacing the FontAwesome kit with a custom outline icon kit would improve the visuals of the app, while also being an interesting project to take on.
  • I'd also like to contribute to the "physical" branding: posters, stickers, t-shirts, and reiterate on the illustrations to include a touch of a different colour in order to make the work more vibrant.
  • The Chrome Accessibility Tool does not notice all issues: I'd like to have a more in-depth look at the markup and figure out what main issues need to be addressed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment