POSTS IN Filling the Keg

A back stage look into the making of our blog.

The Evolution of Keg’s Design

By on July 2nd, 2012

Keg’s first branding concept was a quick decision for me: it should be similar to Barrel’s, but lighter and more playful (like a little sister blog). I would keep the feel clean and minimal. Instead of black, I would use white and pale grays, with a touch of one bright accent color to instill a little playfulness into Keg. The logo would obviously be the same typeface that Barrel uses for their logo: Berthold Akzidenz Grotesk.

What came out of that idea was my first draft:

A very simple Keg layout.

Clean? Check.

Berthold Akzidenz Grotesk logo? Check.

Playful accent color? Check.

But there’s something missing. It fits neatly into my initial concept, but it felt “plain” to me. I know design isn’t about bangs and whistles, but I wasn’t completely happy with the mockup I had on my screen.

So naturally, I decided to go the other completely logical way and try out new designs with a huge, all-up-in-your-face graphic.

At this point, I was stuck. The graphics took up so much space on the screen and I wasn’t really sure where to go next.

Thankfully, Jane gave me some very useful advice: focus on blocking out the structure before stylizing. In twenty minutes, I had an early draft of the design we have now.

This version takes the elements I liked best from all of the earlier concepts, combined into an awesome design.

It has all the elements of my original idea, but has just enough color and details to give Keg its own voice. The small touches of animation with the logo and search makes the design less static. The narrow width allows for an optimal line length (around 62 characters per line) and body text size (16pt), which results in a very comfortable reading experience.

I had a lot of fun designing Keg. I’m happy with how it turned out, and I hope you like it too!

Searching the Keg

By on June 25th, 2012

Building this blog is my first experience with WordPress . To give you background, I have experience with both PHP and other object oriented languages, which helped with understanding the code and the way it works. So, instead of using a template I built our theme “keg” from scratch. While using a template would probably have been much easier, through developing our blog I have gained a much better understanding of the way WordPress works and how useful its vast library of functions are.

Patrick sent me a really helpful link to Chris Spooner’s tutorial, which  is basically a manual that you can more or less copy and tweak to meet your own needs (for example we included a tag filtering subject in our blog). You simply place the WordPress function in a div that you can customize the styling of with CSS. What I didn’t realize until this was how many functions WordPress has and how well documented they are. The WordPress Codex is a life-saver. Pretty much if you want to do something, they have a function for it. You want to list the tags, use list_tags(), you want the template url, use template_url(), etc. Taking our site from the generic 2011 theme to this:

We also included some javascript, allowing the smooth scrolling back-to-the top and the our logo hover to extend down. Most recently, we added a search capabilities to our blog.

While Spooner’s tutorial is amazing, it did leave me with some confusion surrounding search.php, more or less because it is the only thing he did not specifically spell out word for word.  Like everything else WordPress has a function that builds a search form for you (get_search_form()). To customize it is practically as easy as calling it. In your theme folder simply create a php file called searchform.php and build the form with what ever traits you wish your search function to have. For example here’s our code:

Key things to remember are setting the method as “get” and the action as the homepage url. WordPress will automatically look for your search.php page to display the results on. After this get_search_form() calls the form you have created rather than the default form. Katie designed a simple yet classic speech bubble form like this:

for our blog so our php file only consists of a few lines of code.

Also key to our search form was that it remain hidden unless you click the search icon, a magnifying glass, so the top of our page transforms from this:

to

In order to do this jqModal offers a great plug-in. You simply insert into your html the div that contains the element you want to appear and give the div the class jqmWindow:

Then you upload the jqModal code for into your scripts folder and attach it in the header. In your main javascript file you then call $(‘the div you want to appear’).jqm(). You can customize your modal with CSS, giving it an overlay or customizing the form. You can also add triggers to open the modal or to close it by giving them class=”jqmClose” which we cave to both the search icon and the body so that if you click outside the search form it disappears.

It is also important to add CSS styling for the jqmWindow and the overlay (if you’re using it):

Finally, we move onto displaying the results. Both WordPress and Spooner cover this. More or less your search.php should be very similar to your index, calling header.php, footer.php, sidebar.php etc. The main difference is that you want to display the results. To do this you are going to want to use WP_Query. WordPress extensively describes how to first form the query:

This will search throughout your blog and the results will be stored in the variable $search. You can then customize the way the results are printed out varying what you echo in between the while loop:

while ( $search->have_posts() ) : $search->the_post();

endwhile;

We decided that our post should contain links to the titles as well as brief excerpts of the posts:

Then all that’s left is to style away!

Ta-da!

By on June 15th, 2012

We are officially unveiling Keg! Welcome, welcome!!

Although there are still some tweaks to be done, it’s a lovely change from our slightly flat twenty-ten WordPress theme. Still, we’re excited to share with you our fast progress since our first week at Barrel. Stay tuned for our next posts, we’ll be filling up those categories on the side pretty quickly!

No Comments

Filling the Keg 0.27

By on June 7th, 2012

We just had our first progress check meeting re: the intern blog yesterday! Here’s the lowdown of what went on. You can also read our first post below, where we gave some brief introductions to ourselves and the beginnings of our internships at Barrel!

Keg v0.0 - Guys, let's not ever forget the WordPress 2011 theme that our blog started off with.

Topic 1: Our name.
We presented on our brainstorm for whimsical, humorous relations to Barrel, and how we ultimately decided upon Keg, singular and capitalized. Traditionally a keg was a wooden container, like a barrel, but now it is more popularly known as the metal contained used to transport and dispense beer. Doing some more research, I’ve discovered that a keg is actually known as a small barrel (according to Wikipedia). How apropos! Like Taylor says, we’ve done a better job of naming ourselves than we originally thought!

Topic 2: Our content.
We want to fully showcase our intern lives at Barrel, documenting our growth, what we’ve been learning, what we’re working on, as well as the fun we’re having, too! Here are some of the things we plan on talking about in our blog: Life at Barrel, Filling the Keg, Tips and Tools, as well as Keg Talks. This post falls within “Filling the Keg”, where we’re going to show you our process in making this blog, pretty much as it happens, live. When we start writing within the other sections, we’ll also introduce their functions more specifically.

Topic 3: Our design.
Our blog is currently operating in a WordPress 2011 layout, which is not particularly eye-catching. As interns at a digital agency that specializes in making websites and digital experiences, how can we possibly let this stand? We’ve already tossed many ideas around surrounding possible logos, typeface use, color scheme, and overall layout design. Here are a few snapshots of what we’ve been experimenting with (Thanks Katie!).

Keg v0.1 - Playing off the simplicity of Barrel's website. Note: we're using the same font for "Keg" as Barrel does for their logo.

Keg v0.2 - Here we added an illustration for dynamism and youth! in the header. The yellow color got some interesting feedback: we had originally planned for some liquid leakage out of the keg via a spigot. Then some of us thought it made the column look like a pint glass with foam and beer underneath, others thought the yellow reminded them of a different liquid...

Keg v0.25 - Keg is big and simple without "We are" in this header, making it easier to read. But the description underneath is still a tad small in size. We opted to stick with this narrow format to optimize reader viewing; we read better in columns!

This has just been a preliminary peek! There’s much more to come as Katie finishes and tweaks the final design. She’ll probably talk more about that. We have since departed from this large header format and are looking to focus on the content of our blog with its design. We’re also working out some technical kinks in our blog at the moment: enabling photo/media upload, creating archive functions within our design, and perhaps integrating social media. Stay tuned!

No Comments
back to top