Designing GEMA — so you think you can break the rules?

design

I’m Ilin­ca, one of Pix­el­grade’s design­ers, fresh­ly ini­ti­at­ed in the pack and slow­ly build­ing my path in the Word­Press world. My junior months have brought a chal­lenge I would least expect for a start: design­ing a new (awe­some) Word­Press blog­ging theme.

I hard­ly found good resources on design­ing a Word­Press theme and it was a chal­lenge to explore and go through a cus­tom empir­i­cal process.

My play­ground was con­toured by a gen­er­ous amount of research (and a gen­er­ous amount of open tabs), loads of sketch­es that were hoard­ed up in the draw­ers of my desk, a lot of ping-pong dis­cus­sions with George, my fel­low design­er, nerve wrench­ing use case sce­nar­ios, the Grand Canyon between Pho­to­shop and front-end real­i­ty and final­ly, the launch and how the feed­back sur­prised me day by day.

Let’s bring a glimpse inside Gema, a Word­Press theme that is the child of bro­ken rules and some sweet vibe I got from a per­fume ad. The scene is yours!

Manifesto

As we did the research through blog­gers’ sites and after observ­ing their behav­iours in craft­ing their posts, a sil­ly but obvi­ous behav­iour emerged: they are not tak­ing that much effort in choos­ing the per­fect pro­por­tions for their images or they not care­ful­ly take into con­sid­er­a­tion the posts title length. Still, their sto­ries are great and they are look­ing to make it even bet­ter togeth­er with how it’s show­cased.

All our themes aim to have a lit­tle “wow” effect, some­thing that made them dif­fer­ent from day one, so the cher­ry on the top of the cake for Gema was to apply a solu­tion to the prob­lems above, on a coher­ent and har­mo­nious aes­thet­ic grid lay­out that adjust­ed depend­ing on its con­tent.


The Design Playground

Con­sid­er­ing that I’m not hav­ing a mature design process in place and I can­not afford the time to set up one, George sug­gest­ed to keep in mind these 3 things:

  1. Focus on my native instincts aka go back to my roots and trust my illus­tra­tor guts.
  2. Cul­ti­vate my sense of obser­va­tion by review­ing well–done web­sites.
  3. Then chal­lenge myself and push sil­ly things for­ward as he will try to get myself back on track.

The 3x3x3 Research Mantra

I’ve nev­er called my research “research”, but “inspi­ra­tion hunt­ing”. And I also gave it a name: the 3x3x3. George actu­al­ly came with this idea that implied search­ing for inspi­ra­tional web­sites as fol­lows:

  • 3 which have great use of font pair­ing,
  • 3 that are chro­mat­i­cal­ly sat­is­fy­ing and,
  • 3 that nail it when it comes to lay­out.
I like not using tech­nol­o­gy to archive my find­ings. Now using Ever­note though.

Type­wolf is pure eye can­dy for any web design­er, even if Jere­mi­ah is hunt­ing down only the beau­ti­ful use of fonts, but with great fonts come great expec­ta­tions in lay­out design and col­or pick­ing. Fast for­ward, I’m at page 124 (or so) and even if there were less than 70 to go (haha, like that is a piece of cake), I end­ed up with the list on the left.

*Ok, they’re not real­ly 3 of them, the list was even big­ger in my Book­marks bar, but I took my time and Alt+Cmd+[Arrow] through the sites that were left and final­ly picked 3 of them.


Let the magic begin

Now we’ve got 9 inspi­ra­tions, 3 of those relat­ing to lay­out being used lat­er on. All in all, there was noth­ing left to do than fire up Pho­to­shop and start mix­ing and match­ing col­ors, fonts and image place­hold­ers. I was mind­less­ly com­bin­ing all these resources that I found, with­out know­ing that it was my first process of iter­a­tion that result­ed into this:

Font pair­ing iter­a­tions and, lat­er on, cards styles. I got a lit­tle bit dizzy after because of all those lines.

Style’s done, grid’s next.

After search­ing through 124-ish pages of web­sites, you’d say I’ve seen my fair amount of grids. Not real­ly actu­al­ly. It turns out design­ers don’t play much with grids, so when you’re view­ing mason­ry built web­sites or clean horizontal/vertical align­ments, you’ll prob­a­bly end up with a dull sketch of some squares 3x3. That’s what I even got from my 3x3x3 research, the lay­outs weren’t visu­al­ly chal­leng­ing or demand­ing much atten­tion, so why both­er with some­thing new if peo­ple like this?

The lay­out grid pro­pos­al a.k.a. wait for it…

😅 All good, I’m happy — what’s the next step?

This was the moment when the man­i­festo kicks in along with George and, in his words:

Not — that’s bor­ing. Back to the draw­ing board and push some bound­aries.”

George was this Waif (on Zen mode, thank God) that kept pok­ing me with a stick when­ev­er I was tak­ing the short path instead of mak­ing my own. My first sketch­es that includ­ed the lay­out were no excep­tion. Being two design­ers in the team turned out to be the begin­ning of a ping-pong that we are still prac­tic­ing, so I slow­ly make my way back to the draw­ing board.

Iteration is my middle name

The (re)making of the grid start­ed with well…Break­ing the grid. Page after page, I book­marked what I thought would be a new approach on blog­ging grids. My first attempts were kind of bor­ing, nev­er end­ing alter­na­tions of the good old Mason­ry that we dread­ed so much — the shit­ty first drafts, as Max Temkin calls them.

Grid explo­ration time!

But I final­ly got my hands on some­thing “braver” and proud­ly pre­sent­ed my sketch­es to George.

Nop — still bor­ing. Try some­thing more gut­sy.”

Did I expect this response? No. Did I end up frus­trat­ed? Hell yeah, what would be design with­out it? It felt like some­one asked me to invent a new col­or.

Shaping the workflow

I decid­ed to reverse the work­flow and went from clear­ly defined lay­outs to doo­dling ran­dom tiles by per­son­al appeal (yeah, I hear you frown­ing), only by keep­ing the ini­tial­ly defined prob­lem in mind. My grid went from Plain Jane to some­thing I proud­ly named Tri­grav­i­ty Mason­ry, or if fan­cy words aren’t your cup of tea, the Tetris T blocks.

Tri­grav­i­ty Mason­ry explained using Tetris T blocks.

Frus­tra­tion worked like a charm and George agreed 😊.

This is what we’re look­ing for.

Finding the red thread behind the doodles

Blog posts were grouped 3 by 3, form­ing a T-shaped block that was 90 degrees rotat­ed either to the left, or the right and the rest is…Tetris: the goal of it all was to fill in the pos­si­ble gaps that would frus­trate you to hell and nev­er let you get a straight line a.k.a. avoid­ing awk­ward white spaces in the design.

The “T” shaped blocks, placed around some grav­i­ty points.

Question everything in terms of use-cases

The grid was more of an exper­i­ment, so, before pass­ing it to the front-end mas­ters, I start­ed a DIY pro­to­type of the grid which used ran­dom strings of L’s (Land­scape), P’s (Por­trait), T’s (Text), each of them rep­re­sent­ing the posts types I had designed ear­li­er. All those char­ac­ters, bun­dled up, had to be use cas­es of blog posts that a pos­si­ble user could have had. Looked pret­ty promis­ing, eh?

Try­ing out dif­fer­ent lay­outs based on posts’ ori­en­ta­tion. Non-for­mal.

Keeping your wheels spinning when everything breaks

It turns out lat­er that my Tri­grav­i­ty Grid was a white-space induc­ing mon­ster and there are still many unfor­tu­nate cas­es that I didn’t cov­er. Here I am with Răz­van, one of the front-ends, that was the hap­py win­ner of a sub­scrip­tion to grid hell guid­ed by an anx­ious design­er. He’d been work­ing on mul­ti­ple vari­a­tions of the grid fol­low­ing my algo­rithm, but it seemed like the thing that made it a pre­ten­tious lit­tle bitch was actually…my algo­rithm?!

😞 Upset moment — we might leave it behind and get back to start.

But.. giving up is not an option

I was pret­ty dis­ap­point­ed, I want­ed it to work because it looked so smart and yet so ran­dom, I just found order in chaos, but then I broke that order. I start­ed down­grad­ing all, mak­ing posts all square, try­ing good ol’ Mason­ry and even try to change the style. This was then fol­lowed by a deep dis­cus­sion on Slack with George and, in a tl;dr man­ner, it all turned out to this: giv­ing up is not an option.

While 🤔 brain­storm­ing with Răz­van and George we decid­ed to switch the algo­rithm from a block-based lay­out to a col­umn-ori­ent­ed one, which in most of the cas­es would give us the same result: a unique and adapt­able lay­out based on the posts con­tent + a bal­anced white­space area around all the posts. It works!

🎉 Glee, par­ty, and con­fet­ti!!!

Mov­ing from a “Tetris T” lay­out (left) to a col­umn ori­ent­ed one (right).

Single Page, they say

After the archive lay­out was con­firmed, I had to go to the oth­er impor­tant sec­tion of the blog: the sin­gle post page. The thing about sin­gle pages is that there is not much more to improve as they all emerge from a few known pat­terns.

I am still *secret­ly* in love with this Sin­gle page.

Going the fast way and things are done — so easy!

Not — let’s dig deep­er.”

Iteration is my full name now

Oh, hi, haven’t heard this for a long time. Again I’m trapped in some kind of cir­cle of what users have been used to until now, but as if Newton’s apple was rein­car­nat­ed some­where in my head, I thought: “Why not use my Tri­grav­i­ty grid algo­rithm?”. Eure­ka! An idea that will make the whole site more con­sis­tent has been born.

Final design for the Sin­gle page.

Things were look­ing great, and there were no many things left to do.

Finishing the journey

Menus, wid­gets, com­ment sec­tions and respon­sive lay­outs, these ele­ments were the last mile­stones that I passed through. I am sure this was my “Aha!” moment as a design­er when I noticed how impor­tant micro-inter­ac­tions and a respon­sive lay­out are. This was about to get even more sig­nif­i­cant while imple­ment­ing the new styles with Cristi, front-end mas­ter no.2.

Things were going pret­ty smooth and after 3 months from the start, we sub­mit the theme for review.

Let’s open that champagne 🍾

Lucky us for, the WordPress.com guys have a real­ly thor­ough review sys­tem and boy, did they REVIEW it.

With­in anoth­er 3 months of fix­es and enhance­ments, based on the back-and-forth with the review team, Gema was launched on 2nd of June 2016.

Now it’s 2 months old and it was sold by over 190 times — around 100 sales per month at a $125 price, which is quite good for our port­fo­lio and espe­cial­ly for my first project. 🎉 Horaaay!

The final result (see demo).

Honest takeaways

I thought I’d share a hand­ful of lessons I’ve learned dur­ing this design process — as a help­ful guide for those just start­ing out.

  1. Nev­er set­tle on the first idea: nor on the sec­ond one, just keep search­ing, improv­ing, learn­ing and things will work out as they should.
  2. Don’t be afraid to break the rules: if you want to be a cut­ting-edge, inspir­ing agency or free­lancer, always step aside when you’re hap­py with what you’ve done because it sure­ly isn’t your final work. Or get your­self a George who will be some­where in the back­ground say­ing: “Try some­thing more stun­ning”.
  3. Downs are good to get bet­ter and move for­ward: Ups and downs are good, but the best are the downs — I’m writ­ing this with joy and a smile on my face — all the effort was so well deserved, I would have been prob­a­bly emo­tion­less if it all worked just as planned.
  4. Iter­ate, iter­ate, iter­ate: It’s like pol­ish­ing a dia­mond — you need be patient and keep on scratch­ing on a rock until you get to the shiny core. It’s not only a dis­cov­ery of the intri­cate­ness of an idea but a self-jour­ney where you explore how much your cre­ativ­i­ty can take.
  5. Shape your own work­flow: the 3x3x3, the paper-gen­er­at­ed grid, pro­to­typ­ing shouldn’t always be about site maps, user dia­grams; go wild, things could end up so bad, but so good, you have the same 50/50 chance of doing it well in both cas­es — so why not have fun in the process?
  6. Be a team play­er: talk, dis­cuss, be open, ideas aren’t good or bad, they’re ideas; fear and anx­i­ety just con­sume time and ener­gy. I expect that design­ers tend to be intro­verts rather than extro­verts since they ded­i­cate a lot of time to research and analy­sis, but the ener­gy of a team that is pre­pared to imple­ment your ideas and ready to dis­cuss over it is sure­ly some­thing you can’t achieve on your own.

My conclusion

After all this strug­gle, I was final­ly hav­ing a warm fuzzy feel­ing while star­ing at Gema’s theme page. Now I have 2 note­books full of sketch­es and an acre of my mind bun­dled up with Do’s and Dont’s, which I’ll be sure­ly using on the next theme I am already design­ing.

This sto­ry was about the good, the bad and the ugly behind the design process of a Word­Press theme that want­ed to break the rules. Thank you so much, my love­ly Pix­el­grade crew, for let­ting me grow in such ways that I nev­er expect­ed and allow­ing me to con­tribute to our path. Cheers, let there be more ahead of us! 🍻

Ilinca Roman

Designer with a love for post its, creator of things that last longer than your favourite t-shirt, total data freak. Fancies illustration and any kind of craftsmanship that keeps her inspired and hands-on.