The Dieline Package Awards Announced

dieline 2013

If you love product packaging like I do, you probably know about Dieline, an online exhibition of the latest and greatest product packaging out there. They have just announced their winners for this year’s packaging awards, so if you want to see the best of the best, check out the winners on Pinterest. While you are there, be sure to follow all their boards too, you won’t be disappointed.

I personally think that packaging design seems to always be on the cutting edge of visual design, normally ahead of web design. If you want to be influenced by the most cutting edge stuff that will be trends later, definitely start looking at packaging design frequently. I would also recommend following Packaging Pick of the Day on Pinterest also. It’s not as moderated as Dieline’s feed, but you get a lot of pins a day by lots of different people.

Happy Pinning.

Building new animal rescue theme

rescue_thumb
Homepage concept for Rescue Me theme

Homepage concept for Rescue Me theme

So, as I said in my previous post about my Sassy Nautical Theme, I’m trying to push myself to get into general public themes instead of themes that are designed or tweaked for just one customer. I find the process to be a good “workout” for both my design skills and for my coding skills. There is a different process you have to go through to design something that potentially everyone can use. After chatting this weekend at WordCamp San Francisco with other theme designers, I realized that people will use your theme in ways that you never intended. The question: “How to design for the user who is going to use your theme in ways you didn’t foresee,” has been banging around in my head for the last few days.

This shouldn’t be a shocking revelation to me since I’ve modified themes so they work differently or for a different clientele than it was designed for. I think it’s just a great exercise in trying to not pigeonhole your design process to only fit one situation. You need to design for your theme to be as flexible as possible so it can fit needs that you don’t even know to be addressed.

The Goal

This brings me to the newest theme that I’m working on. Since my last theme that I did was blog-centered, I wanted this site to use WordPress as more of a CMS instead of just a blogging platform. My last theme was to help me learn to use Underscores and Sass, so my goal with this theme to push me to learn grids, better use of categories, and coding for multiple header/color palette options. Like I said, I’ve mostly designed custom sites, so this will fill in the holes in my education.

The Plan

The Back Story

I love my dog, Professor Snugglesworth, and we have thought about getting another dog so he has a playmate. So, I’ve spent more time lately looking at rescue organizations and breeder pages online and I have to admit that they aren’t all that great. Most of these organizations have no money, so they can’t afford great sites. I recognize there is a need for a solid free well-designed theme for rescue organizations out there, so I decided to make it my new project. I want these organizations to spend their money on the animals, not their website.

The Customer

So, the volunteers that run these organizations aren’t always tech savvy, so I need to make the theme function easy to understand. These organizations need a site that displays images of their animals quickly, as well as basic information about gender, breed, age, etc. There also needs to be a way to display additional information about the dog if people want to learn more about them. It seems that most organizations use Petfinder to list their animals but also must have their own website where you can fill out an application.

Colors

Here is my current concept that I’m working from. I wanted to play with illustration a bit since I haven’t needed to in a while so I drew out some cute dogs, brought them into Illustrator, outlined and colored them. I also want to do a cat version in blue. I want to try to have the theme all in white, gray, and black with one color accent. In the case of the dogs version, it will be green and in the case of the cat version it will be blue. I want to see if I can code it in such a way that the user can pick the accent color and then change out the header image to being whatever they want.

Layout Functionality

Functionality of the gird system

Functionality of the gird system

After lots of thought, I’ve decided that the grid page that shows the animals available for adoption should be the post thumbnail featured images of the posts. The question is how to pull the posts. The most obvious answer is to use custom post types, but I’m not a fan of them because it breaks the site if someone wants to change themes later.

So my current solution is that the homepage only displays posts that are in the category “homepage” so that the website can still have a normal blog that just shows all the posts minus this one category. This causes a little potential confusion if the user wants to not show the animals on its homepage but I figure that if you are looking for animals to adopt, they should be front and center on the homepage.

I also put a “adopt now” button at the top that can link to their application process page since I find that sites are really bad about burying that page in their site. Also, I added a search bar at top so people can quickly find the animal that they are look for.

Problems

The problems I foresee in this project is setting up a good responsive grid system. I’ve been picking people’s brains to see what they use and there is no consensus at the moment. Bootstrap was popular as was making up your own system. I’ve looked into Blueprint for Compass, but there isn’t good documentation of how to make it work.

Anyhoo… This is my current project. If you have any ideas, I would love for you to let me know. I’ll keep you updated on my progress.

 

 

Sassy Nautical Theme

I’ve just finished my first theme to submit to the WordPress Free Themes repository. I’m pretty excited. I’ve been volunteering reviewing themes on the Theme Review team and I’ve gained some insight into the process, so I thought that I would make a theme to submit too.

nautical_thumbThe Back Story

I’ve only worked on custom themes for individual clients or companies, so I’ve never needed to make a theme for the general audience before. It definitely presents different challenges, so I wanted to workout my design skills by creating one. I also used this theme as my guinea pig for learning Sass. Sass is something that I’ve known about for a while and understood the basic concepts of, but I’ve just kept putting off learning it because of time. It’s that dilemma of making the time to learn something that will save you time in the future. I also want to learn to use Underscores by Automattic as a starter theme, so this would give me the opportunity to do so. Since I was learning two new things, I decided to keep the design minimal and straightforward. Honestly, designing minimally is harder than any other style of design.

The Process

I’ve developed a design process over the years based on working with clients, so I just approached this design in the same way. Since design is first and foremost about the end-user (what they want, how they think and interact with your product, etc) and I didn’t have an end-user in this case, I just made one up.

The “Client”

I decided to imagine a sailing enthusiast (since I just took sailing lessons) who wants to document their sailing adventures. When sailing, you don’t have lots of time to take pictures because you are trying frantically to not die (or perhaps that’s just my experience) but when you do that pictures are awesome. The images are usually landscapes of the water with the lots of wasted space of sky and water above and below the action. So I knew that I needed to design something that will be a blog of their adventures with mostly text and maybe just one or two awesome pictures.

The Layout

So, the design needs to be a blog format. I wouldn’t think sailors would be long-winded in their blog post, so I wanted to design something that would have one large featured image and probably not a long text area. Video would probably be out because the ocean is too choppy for video, so I didn’t focus on different posts formats. Since most of the images they would take would have lots of wasted space on the top and bottom, I decided to make one large featured image that was really wide but not very tall.

The Design Elements

Most nautical or beach stuff skews cheesy pretty quickly if you use traditional navy/white, aqua/sand, and seashells. I wanted to use something that would speak to nautical/ocean/beach but be a little more sophisticated and less traditional in its color palette. It’s hard to get more nautical than navy, so I used that as homage but then I paired it with a peachy coral to give it a little modern pop. It’s not a common coral color but it still invokes that beach idea.

Designing for Everyone

I figure that when I make this customizable where the user can pick their own color palette and replace the anchor image that this theme could apply to basically anything. Imagine this as a baby theme with a pacifier and pastels, or a wedding theme with rings and a their reception colors, it’s really versatile.  I’m holding off adding this ability for users to change the theme in the customizr because of my experience on the Theme Team. I’ve seen several themes work almost 100% only to be rejected because of one small additional thing that they added that doesn’t work immediately. Once the theme is rejected, they end up at the bottom of the list and have to wait another three months to get their small fix approved. Better to start out with as little in the theme as possible and then add functionality later as an update. If your additional functionality is messed up, people can still use your theme in the meantime while you are on the waiting list.

Anyhoo, below is a full screen shot of the theme if you want to take a look. I would love to hear any feedback you may have.

nautical_home

Learn.WordPress.org

I had a great time at WordPress San Francisco this weekend! This was my first SF WordCamp and I have to admit it was quite a different experience than other WordCamps I’ve been to. There was a lot more networking, parties, and people than I’m used to at other WordCamps.  The after party at Automattic’s new office was so much fun. So, obviously, I’m exhausted.

What is Learn.WordPress.org?

I got a chance to help out with a new project the foundation is starting at the Contributor Day. WordPress will be launching learn.wordpress.org, a site that will offer training videos and practical exercises for people wanting to learn WordPress. I had a great time coming up with the outline for the section on Responsive Web Design with Natalie McLees, the Founder and Principal at Purple Pen Productions, and Trent Lapinski, the founder and CEO of CyberChimps Inc. We even got to be interviewed on camera for training videos that will be displayed on the website. I’ve never worked on a project like this before and it was a blast.

I think that this project is a great idea because there isn’t one centralized place to learn WordPress that I’ve found. Personally, I learned it piecemeal from different tutorials on various websites and browsing the Codex. If it turns out like it seems like it will, this will be a perfect resource for everyone using WordPress. So, fingers crossed. I’ll keep you updated with the progress on the Responsive Design section as we work on it.

Comments or Not to Comments

Comment

That is the question, isn’t it?

I friend of mine, who works at a local co-op, just got put in charge of her company’s WordPress blog. She lamented to me her woes of the daily onslaught of comment spam that she has to wade through every morning. “How do I get rid of all of this spam?” she asked.

Before I offered spam solutions (which help but can never truly eliminate all spam bots out there) I asked her a question she had never thought of before, “Do you really need comments on your site?” She seemed stumped because of course all blogs have comments and since her site was a blog, she should have comments too.

Comments are a great way of getting feedback directly from your readers and clients. You post => they answer… or that’s how it’s supposed to work. In reality, I find it goes more like, You post =>black endless void.

People just have better things to do with their time than to responding to articles. They will only spend the time to comment if they are really committed to what they are saying… which is normally only because they are super emotional about what you said… which is usually anger. Or they want to disagree with you. Or they want to only hear the sound of their own voice. If you want to see an example of this, go to any online news source (Fox or CNN) and see their comments. Ouch.

So where does that leave us?

This means, you will have spam and negative comments on your post which will lead your audience to wonder: They must not know what they are talking about. Look at all the bad things people say about them! But, you say, I know my audience loves me! They would never say anything mean to me.

Yeah, but will they say anything at all to you? How does a huge blog full of posts that have “0 Comments” at the end of each one look? Now, instead of being an non-authoritative voice, you are now an irrelevant voice instead. Not much better.

The Sad Reality

The Sad Reality

My recommendation?

Only allow comments on your site if you know, for a fact, that people are going to actually ask relevant questions or leave interesting comments. You take away your authority if your post is followed by mean or no comments.

Carousels: Worth it?

carousel
Should I Use a Carousel? Probably Not.

Should I Use a Carousel? Probably Not.

So Derek sent me a link to this amusing site: Should I Use a Carousel?

The site is a simple and hilarious example of why I feel the trend of the carousel is dying. For a while there, EVERY new website had to have a carousel, and I have to admit I jumped on the train because every client wanted one but I’m starting to feel like everyone is getting tired of them.

I’ve personally decided that sidebar ads have ruined all moving graphics being effective. We’ve subconsciously started to associate any moving object on a website with advertisement and therefore don’t really bother with looking at it.

So, what can we do to address the major problems with carousels?

Great example of a standard carousel  by Eelco Guntlisbergen.

Great example of a standard carousel by Eelco Guntlisbergen.

Problem #1: They rotate too fast. If it moves too quickly, people will think it’s an ad and then skip it. Also, if you have text that they need to read, then you have to give them time to actually read it.

Solution: The rule of thumb that I learned working in television is that you should be able to read through the copy twice completely before you take it off the screen. This is because you already know what it says, so you read it quicker than your audience and it allows slow readers (and non-native speakers) to have time to properly read it.

Problem #2: People aren’t going to sit there and watch all your rotating slides. If you are honest with yourself, do YOU spend time watching all the slides rotating through on carousels on your favorite sites? That’s what I thought.

Solution: Limit the amount of slides. I would say only have three slides at a time and have the first one be full of the most important information. Also, it’s important to have some sort of an indicator of how many slides there are in the carousel so your audience knows that they won’t be waiting around for forever to read everything.

Problem #3: Since people don’t wait for slides to rotate, they miss your message. The number one reason someone is coming to your site is for information. If the information is ONLY in the carousel, that means you aren’t giving your customer what they are looking for.

Solution: Place all information in the carousel somewhere else on the site. Seems repetitive, I know, but if you are using a carousel you need to have the information somewhere else on the site. What if the carousel is broken or doesn’t work on some mobile devices? How are your customers getting their information?

So, when should you use a carousel?

Fun use of a carousel with illustration instead of photographs  by Pavel Maček

Fun use of a carousel with illustration instead of photographs
by Pavel Maček

Well, after reading everything above, the major problems with carousels is that they aren’t all that great at presenting written information. That doesn’t mean to say that carousels are useless and should be banned from the internet! Carousels are still great for photographs and therefore are great at establishing a mood. I think that they would still work for photographers, restaurants showing of pics of their food, and other instances where photography is key.

Just remember, carousels are limited by their nature so if you could say what you wanted in one static image instead of several rotating ones, that’s probably the way to go.

My WordPress Meetup Presentation

I had a great time this week giving my presentation at my local San Diego WordPress Meetup. It was a great turn out and people had wonderful questions. One thing that did come up was Genericons as a Font Squirrel dingbat font alternative, so I’m adding the link here for those interested in checking that out since it wasn’t part of my slides. Thanks again if you were able to make it out.

Below are the slides if you want to check them out. You can also download them directly off my speakerdeck account if you want.