Sarup's blog!

about ideas

Init: Redesigning GlitterGallery responsively

07 Jun 2014

When we started out this summer, I was telling Paul how my work on redesigning GlitterGallery was going to be awesome for my blog - pretty pictures!

GG Banner

I took to a lot of sketching last week since I was without a computer (I’ve posted Fedora.next logo concepts here). Like everything else, initial thoughts on GlitterGallery’s redesign started with sketches.

First, I hopelessly poured over all of my previous sketches to.. you know, get the ball rolling within my head.

First mockup ever!

First mockup on user page

First mockup on Glitterpost

Idea of comment -> track logic

Old plans of doing the pages

Pull request ideas

GitHub inspired mockups

Then it struck me - a lot has actually changed since those initial sketches, and we need to think in terms of how to deliver the new stuff better. Before starting to doodle right away, I went over a talk I did recently at the Libre Graphics Meeting in Leipzig. I couldn’t really explain all my ideas at the event, thanks to the last minute time allocation changes but I knew it was going to remind me of the key ideas we had to keep in mind when working on the new frontend. There were also few mockups I had made as part of my proposal for the summer, I went over them as well.

User page on proposal

Glitterpost on proposal

Issue page on proposal

Infograph on proposal

With that, I started to hopelessly doodle, taking inspiration from various articles Emily shared with me about responsive web design practices.

Initial bad layout

Ideas for the mobile flow

Blank slate ideas

And things started to look better.

Better layout

New user page overview

Aaaand, surprise! Two days ago, I found a charger and finally had access to the computer! Time to do the real pages!:D

Instead of polluting the original GlitterGallery repository, I started a new one for the WIP design stuff. There’s two pages at the time of writing, if you’d like to take a look, the login page and the user page. It might appear as just two simple pages, but these also serve as a framework on which to build the others, so the remaining redesign should be much easier and faster.

There was two important choices to make - the right layout and the right color scheme.

Ryan’s words at LGM come to the mind - “Mockups should show the essence of what you want to convey, without really going into too much detail about things like color. If the mockups are too precise about such things, people will complain when they don’t get what was originally promised - and it can be frustrating to give an answer!”

Pattern and color

He was right. I picked up a neat background texture from subtlpatterns, played around with various color combinations and finally settled with one when it began to feel right.

The challenge wasn’t to make just a few pages, it was to make them accessible on various devices - we had to redesign responsively ;) In the process, I picked up jeet, a cool library I must say; and experimented media queries on my sass - choosing the right breakpoints, sensible sizing, standard patterns, all of that stuff.

Here’s how the pages currently display on various devices - feel free to try them out in whatever cool gadgets you own! You can also try resizing your browser to watch the magic happen :)

User page on desktop

Login page on a notebook

User page on phone

I was super thrilled when I loaded the login page on my own phone! Infact, I had optimized it for the keypad to not cover the login button when typing the email - small things count, don’t they? ;)

Login on my MotoG

The most important part - lessons learned:

  1. Sketch. Easier to make changes to a paper drawing than having to go through all of that programming/layouting mess again.
  2. Design mobile first, and then go upwards on screen size. Practising this will result in more manageable stylesheets and you won’t overwrite styles for elements that behave the same way across smaller width devices.
  3. For responsiveness, choose breakpoints not based on standards, but based on page content.

My TODOs for the next week or so (Fedora stuff):

  1. Improve this framework: when there’s more screen available, things can be dealt with better.
  2. Extend this framework to some more pages.
  3. Work on digitizing the Fedora.next logo concepts.
  4. Go forward and finish the stuff planned for GSoC iteration one.

Great, now I’ll go drink some coffee - it’s been painful taking all these screenshots ;) Until the next post, here’s some family photo for ya:

Login page family pack