GSoC '17 Summary: Illustration & Web Design Project
website | twitter | github | email | CV
Vaida Plankyte |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:
- 5xx page redesign
- 4xx page redesign
- Darken the static error pages text.
- Add header to static/404.html + 5xx.html.
- Redesign templates/ error pages.
- Add feature illustrations to landing page.
Open PRs:
- Add illustration to for/ pages.
- Add illustration to why-zulip.
- Add illustrations to login/registration pages.
- Change feature images to SVGs.
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:
- Common base template for HTML emails
- Add email illustrations to static/images/emails.
- Add email illustration SVGs to assets folder.
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:
- Implement high contrast mode display setting. (backend)
- Add hotkey information to title tooltips.
- main UI content not in background images
- increases contrast of text on login/register pages
- increases contrast of sidebar captions
- Fix unnecessary positive tabindex assignments.
- Toggle aria-hidden for overlay container visibility.
- Fix elements that are not visible should not be focusable.
- Use the singular 'they' pronoun where appropriate
- Fix more ARIA audit tool issues.
- Change inaccurate aria-hidden assignments on buttons.
- Fix a couple more ARIA issues.
- Fix focus issues on login and registration pages.
- Remove old required div & css from registration pages.
- Fix aria-hidden assignments in modals.
- Remove IDs from alt value of inline images.
- Remove purposeless title attributes from gear menu.
Open PRs:
- Add high contrast mode setting to display settings. (frontend)
- Add tooltip for stream description in sidebar.
- Fix some accessibility issues related to ARIA audit tool.
- Fix links being clear from link text for landing page.
- Change buttons that are nested in anchor tags.
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:
- Move gci docs into main repo.
- Add docs on new manage organization features.
- Add explanation of pointer/unread count behavior.
- Add bug report guidelines.
- Clarify GitHub/Google auth for dev env.
- Move template section from translating.md to html-templates.
- Add GOOGLE_OAUTH2_CLIENT_ID to DEFAULT_SETTINGS.
- Add warning for misconfigured github/google auth.
- Mention and explain WIP PRs in git-guide more
- fixes code typo in translating.md
- Add links towards GitHub guide in installation instructions
- removed all non-gci specific documentation.
- Emphasise running Git BASH as admin under Win10.
- Fix linking & typos in WIP PR section in git-guide.
- Add screenshot-and-gif-software.md and link to it.
- Document ability for admins to delete messages.
- add more details to git-guide about fetching branches/PRs
- Clarify tools/ script usage in git-guide.
- Add info on resolving merge conflicts to git-guide.md.
- Update links to point to organization permissions.
- Rename Manage Organization snippets.
- Add documentation on deleting a message.
- Document @all mentions.
- Emphasise Travis CI setup in dev env setup docs.
- Document display emoji reactions as text feature.
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:
- Delete all code touching do_refer_friend
- Edit confirm_continue_registration.html to be clearer.
- Use render_markdown_path for error content in config_error.html.
- make notification header consistent
- improves public/private stream descriptions
- Fix deprecated Windows 7 app link.
- Make table headers fixed.
- Add perfectScrollbar to main help page content.
- Increase container width.
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.