August, 2014 | Webmasters Gallery

Desktop Wallpaper Calendars: September 2014

August 31st, 2014 admin No comments

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for six years now¹, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for September 2014. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

All images can be clicked on and lead to the preview of the wallpaper,
You can feature your work in our magazine² by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Hungry

⁴

preview⁵
with calendar: 640×480⁶, 800×480⁷, 800×600⁸, 1024×768⁹, 1024×1024¹⁰, 1152×864¹¹, 1280×720¹², 1280×800¹³, 1280×960¹⁴, 1280×1024¹⁵, 1440×1050¹⁶, 1440×900¹⁷, 1600×1200¹⁸, 1680×1050¹⁹, 1680×1200²⁰, 1920×1080²¹, 1920×1200²², 1920×1440²³, 2560×1440²⁴, 1366×768²⁵
without calendar: 640×480²⁶, 800×480²⁷, 800×600²⁸, 1024×768²⁹, 1024×1024³⁰, 1152×864³¹, 1280×720³², 1280×800³³, 1280×960³⁴, 1280×1024³⁵, 1440×1050³⁶, 1440×900³⁷, 1600×1200³⁸, 1680×1050³⁹, 1680×1200⁴⁰, 1920×1080⁴¹, 1920×1200⁴², 1920×1440⁴³, 2560×1440⁴⁴, 1366×768⁴⁵

Understanding

“I thought about how sometimes we have a predisposition towards something instead of trying to understand it.” — Designed by Maria Keller⁴⁶ from Mexico.

⁴⁷

preview⁴⁸
with calendar: 320×480⁴⁹, 640×480⁵⁰, 800×480⁵¹, 800×600⁵², 1024×768⁵³, 1024×1024⁵⁴, 1152×864⁵⁵, 1280×800⁵⁶, 1280×960⁵⁷, 1280×1024⁵⁸, 1400×1050⁵⁹, 1440×900⁶⁰, 1600×1200⁶¹, 1680×1050⁶², 1680×1200⁶³, 1920×1080⁶⁴, 1920×1200⁶⁵, 1920×1440⁶⁶, 2560×1440⁶⁷
without calendar: 320×480⁶⁸, 640×480⁶⁹, 800×480⁷⁰, 800×600⁷¹, 1024×768⁷², 1024×1024⁷³, 1152×864⁷⁴, 1280×720⁷⁵, 1280×800⁷⁶, 1280×960⁷⁷, 1280×1024⁷⁸, 1400×1050⁷⁹, 1440×900⁸⁰, 1600×1200⁸¹, 1680×1050⁸², 1680×1200⁸³, 1920×1080⁸⁴, 1920×1200⁸⁵, 1920×1440⁸⁶, 2560×1440⁸⁷

Shades Of Summer

“You can never have too many sunglasses” — Designed by Marina Eyl⁸⁸ from Pennsylvania, USA.

⁸⁹

preview⁹⁰
with calendar: 1024×768⁹¹, 1280×1024⁹², 1680×1050⁹³, 1680×1200⁹⁴, 1920×1080⁹⁵
without calendar: 1024×768⁹⁶, 1280×1024⁹⁷, 1680×1050⁹⁸, 1680×1200⁹⁹, 1920×1080¹⁰⁰

Summer Is Still Here!

“Even if most of people is coming back to school or work after summer holidays, it’s still summer, let’s enojy it!” — Designed by Valentina¹⁰¹ from Italy.

¹⁰²

preview¹⁰³
with calendar: 1280×720¹⁰⁴, 1280×800¹⁰⁵, 1280×1024¹⁰⁶, 1920×1080¹⁰⁷, 2560×1440¹⁰⁸
without calendar: 1280×720¹⁰⁹, 1280×800¹¹⁰, 1280×1024¹¹¹, 1920×1080¹¹², 2560×1440¹¹³

Pawns And Kings

¹¹⁵

preview¹¹⁶
with calendar: 320×480¹¹⁷, 640×480¹¹⁸, 800×480¹¹⁹, 800×600¹²⁰, 1024×768¹²¹, 1024×1024¹²², 1152×864¹²³, 1280×720¹²⁴, 1280×800¹²⁵, 1280×960¹²⁶, 1280×1024¹²⁷, 1400×1050¹²⁸, 1440×900¹²⁹, 1600×1200¹³⁰, 1680×1050¹³¹, 1680×1200¹³², 1920×1080¹³³, 1920×1200¹³⁴, 1920×1440¹³⁵, 2560×1440¹³⁶
without calendar: 320×480¹³⁷, 640×480¹³⁸, 800×480¹³⁹, 800×600¹⁴⁰, 1024×768¹⁴¹, 1024×1024¹⁴², 1152×864¹⁴³, 1280×720¹⁴⁴, 1280×800¹⁴⁵, 1280×960¹⁴⁶, 1280×1024¹⁴⁷, 1400×1050¹⁴⁸, 1440×900¹⁴⁹, 1600×1200¹⁵⁰, 1680×1050¹⁵¹, 1680×1200¹⁵², 1920×1080¹⁵³, 1920×1200¹⁵⁴, 1920×1440¹⁵⁵, 2560×1440¹⁵⁶

Dream It

“September for many is the month when school begins so it’s important to be positive and have an optimistic spirit about the goals one has for the upcoming year.” — Designed by Teodor Dovichinski¹⁵⁷ from Macedonia.

¹⁵⁸

preview¹⁵⁹
with calendar: 640×480¹⁶⁰, 800×480¹⁶¹, 800×600¹⁶², 1024×768¹⁶³, 1024×1024¹⁶⁴, 1152×864¹⁶⁵, 1280×720¹⁶⁶, 1280×800¹⁶⁷, 1280×960¹⁶⁸, 1280×1024¹⁶⁹, 1400×1050¹⁷⁰, 1440×900¹⁷¹, 1600×1200¹⁷², 1680×1050¹⁷³, 1680×1200¹⁷⁴, 1920×1080¹⁷⁵, 1920×1200¹⁷⁶, 1920×1440¹⁷⁷, 2560×1440¹⁷⁸, 1366×768¹⁷⁹
without calendar: 640×480¹⁸⁰, 800×480¹⁸¹, 800×600¹⁸², 1024×768¹⁸³, 1024×1024¹⁸⁴, 1152×864¹⁸⁵, 1280×720¹⁸⁶, 1280×800¹⁸⁷, 1280×960¹⁸⁸, 1280×1024¹⁸⁹, 1400×1050¹⁹⁰, 1440×900¹⁹¹, 1600×1200¹⁹², 1680×1050¹⁹³, 1680×1200¹⁹⁴, 1920×1080¹⁹⁵, 1920×1200¹⁹⁶, 1920×1440¹⁹⁷, 2560×1440¹⁹⁸, 1366×768¹⁹⁹

Be The Wind Of Change

“Be the wind of change. Nature inspired us in creating this wallpaper as well as the Scorpion’s song “Wind of change” we dedicate to all creatives worldwide :)” — Designed by Design19²⁰⁰ from Romania.

²⁰¹

preview²⁰²
with calendar: 320×480²⁰³, 640×480²⁰⁴, 800×480²⁰⁵, 800×600²⁰⁶, 1024×768²⁰⁷, 1024×1024²⁰⁸, 1152×864²⁰⁹, 1280×720²¹⁰, 1280×800²¹¹, 1280×960²¹², 1280×1024²¹³, 1400×1050²¹⁴, 1440×900²¹⁵, 1600×1200²¹⁶, 1680×1050²¹⁷, 1680×1200²¹⁸, 1920×1080²¹⁹, 1920×1200²²⁰, 1920×1440²²¹, 2560×1440²²², 3360×1050²²³, 3360×1200²²⁴, 3840×1080²²⁵, 3840×1200²²⁶, 3840×1440²²⁷, 5120×1440²²⁸
without calendar: 320×480²²⁹, 640×480²³⁰, 800×480²³¹, 800×600²³², 1024×768²³³, 1024×1024²³⁴, 1152×864²³⁵, 1280×720²³⁶, 1280×800²³⁷, 1280×960²³⁸, 1280×1024²³⁹, 1400×1050²⁴⁰, 1440×900²⁴¹, 1600×1200²⁴², 1680×1050²⁴³, 1680×1200²⁴⁴, 1920×1080²⁴⁵, 1920×1200²⁴⁶, 1920×1440²⁴⁷, 2560×1440²⁴⁸, 3360×1050²⁴⁹, 3360×1200²⁵⁰, 3840×1080²⁵¹, 3840×1200²⁵², 3840×1440²⁵³, 5120×1440²⁵⁴

Elephant In The Room

“I was inspired by Elephant Appreciation Day, which everyone knows is September 22nd.” — Designed by Rosemary Ivosevich²⁵⁵ from Philadelphia, PA.

²⁵⁶

preview²⁵⁷
with calendar: 640×480²⁵⁸, 800×480²⁵⁹, 800×600²⁶⁰, 1024×768²⁶¹, 1024×1024²⁶², 1152×864²⁶³, 1280×720²⁶⁴, 1280×800²⁶⁵, 1280×960²⁶⁶, 1280×1024²⁶⁷, 1400×1050²⁶⁸, 1440×900²⁶⁹, 1600×1200²⁷⁰, 1680×1050²⁷¹, 1680×1200²⁷², 1920×1080²⁷³, 1920×1200²⁷⁴, 1920×1440²⁷⁵, 2560×1440²⁷⁶
without calendar: 640×480²⁷⁷, 800×480²⁷⁸, 800×600²⁷⁹, 1024×768²⁸⁰, 1024×1024²⁸¹, 1152×864²⁸², 1280×720²⁸³, 1280×800²⁸⁴, 1280×960²⁸⁵, 1280×1024²⁸⁶, 1400×1050²⁸⁷, 1440×900²⁸⁸, 1600×1200²⁸⁹, 1680×1050²⁹⁰, 1680×1200²⁹¹, 1920×1080²⁹², 1920×1200²⁹³, 1920×1440²⁹⁴, 2560×1440²⁹⁵

California Sundown

“September means a lot of things. If you are into marketing, it is a big month. Not only for back-to-school sales but also for planning ahead for Christmas. Of course this brings both developers, designers and copywriters into the grind. With all this work piling up on top of us we try to keep our cool and relax whenever we can. After all, taking appropriate breaks is very important for productivity. This calming photo was snapped during my trip from San Francisco to Los Angeles back in 2013. It was a hellish week, full of meetings and travel, sometimes 28 hours at a time. But being able to stop, take a breath of fresh air and appreciate the beauty that is around us kept me and my co-founders healthy, happy and sane. I hope it will do the same for you.” — Designed by Dmitri Tcherbadji²⁹⁶ from Canada.

²⁹⁷

preview²⁹⁸
with calendar: 320×480²⁹⁹, 640×480³⁰⁰, 800×480³⁰¹, 800×600³⁰², 1024×768³⁰³, 1024×1024³⁰⁴, 1152×864³⁰⁵, 1280×700³⁰⁶, 1280×800³⁰⁷, 1280×960³⁰⁸, 1280×1024³⁰⁹, 1400×1050³¹⁰, 1440×900³¹¹, 1600×1200³¹², 1680×1050³¹³, 1680×1200³¹⁴, 1920×1080³¹⁵, 1920×1200³¹⁶, 1920×1440³¹⁷, 2560×1440³¹⁸, 2880×1800³¹⁹, 1366×768³²⁰
without calendar: 320×480³²¹, 640×480³²², 800×480³²³, 800×600³²⁴, 1024×768³²⁵, 1024×1024³²⁶, 1152×864³²⁷, 1280×700³²⁸, 1280×800³²⁹, 1280×960³³⁰, 1280×1024³³¹, 1400×1050³³², 1440×900³³³, 1600×1200³³⁴, 1680×1050³³⁵, 1680×1200³³⁶, 1920×1080³³⁷, 1920×1200³³⁸, 1920×1440³³⁹, 2560×1440³⁴⁰, 2880×1800³⁴¹, 1366×768³⁴²

Green Grass Of The Vosges

“The Vosges are mountains in the east of France. In september it’s still possible to enjoy the green grass of the grazing land, more often at the top of the moutains. Summer is not closed, yet!” — Designed by Philippe Brouard³⁴³ from France.

³⁴⁴

preview³⁴⁵
with calendar: 320×480³⁴⁶, 800×480³⁴⁷, 1024×768³⁴⁸, 1024×1024³⁴⁹, 1280×720³⁵⁰, 1280×1024³⁵¹, 1440×900³⁵², 1920×1080³⁵³, 1920×1200³⁵⁴, 1920×1440³⁵⁵, 2560×1440³⁵⁶
without calendar: 320×480³⁵⁷, 800×480³⁵⁸, 1024×768³⁵⁹, 1024×1024³⁶⁰, 1280×720³⁶¹, 1280×1024³⁶², 1440×900³⁶³, 1920×1080³⁶⁴, 1920×1200³⁶⁵, 1920×1440³⁶⁶, 2560×1440³⁶⁷

Autumn Ripples

“No matter where in the world you are, this calendar will bring some autumn cheer to your device backgrounds!” — Designed by Rachel Litzinger³⁶⁸ from Chiang Rai, Thailand.

³⁶⁹

preview³⁷⁰
with calendar: 1280×800³⁷¹, 1280×960³⁷², 1440×900³⁷³, 1680×1200³⁷⁴, 1920×1200³⁷⁵, 2560×1440³⁷⁶, 640×960³⁷⁷, 640×1136³⁷⁸, 1600×900³⁷⁹, 2048×2048³⁸⁰
without calendar: 1280×800³⁸¹, 1280×960³⁸², 1440×900³⁸³, 1680×1200³⁸⁴, 1920×1200³⁸⁵, 2560×1440³⁸⁶, 640×960³⁸⁷, 640×1136³⁸⁸, 1600×900³⁸⁹, 2048×2048³⁹⁰

Good Bye My Dear Hot Friend

“September is a month to start over again and say good bye to the summer and vacations. That’s why we want to say good bye to the sun who will travel from north to south this time of the year.” — Designed by Colorsfera³⁹¹ from Spain.

³⁹²

preview³⁹³
with calendar: 320×480³⁹⁴, 640×480³⁹⁵, 800×480³⁹⁶, 800×600³⁹⁷, 1024×768³⁹⁸, 1024×1024³⁹⁹, 1152×864⁴⁰⁰, 1280×720⁴⁰¹, 1280×800⁴⁰², 1280×960⁴⁰³, 1280×1024⁴⁰⁴, 1400×1050⁴⁰⁵, 1440×900⁴⁰⁶, 1600×1200⁴⁰⁷, 1680×1050⁴⁰⁸, 1680×1200⁴⁰⁹, 1920×1080⁴¹⁰, 1920×1200⁴¹¹, 1920×1440⁴¹², 2560×1440⁴¹³, 1260×1440⁴¹⁴
without calendar: 320×480⁴¹⁵, 640×480⁴¹⁶, 800×480⁴¹⁷, 800×600⁴¹⁸, 1024×768⁴¹⁹, 1024×1024⁴²⁰, 1152×864⁴²¹, 1280×720⁴²², 1280×800⁴²³, 1280×960⁴²⁴, 1280×1024⁴²⁵, 1400×1050⁴²⁶, 1440×900⁴²⁷, 1600×1200⁴²⁸, 1680×1050⁴²⁹, 1680×1200⁴³⁰, 1920×1080⁴³¹, 1920×1200⁴³², 1920×1440⁴³³, 2560×1440⁴³⁴, 1260×1440⁴³⁵

Sugar Cube

⁴³⁷

preview⁴³⁸
with calendar: 800×600⁴³⁹, 1024×768⁴⁴⁰, 1152×864⁴⁴¹, 1280×720⁴⁴², 1280×800⁴⁴³, 1280×960⁴⁴⁴, 1280×1024⁴⁴⁵, 1440×900⁴⁴⁶, 1920×1080⁴⁴⁷, 1920×1200⁴⁴⁸, 2560×1440⁴⁴⁹
without calendar: 800×600⁴⁵⁰, 1024×768⁴⁵¹, 1152×864⁴⁵², 1280×720⁴⁵³, 1280×800⁴⁵⁴, 1280×960⁴⁵⁵, 1280×1024⁴⁵⁶, 1440×900⁴⁵⁷, 1920×1080⁴⁵⁸, 1920×1200⁴⁵⁹, 2560×1440⁴⁶⁰

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month⁴⁶¹!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

(il)

Footnotes

The post Desktop Wallpaper Calendars: September 2014 appeared first on Smashing Magazine.

Categories: Others Tags:

Designing Badges (And More) For A Conference

August 29th, 2014 admin No comments

Notebook cover for the first edition of Kerning

To badge or not to badge? That is the question. Because badges — and a lot of stuff designed for conferences — often look the same. But if you have a little, different conference, you need different kinds of things. Badges included.

It all started in 2013 with the first Kerning conference¹. I was asked to design the official notebook: we ended up with a really typographic design for the cover and a funny pattern on the back. And an Easter egg on the cover — more on that later. It was a really funny project, so when my dear friend Cristiano Rastelli², a member of Kerning’s organizing committee, asked me to design the notebook and some printed materials for Kerning 2014 I immediately said “Yes, let’s start!”

Kerning’s Calling

I’m really passionate about letterpress, so there was no doubt about the notebook: letterpress printing again. But what about the cover? After the first really typographical design in 2013, I wanted to make some changes. I love to draw with pencil on paper and I love caricatures, too. I had drawn a lot of them over the past few years, so with all the photos of the speakers on Kerning’s website I decided to go that way: the cover would be full of caricatures.

Notebook cover for the first edition of Kerning. (View large version⁴)

I had to decide how to draw them. When you use letterpress printing, costs can rise very quickly if you use a lot of colors. Each color is printed separately, so you have to take into account the budget from the very first second. As we had in 2013, we decided to use only the two official colors of the conference: black and red (Pantone 7417, to be precise). This was an important element because I also had to design other printed stuff too: badges for speakers, organizers, attendees and workshops. Oh, and some postcards too. This stuff had to be printed in digital offset, so we could use a lot of colors if we wanted; but since we had already set the boundaries with letterpress, both for style and colors, we decided to go the same way.

The Idea Behind The Notebook And Badges

Caricatures and two colors: that was OK, but how to match the design of the notebook and the badges? They had to be part of the same project and convey the same mood. The idea came from the back cover of the notebook: I had decided to use the same pattern from 2013, to establish some continuity. Looking at the pattern, I realized that it reminded me of playing cards. Not the face side obviously, but the back.

So why not design the badges like playing cards? I had to design several different kinds of badges: those for workshops (leaders and attendees) plus those for the conference day: speakers, organizers, and attendees. And a badge for the conference host, too. With an idea for the design, I then needed to undertake some research about playing cards.

⁵

The pattern on the back cover reminds me of playing cards. (View large version⁶)

The Importance Of Research

I did some research online, reading and viewing some really interesting websites about playing cards. Some playing cards have great drawings and are really complex, too. There are a lot of different styles, but what I needed was a more simple approach, suitable for both digital offset and letterpress. I identified the cards I had to design: kings for male speakers, queens for female speakers, a joker for the host, the ace of spades for organizers, as well as five and six for attendees and workshop presenters (in fact, the conference took place on June 5–6, 2014).

aricatures at work on speakers' badges — Caricatures at work on speakers’ badges. (View large version⁸)

The kings, queens and the joker would be simpler than the usual version we’re used to seeing on playing cards, but since I really love details — even the smallest ones — I found the right card for these small, crazy things: the ace of spades. Aces of spades are always full of details, beautifully designed and so it had to be the one for Kerning. But a typographical ace of spades, since the conference is about typography.

Organizers' badge: typographical Ace of Spades — Organizers’ badge: typographical ace of spades. (View large version¹⁰)

Even though my research didn’t result in a striking new idea, it gave me a foundation. Often I find that research can either confirm the idea I already have or make me change it totally. Research helps me to find a good approach. Even if I design a completely new thing, my decision is based on what I’ve just seen. It’s not just a matter of style or taste or something like that: with research and analysis I have something strong to base my project on.

Research for illustrations of caricatures is very important, because the more pictures you collect the more details you can draw. There were some pictures of the speakers on Kerning’s website, but I looked online for more references. After having collected some more photos, I was ready to start.

The Process

I always start with pencil on paper. Logos, illustrations, graphic projects, it doesn’t matter — pencil and paper give me a lot of freedom. If you start drawing in Illustrator or other software, you are bound by the limits and style of that software. And when you start sketching the basic concepts, you have to be free to experiment.

There’s no way to be influenced by some marvellous feature or effect: black on white only. Freedom is fine, but I always take into account the boundaries of the project: in this case, just two colors and a really flat mood because of letterpress. Drawing some sketches and then developing a quite finished design only using pencil allowed me to concentrate on the most important things.

The caricature of Ellen Lupton: pencil on paper. (View large version¹²)

That said, I really love colors too, even if I’m not so good at painting with water colors or in oils. I really love flat design, so I like to draw with Illustrator. And Illustrator is the software I usually use for tracing drawings. So once my illustrations with pencil on paper are complete, I scan them to start the tracing job. I decided to draw only the caricatures by hand, making all the other graphic elements directly in Illustrator. There was an official font to use — Pluto Sans¹³ by HvD Fonts¹⁴ — and other things were really basic, so no need to draw them with pencil.

Sketching is a Game of Trial and Error

These first caricatures were really simple in style. I had tried to be as simple as possible to have something that was fine for letterpress. The eyes were just small dots and other elements were really simple. Unfortunately, I didn’t like the final result. I couldn’t — and didn’t want to — draw realistic caricatures, but what I had drawn was just too basic. I scanned the drawings and I tried to trace one or two of them, just to understand if I could make some changes directly in Illustrator: no way.

Since tracing your drawings in Illustrator is quite a time-consuming job, I decided to start again from scratch with pencil and paper. There was not much time left before having to print everything, but I decided to start again anyway, since this was the best option to achieve exactly the final result I had in mind.

Caricatures, first pencil version: they were too much basic… — Caricatures, first pencil version: they were much too basic… (View large version¹⁶)

These caricatures lacked the right level of details, useful to play with when you are then drawing the digital version — These caricatures lacked the right level of detail, useful to play with when you are then drawing the digital version. (View large version¹⁸)

The second attempt was better: more detailed caricatures — not naturalistic, but something that was good for both letterpress and digital offset printing. I scanned all the caricatures again, and started tracing them in Illustrator with the pen tool. As you know, I really like pencil, so I really like using a graphics tablet and pen too. In fact, I use them every time I can, because it speeds up the process. I’m so used to it that sometimes I catch myself using a tablet with a word processor. I know, I know…

The final, more detailed caricature of Francesco Franchi with some tests for alternative mouths. (View large version²⁰)

Tracing Sketches with Adobe Illustrator

I usually use a very bright hue, like magenta or cyan, to be sure I can clearly see the lines against the black and white of the pencil drawings. I usually decide which weights I want to use for lines, especially if I draw illustrations with a few colors or only strokes with no fill. If I have a simple design style — a few colors, no complex shapes — I try to be as clean as I can. I think that “To complicate is easy. To simplify is difficult” by Bruno Munari is always good advice.

Tracing caricatures in Illustrator: same line weights for same elements (nose was 0,75 pt) — Tracing caricatures in Illustrator: same line weights for same elements (nose was 0.75 pt). (View large version²²)

For these caricatures I went with these weights: 1pt for contour and very important lines, 0.25pt for subtle details and 0.75pt for everything in between. If you decide on line weight before you start working it’s easier to maintain a consistent mood in all your drawings. Establishing line hierarchy also helps with establishing hierarchy between elements. If something is important, give it some weight. If it’s less important, make it thinner.

Different weights helps establishing a hierarchy between elements — Different weights help establish a hierarchy between elements. (View large version²⁴)

Tracing is a matter of time and patience. Graphics tablets can help you a lot, but I usually spend a lot of time tracing my drawings with as few control points as I can. Lines are smoother and if you are working on complex illustrations, the fewer control points you have, the better the result will be. And — last but not least — fewer control points are great if you have to change a shape: think about having to change ten control points instead of four if you want to change just one hair!

Drawing lines with a few point is always fine: smooth results and less work if you want to change something — Drawing lines with a few points is always fine: smooth results and less work if you want to change something. (View large version²⁶)

Let’s Finish the Design!

With all the caricatures traced, it was time to add the other elements: letters (K, Q and the star for the joker), the Kerning logo, and the person’s name and Twitter handle inside a ribbon. Not such a complex job, but there were badges for attendees, presenters, and organizers, too. I had just used hearts for speakers, so I decided to go with clubs and diamonds for workshops and conference. And for the organizers, the ace of spades.

Meaningful names for levels are always helpful, but they are fundamental for complex illustrations. Unless you want to go crazy trying to find something between tens of layers — Meaningful names for levels are always helpful, but they are fundamental for complex illustrations. Unless you want to go crazy trying to find something between dozens of layers…(View large version²⁸)

Workshop and conference day cards were not so difficult: five of clubs was the badge for workshops — both for presenters and attendees — while six of diamonds was for the conference day, since they took place respectively on June 5 and June 6. These cards were very simple, so I won’t cover them here. But aces of spades are usually really complex and full of details. Because Kerning is a conference about typography, letters were the right way to add some details to the card. Since these were the organizers’ badges, I used the same ribbon with names and Twitter handles that I had already used for speakers’ badges.

A typographical Ace of Spades for organizers' badge — A typographical ace of spades for the organizers’ badge. (View large version³⁰)

Once I had finished all the badges, I designed the postcards. These had the same layout as the badges but more space, so I decided to include a really short bio of the speakers. Last, but not least, Cristiano came up with a great idea: to design another type of postcard, displaying the official conference hashtag — #keming. We used two slab (red background), two serif (black background), and two sans serif fonts (white background); and two green cards with Comic Sans and Buttermilk (fonts respectively by Vincent Connare and Jessica Hische, both speakers at the conference), plus a calligraphic version by Luca Barcellona (workshop presenter).

The final digital version of Frank Chimero's postcard and some other badges — The final digital version of Frank Chimero’s postcard and some other badges. (View large version³²)

Let’s Go Print!

So, everything was fine, but I had to check some more things before printing the notebooks. If you use really soft paper with letterpress — and we used a 100% cotton paper for the cover — you have to carefully consider what happens to thin lines and smaller details when printed under high pressure.

Elliot Jay Stocks for letterpress (left, used for notebook) is a little bit different from Elliot Jay Stocks for digital offset (right, used for badges and postcards): different tricks for different technologies. (View large version³⁴)

The small dots inside the black area of the ace of spades, for instance, could disappear when printed, because of the pressure and the amount of ink all around them. So I made them a little bit bigger for the letterpress version. The same is true when thin lines are really close to one another: the risk is to lose details and have a kind of colored spot. So I simplified the hair a little bit for letterpress.

Kerning 2014 notebook: speakers and Ace of Spades on the cover — Kerning 2014 notebook: speakers and ace of spades on the cover. (View large version³⁶)

In general, when you use letterpress with cotton or soft paper and high pressure, take care of this aspect: small and fine details are OK, but lines might be slightly modified by pressure.

Final Thoughts (That Is, Always Have Fun!)

What more to say about this project? It started with a letterpress notebook in 2013, and developed into something more organic in 2014. It was a really great project I enjoyed a lot. And what about a complete deck of cards? I’ve been dreaming about designing a deck of cards since forever. Perhaps sooner or later I’ll design one. Who knows? With a lot of letters, obviously.

Talking about letters, the Easter egg in the first edition of the Kerning notebook was the small caps words that created a phrase. A sentence inside a sentence. And that’s all!

(ml, og, il, md)

Footnotes

The post Designing Badges (And More) For A Conference appeared first on Smashing Magazine.

Categories: Others Tags:

Beach to Business: 20 Free WordPress Themes – Edition Summer 2014

August 29th, 2014 admin No comments

Lament about it, but in the end you will find no other way than to face it. Summer is over. We all need to leave the beaches and get back to business. Fortunately some designers and developers have left the beach early to create some fresh and free WordPress themes to build upon. All we had to do was roam the web and find the new additions to the scene which we regularly do anyway. Thus we continue with our monthly series of the freshest WordPress themes for self-hosted sites. All the new additions are fully responsive, a trend that has been growing fast with no signs of slowing down. We hope you like what we found.

Categories: Others Tags:

Is Your Responsive Design Working? Google Analytics Will Tell You

August 28th, 2014 admin No comments

Responsive web design has become the dominant method of developing and designing websites. It makes it easier to think “mobile first” and to create a website that is viewable on mobile devices.

In the early days of responsive web design, creating breakpoints in CSS for particular screen sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, and then we tested and monitored those devices. As responsive design has evolved, we now more often start with the content and then set breakpoints when the content “breaks.” This means that you might end up with quite a few content-centric breakpoints and no particular devices or form factors on which to test your website.

However, we are just guessing that our designs will perform well with different device classes and form factors and across different interaction models. We need to continually monitor a design’s performance with real traffic.

Content-centric breakpoints are definitely the way to go, but they also mean that monitoring your website to identify when it breaks is more important. This information, when easily accessible, provides hints on what types of devices and form factors to test further.

Google Analytics has some great multi-device features¹ built in; however, with responsive design, we are really designing for form factors, not for devices. In this article, we’ll demonstrate how WURFL.js² and Google Analytics can work together to show performance metrics across form factors. No more guessing.

Why Form Factor?

Speeding up and optimizing the user experience for a particular device or family of devices is always easier. In reality, though, creating a device-specific experience³ for all types of devices is not feasible, given that the diversity of web-enabled devices will just continue to grow. However, every device has a particular form factor. Luke Wroblewski⁴, author of Mobile First⁵, outlines three categories to identify device experiences⁶:

usage or posture,
input method,
output or screen.

Because devices vary between these categories, we get different form factors. Hence, treating form factor as the primary dimension through which to monitor a responsive website makes sense. This will indicate which type of device to test for usability.

The examples in this article all use WURFL.js, including the form factors provided by it, which are:

desktop,
app,
tablet,
smartphone,
feature phone,
smart TV,
robot,
other non-mobile,
other mobile.

Feeding Data To Google Analytics

The first step is to put WURFL.js on the pages that you want to track. Simply paste this line of code into your markup:

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

This will create a global WURFL object that you can access through JavaScript:

console.log(WURFL.form_factor);

Now that the script tag is in place, the only other thing to do is add the highlighted lines of code to Google Analytics’ tracking code:

/* Google Analytics' standard tracking code */
_gaq.push(['_setAccount', 'UA-99999999-1']);
_gaq.push(['_setDomainName', example.com']);
_gaq.push(['_trackPageview']);

/* Tell Google Analytics to log WURFL.js' data */
 _gaq.push(['_setCustomVar',	1,'complete_device_name',WURFL.complete_device_name,1]);
 _gaq.push(['_setCustomVar',	2,'form_factor',WURFL.form_factor,1]);
 _gaq.push(['_setCustomVar',	3,'is_mobile',WURFL.is_mobile,1]);

/* The rest of Analytics' standard tracking code */
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Or, if you have updated to Google Analytics’ new “Universal Analytics⁷“, you would add this:

/* Google Analytics' new universal tracking code */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-99999999-1, 'auto');

/* Define the custom dimensions */
ga('send', 'pageview', {
  'dimension1': WURFL.complete_device_name,
  'dimension2': WURFL.form_factor,
  'dimension3': WURFL.is_mobile
});

Further, if you are using GA Universal Analytics, you must remember to define the custom dimensions. You do that by clicking Admin ? Custom Definitions ? Custom Dimensions.

⁸

For Universal Analytics you need to define the custom dimensions in the Admin section. (Large preview⁹)

Analyzing The Data In Google Analytics

Now that the data is in Google Analytics, we need to make it available for inspection. We can use custom variables in Analytics in a number of ways, the most obvious being to look in the menu on the left and click Audience ? Custom ? Custom Variables:

¹⁰

“Custom Variables” report. (Large version¹¹)

If you are are using Universal Analytics, you’ll have the custom dimensions available as any other dimension in all reports in GA:

GAUIcustomdim-preview-opt — Accessing custom dimensions. (Large preview¹³)

Already, we’re getting a pretty good picture of how form factors behave differently. The best metrics to focus on will obviously depend on your website, but in general, pay attention to bounce rate and pages per visit.

Big Picture With Dashboard Widgets

With dashboards¹⁴ in Google Analytics, we get a high-level overview of the most important metrics. This is a good place to monitor how your website performs across form factors. Once again, bounce rate and page impressions per visit are good metrics to start with. The purpose of the dashboard widgets is to alert you and to visualize how your website’s performance changes for certain form factors.

Let’s create a few widgets to display the status of different form factors. First, create a pie-chart widget that shows how much your website is being used by different form factors.

Widget displaying form factors. (Large version¹⁶)

In the Dashboard, click Add Widget, select Pie, then the Sessions metric, and group it by the form factor custom variable. Note that the label in the green drop-down list is Custom Variables, not the actual name. In our example, the form factor variable is in the second slot, but make sure to choose the right slot if you’ve implemented it in a different order. Again, if you have converted to Universal analytics, the procedure is similar, but in stead of selecting custom variables, you simply add the name of your custom dimension as you would with any other dimension.

Next, create a few widgets to display visits and bounce rates¹⁷ per form factor. The widgets will indicate whether changes to the website have had a positive or negative impact. Obviously, you want higher visits and a lower bounce rate.

Creating a “form factor” widget. (Larger version¹⁹)

Create this widget by adding a filter to the standard metrics. Choose a timeline diagram and filter the data with your custom variable where you have stored the form factor. Create one widget for each of the form factors that you want to monitor:

“Form factor” widgets in the dashboard. (Large version²¹)

You might find that some form factors disappear in the statistics for global bounce rates because the data set is now bigger (as in the example above). As indicated by the red arrows, something dramatic has happened with smartphones and feature phones. Specifically, some changes were made to the landing page to increase traffic from tablets, and the changes clearly had a negative impact on traffic from smartphones and feature phones. Identifying the reason for the drop in traffic requires more fine-grained Analytics reports, and the drop might not have been easy to spot without having monitored form factors.

Form Factor Segments

Any custom variable that you put into Google Analytics is, of course, available in most reports as filters or dimensions, so tweaking them to your needs is quite easy. Another way to keep form factors at the top of mind is to put them in segments²² by creating conditions. Here is one segment per form factor that you’ll want to track:

Configure a segment. If you’re using Universal Analytics, you must use your custom dimensions rather than the custom variables. (Large version²⁴)

The same, but in Universal Analytics:

GAcustomin2-preview-opt — (Large preview²⁶)

Google Analytics will show these segments in most of its standard reports as separate dimensions in charts and tables:

You can make “form factor” a dimension in most reports. As mentioned, bounce rate and general engagement are key metrics to follow, but goals and conversion rate are obviously interesting, too. You might find the need to create new goals or at least review your funnel for certain form factors.

After monitoring form factors for a while, you might conclude that you need to offer different user experiences for one or more form factors. Furthermore, you might need to tweak goals, funnels and advertising campaigns to account for differences in usage per form factor or device type.

We have used Google Analytics here, but WURFL.js is, of course, compatible with other analytics tools, as long as custom variables like the ones above are allowed.

Conclusion

In this article, we have looked at how performance per form factor is a key metric for monitoring a website and how WURFL.js and Google Analytics help to visualize this data. Once you put WURFL.js’ data into Analytics, it will be available in most standard reports as filters or dimensions, so tweaking the reports to your needs is quite straightforward. And the dashboard widgets will give you a high-level overview of their status. Also, bounce rate and page impressions per visit are key metrics, at least to start; so, defining form factors as segments will give you nice visualizations in most standard reports.

As a next step, look into conversions and goals in Google Analytics to see how to integrate and monitor form factors, which will vary according to the website’s function and purpose. To give you a head start, we have made a template that you can install²⁹ in your Google Analytics dashboard (This template uses custom variables, not custom dimensions). Just follow the instructions to assign an Analytics property, which will then appear under Dashboards ? Private.

(al, ml, il)

Footnotes

The post Is Your Responsive Design Working? Google Analytics Will Tell You appeared first on Smashing Magazine.

Categories: Others Tags:

20 Free HTML, PSD and GUI Templates: August 2014 Edition

August 28th, 2014 admin No comments

Summer moves on, but we are here to stay, as reliable as always, bringing you the next bunch of free HTML, PSD and GUI templates developers and designers brought forth in the month of August 2014. Despite the hot days creativity didn’t dry up. My favorite this month is the HTML5 template Sublime, but there should be enough to choose from for everybody. If you’re a first-time visitor to this series, scroll down to the bottom of the post where we have neatly listed all the already published parts of our monthly collection.

Categories: Others Tags:

Customizing WordPress Archives For Categories, Tags And Other Taxonomies

August 27th, 2014 admin No comments

Most WordPress users are familiar with tags and categories and with how to use them to organize their blog posts. If you use custom post types in WordPress, you might need to organize them like categories and tags. Categories and tags are examples of taxonomies, and WordPress allows you to create as many custom taxonomies as you want. These custom taxonomies operate like categories or tags, but are separate.

In this tutorial, we’ll explain custom taxonomies and how to create them. We’ll also go over which template files in a WordPress theme control the archives of built-in and custom taxonomies, and some advanced techniques for customizing the behavior of taxonomy archives.

Terminology

Before continuing, let’s get our terminology straight. A taxonomy is a WordPress content type, used primarily to organize content of any other content type. The two taxonomies everyone is familiar with are built in: categories and tags. We tend to call an individual posting of a tag a “tag,” but to be precise, we should refer to it as a “term” in the “tag” taxonomy. We pretty much always refer to items in a custom taxonomy as “terms.”

Categories and tags represent the two types of taxonomies: hierarchical and non-hierarchical. Like categories, hierarchical taxonomies can have parent-child relationships between terms in the taxonomy. For example, you might have on your blog a “films” category that has several child categories, with names like “foreign” and “domestic.” Custom taxonomies may also be hierarchical, like categories, or non-hierarchical, like tags.

A small part of the “WordPress Template Hierarchy”. (Source¹)

The archive of a taxonomy is the list of posts in a taxonomy that is automatically generated by WordPress. For example, this would be the page you see when you click on a category link and see all posts in that category. We’ll go over how to change the behavior of these pages and learn which template files generate them.

How Tag, Category and Custom Taxonomy Archives Work

For every category, tag and custom taxonomy, WordPress automatically generates an archive that lists each post associated with that taxonomy, in reverse chronological order. The system works really well if you organize your blog posts with categories and tags. If you have a complex system of organizing custom post types with custom taxonomies, then it might not be ideal. We’ll go over the many ways to modify these archives.

The first step to customizing is to know which files in your theme are used to display the archive. Different themes have different template files, but all themes have an index.php template. The index.php template is used to display all content, unless a template exists higher up in the hierarchy. WordPress’ template hierarchy is the system that dictates which template file is used to display which content. We’ll briefly go over the template hierarchy for categories, tags and custom taxonomies. If you’d like to learn more, these resources are highly recommended:

“Template Hierarchy²,” WordPress Codex
“Template Hierarchy³,” Chip Bennett
A flow chart
The WordPress Template Hierarchy: A Mini Resource⁴, Rami Abraham and Michelle Schulp
An interactive chart
Reveal Template⁵, Scott Reilly
A WordPress plugin

Most themes have an archive.php template, which is used for category and tag archives, as well as date and author archives. You can add a template file to handle category and tag archives separately. These templates would be named category.php or tag.php, respectively. You could also create templates for specific tags or categories, using the ID or slug of the category or tag. For example, a tag with the ID of 7 would use tag-7.php, if it exists, rather than tag.php or archive.php. A tag with the slug of “avocado” would be displayed using the tag-avocado.php template.

One tricky thing to keep in mind is that a template named after a slug will override a template named after an ID number. So, if a tag with the slug of “avocado” had an ID of 7, then tag-avocado.php would override tag-7.php, if it exists.

The template hierarchy for custom taxonomies is a little different, because there are templates for all taxonomies, for specific taxonomies and for specific terms in a specific taxonomy. So, imagine that you have two taxonomies, “fruits” and “vegetables,” and the “fruits” taxonomy has two terms, “apples” and “oranges,” while “vegetables” has two terms, “carrots” and “celery.” Let’s add three templates to our website’s theme: taxonomy.php, taxonomy-fruits.php and taxonomy-vegetables-carrots.php.

For the terms in the “fruits” taxonomy, all archives would be generated using taxonomy-fruits.php because no term-specific template exists. On the other hand, the term “carrots” in the “vegetables” taxonomy’s archives would be generated using taxonomy-vegetables-carrots.php. Because no taxonomy-vegetables.php template exists, all other terms in “vegetables” would be generated using taxonomy.php.

Using Conditional Tags

While you can add any of the custom templates listed above to create a totally unique view for any category, tag, custom taxonomy or custom taxonomy term, sometimes all you want to do is make one or two little changes. In fact, try to avoid creating a lot of templates because you will need to adjust each one when you make overall changes to the basic HTML markup that you use in each template in the theme. Unless I need a template that is radically different from the theme’s archive.php, I tend to stick to adding conditional changes to archive.php.

WordPress provides conditional functions to determine whether a category, tag or custom taxonomy is being displayed. To determine whether a category archive is being shown, you can use is_category() for categories, is_tag() for tags and is_tax() for custom taxonomies. The is_tag() and is_category() functions can also test for specific categories or tags by slug or ID. For example:

<?php
    if ( is_tag() ) {
        echo "True for any tag!";
    }
    if ( is_tag( 'jedis' ) ) {
        echo "True for the tag whose slug is jedi";
    }
    if ( is_tag( array( 'jedi', 'sith' ) ) ) {
        echo "True for tags whose slug is jedi or sith";
    }
    if ( is_tag( 7 ) ) {
        echo "You can also use tag IDs. This is true for tag ID 7";
    }
?>

For custom taxonomies, the is_tax() function can be used to check whether any taxonomy (not including categories and tags), a specific taxonomy or a specific term in a taxonomy is being shown. For example:

<?php
    if ( is_tax() ) {
        echo "True for any custom taxonomy.";
    }
    if ( is_tax( 'vegetable' ) ) {
        echo "True for any term in the vegetable taxonomy.";
    }
    if ( is_tax( 'vegetable', 'celery' ) ) {
        echo "True only for the term celery, in the vegetable taxonomy.";
    }
?>

Creating Custom Taxonomies

Adding a custom taxonomy can be done in one of three ways: coding it manually according to the instructions in the Codex, which I don’t recommend; generating the code using GenerateWP⁶; or using a plugin for custom content types, such as Pods⁷ or Types⁸. Plugins for custom content types enable you to create custom taxonomies and custom post types in WordPress’ back end without having to write any code. Using one is the easiest way to add a custom taxonomy and to get a framework for working with custom content types.

If you opt for one of the first two options, rather than a plugin, then you will need to add the code either to your theme’s functions.php file or to a custom plugin. I strongly recommend creating a custom plugin, rather than adding the code to functions.php. Even if you’ve never created a plugin before, I urge you to do it. While adding the code to your theme’s functions.php will work, when you switch themes (say, because you want to use a new theme or to troubleshoot a problem), the taxonomy will no longer work.

Whether you write your custom taxonomy code by following the directions in the Codex or by generating it with GenerateWP, just paste it in a text file and add one line of code before it and you’ll have a plugin. Upload it and install it as you would any other plugin.

The only line you need to create a custom plugin is /* Plugin name: Custom Taxonomy */.

Below is a plugin to register a custom taxonomy named “vegetables,” which I created using GenerateWP because it’s significantly easier and way less likely to contain errors than doing it manually:

<?php
    /* Plugin Name: Veggie Taxonomy */
    if ( ! function_exists( 'slug_veggies_tax' ) ) {

    // Register Custom Taxonomy
    function slug_veggies_tax() {

    $labels = array(
    'name'                      	=> _x( 'Vegetables', 'Taxonomy General Name', 'text_domain' ),
    'singular_name'              	=> _x( 'Vegetable', 'Taxonomy Singular Name', 'text_domain' ),
    'menu_name'                  	=> __( 'Taxonomy', 'text_domain' ),
    'all_Veggies'                   => __( 'All Veggies', 'text_domain' ),
    'parent_Veggie'                 => __( 'Parent Veggie', 'text_domain' ),
    'parent_Veggie_colon'           => __( 'Parent Veggie:', 'text_domain' ),
    'new_Veggie_name'               => __( 'New Veggie name', 'text_domain' ),
    'add_new_Veggie'                => __( 'Add new Veggie', 'text_domain' ),
    'edit_Veggie'                   => __( 'Edit Veggie', 'text_domain' ),
    'update_Veggie'                 => __( 'Update Veggie', 'text_domain' ),
    'separate_Veggies_with_commas'  => __( 'Separate Veggies with commas', 'text_domain' ),
    'search_Veggies'                => __( 'Search Veggies', 'text_domain' ),
    'add_or_remove_Veggies'         => __( 'Add or remove Veggies', 'text_domain' ),
    'choose_from_most_used'         => __( 'Choose from the most used Veggies', 'text_domain' ),
    'not_found'                     => __( 'Not Found', 'text_domain' ),
    );
    $args = array(
    'labels'                     => $labels,
    'hierarchical'               => false,
    'public'                     => true,
    'show_ui'                    => true,
    'show_admin_column'          => true,
    'show_in_nav_menus'          => true,
    'show_tagcloud'              => false,
    );
    register_taxonomy( 'vegetable', array( 'post' ), $args );

    }

    // Hook into the 'init' action
    add_action( 'init', 'slug_veggies_tax', 0 );

    }
?>

By the way, I created this code using GenerateWP in less than two minutes! The service is great, and manually writing code that this website can automatically generate for you makes no sense. To make the process even easier, you can use the plugin Pluginception⁹ to create a blank plugin for you and then paste the code from GenerateWP into it using WordPress’ plugin editor.

Using WP_Query With Custom Taxonomies

Once you have added a custom taxonomy, you might want to query for posts with terms in that taxonomy. To do this, we can use taxonomy queries with WP_QUERY.

Taxonomy queries can be very simple or complicated. The simplest query would be for all posts with a certain term. For example, if you had a post type named “jedi” and an associated custom taxonomy named “level,” then you could get all Jedi masters like this:

<?php
    $args = array(
        'post_type' => 'jedi',
        'level' => 'master'
    );
    $query = new WP_Query( $args );
?>

If you added a second custom taxonomy named “era,” then you could find all Jedi masters of the Old Republic like this:

<?php
    $args = array(
        'post_type' => 'jedi',
        'level' => 'master',
        'era' => 'old-republic',
    );
    $query = new WP_Query( $args );
?>

We can also do more complicated comparisons, using a full tax_query. The tax_query argument enables us to search by ID instead of slug (as we did before) and to search for more than one term. It also enables us to combine multiple taxonomy queries and to set the relationship between the two. In addition, we can even use SQL operators such as NOT IN to exclude terms.

The possibilities are endless. Explore the “Taxonomy Parameters¹⁰” section of the Codex page for “Class Reference/WP_Query” for complete information. The snippet below searches our “jedi” post type for Jedi knights and masters who are not from the Old Republic era:

<?php
    $args = array(
        'post_type' => 'jedi',
        'tax_query' => array(
        'relation' => 'AND',
            array(
                'taxonomy' => 'level',
                'field' => 'slug',
                'terms' => array( 'master', 'knight' )
            ),
            array(
                'taxonomy' => 'era',
                'field' => 'slug',
                'terms' => array( 'old-republic' ),
                'operator' => 'NOT IN'
                )
        )
    );
    $query = new WP_Query( $args );
?>

Customizing Taxonomy Archives

So far, we have covered how taxonomies, tags and categories work by default, as well as how to create custom taxonomies. If any of this default behavior doesn’t fit your needs, you can always modify it. We’ll go over some ways to modify WordPress’ built-in functionality for those of you who use WordPress less as a blogging platform and more as a content management system, which often requires custom taxonomies.

Hello pre_get_posts

Before any posts are outputted by the WordPress loop, WordPress automatically retrieves the posts for the user according to the page they are on, using the WP_QUERY class. For example, in the main blog index, it gets the most recent posts. In a taxonomy archive, it gets the most recent posts in that taxonomy.

To change that query, you can use the pre_get_posts filter before WordPress gets any posts. This filter exposes the query object after it is set but before it is used to actually get any posts. This means that you can modify the query using the class methods before the main WordPress loop is run. If that sounds confusing, don’t worry — the next few sections of this article give practical examples of how this works.

Adding Custom Post Types to Category or Tag Archives

A great use of modifying the WP_QUERY object using pre_get_posts is to add posts from a custom post type to the category archive. By default, custom post types are not included in this query. If we were constructing arguments to be passed to WP_Query and wanted to include both regular posts and posts in the custom post type “jedi,” then our argument would look like this:

<?php
    $args = array( 'post_type' =>
        array(
            'post',
            'jedi'
        )
    );
?>

In the callback for our pre_get_posts filter, we need to pass a similar argument. The problem is that the WP_QUERY object already exists, so we can’t pass an argument to it like we do when creating an instance of the class. Instead, we use the set() class method, which allows us to change any of the arguments after the class has been created.

In the snippet below, we use set() to change the post_type argument from the default value, which is post, to an array of post types, including posts and our custom post type “jedi.” Note that we are using the conditional tag is_category() so that the change happens only when category archives are being displayed.

<?php
    add_filter( 'pre_get_posts', 'slug_cpt_category_archives' );
    function slug_cpt_category_archives( $query ) {
    if ( $query->is_category() && $query->is_main_query()  )  {
        $query->set( 'post_type',
            array(
                'post',
                'jedi'
            )
        );
    }

    return $query;

    }
?>

This function’s $query parameter is the WP_QUERY object before it is used to populate the main loop. Because a page may include multiple loops, such as those used by widgets, we use the conditional function is_main_query() to ensure that this affects only the main loop and not any secondary loops on the page, such as those used by widgets.

Making Category or Hierarchical Taxonomy Archives Hierarchical

By default, the archives for categories and other hierarchical taxonomies act like any other taxonomy archive: they show all posts in that category or with that taxonomy term. To show only parent terms and exclude child terms, you would use the pre_get_posts filter again.

Just like when creating your own WP_QUERY for posts in a taxonomy, the main loop’s WP_QUERY uses the tax_query arguments to get posts by taxonomy. The tax_query has an include_children argument, which by default is set to 1 or true. By changing it to 0 or false, we can prevent posts with a child term from being included in the archive:

<?php
    add_action( 'pre_get_posts', 'slug_cpt_category_archives' );
    function slug_cpt_category_archives( $query ) {
        if ( is_tax( 'TAXONOMY NAME') )  {
            $tax_query = $query->tax_query->queries;
            $tax_query['include_children'] = 0;
            $query->set( 'tax_query', $tax_query );
        }

    }
?>

The result sounds desirable but has several major shortcomings. That’s OK, because if we address those flaws, we’ll have taken the first step to creating something very cool.

The first and biggest problem is that the result is not an archive page that shows the child terms; it’s still a post with the parent term. The other problem is that we don’t have a good way to navigate to the child term archives.

A good way to deal with this is to combine the pre_get_post filter above with a modification to the template that shows the category or taxonomy. We discussed earlier how to determine which template is used to output category or custom taxonomy archives. Also, keep in mind that you can always wrap your changes in conditional tags, such as is_category() or is_tax(), but that can become unwieldy quickly; so, making a copy of your archive.php and removing any unneeded code probably makes more sense.

The first step is to wrap the entire thing in a check to see whether the current taxonomy term has children. If it does not, then we do not want to output anything. To do this, we use get_term_children(), which will return an empty array if the current term has no children and which we can test for with !empty().

To make this work for any taxonomy that might be displayed, we need to get the current taxonomy and taxonomy term from the query_vars array of the global $wp_query object. The taxonomy’s slug is contained in the taxonomy key, and the term’s slug is in the tax key.

To use get_term_children(), we must have the term’s ID. The ID is not in query_vars, but we can pass the slug to get_term_by() to get it.

Here is how we get all of the information that we need into variables:

<?php
    global $wp_query;
    $taxonomy = $wp_query->query_vars['taxonomy'];
    $term = $wp_query->query_vars['tax'];
    $term_id = get_term_by( 'slug', $term, $taxonomy );
    $term_id = $term_id->term_id;
    $terms = get_term_children( $term_id, $taxonomy );
?>

Now we will continue only if $terms isn’t an empty array. To see whether it is empty in our check, first we will repopulate the terms using get_terms(). This is necessary because get_term_children returns only an array of IDs, and we need IDs and names, both of which are in the object returned by get_terms(). We can loop through this object, outputting the name as a link. The link can be generated by passing the term’s ID to get_term_link().

Here is the complete code:

<?php
    global $wp_query;
    $taxonomy = $wp_query->query_vars['taxonomy'];
    $term = $wp_query->query_vars['tax'];
    $term_id = get_term_by( 'slug', $term, $taxonomy );
    $term_id = $term_id->term_id;
    $terms = get_term_children( $term_id, $taxonomy );
    if ( !empty( $terms ) ) {
    $terms = get_terms( $taxonomy, array( 'child_of' => $term_id ) );
    echo '<ul class="child-term-list">';
    foreach ( $terms as $term ) {
    echo '<li><a href="'.$term->term_id.'">'.$term->name.'</a></li>';
    }

    echo '</ul>';

?>

Creating A Custom Landing Page For Taxonomy Archives

If your hierarchical taxonomy has no terms in the parent term, then the regular taxonomy archive system will be of no use to you. You really want to show taxonomy links instead.

In this case, a good option is to create a custom landing page for the term. We’ll use query_vars again to determine whether the user is on the first page of a taxonomy archive; if so, we will use the taxonomy_archive filter to include a separate template, like this:

<?php
    add_filter( 'taxonomy_archive ', 'slug_tax_page_one' );
    function slug_tax_page_one( $template ) {
        if ( is_tax( 'TAXONOMY_NAME' ) ) {
             global $wp_query;
             $page = $wp_query->query_vars['paged'];
            if ( $page = 0 ) {
                $template = get_stylesheet_directory(). '/taxonomy-page-one.php';
            }
        }

        return $template;

    }
?>

This callback first checks that the user is in the taxonomy that we want to target. We can target all taxonomies by changing this to just is_tax(). Then, it gets the current page using the query_var named paged, and if the user is on the first page, then it returns the address for the new template file. If not, it returns the default template file.

What you put in that template file is up to you. You can create a list of terms using the code shown above. You can use it to output any content, really — for example, more information about the taxonomy term or links to specific posts.

Taking Control

With a bit of work, WordPress’ basic architecture, which still reflects its origins as a blogging platform, can be customized to fit almost any website or Web app. Using custom taxonomies to organize your content and doing it in a way that suits your needs will be an important step in many of your WordPress projects. Hopefully, this post has brought you a step closer to getting the most out of this powerful aspect of WordPress.

(dp, al, il)

Footnotes

The post Customizing WordPress Archives For Categories, Tags And Other Taxonomies appeared first on Smashing Magazine.

Categories: Others Tags:

20 Awesome Android App Templates with Premium Designs

August 27th, 2014 admin No comments

Impossiball - Android Game - Buildbox Template

It seems Google is realizing that design and user interaction really are just as crucial as what the item does, in order to make it pleasing to use and make you want to show it off to friends & family. The interface for the new version of Android certainly looks slick & futuristic, with its clean design and innovative interaction, many everyday tasks seem responsive, dynamic and fun. The new design overall makes you sit up and take notice, not only because it’s something that looks quite different to many devices out there right now, but because Google produced it.

To be fair, the user interface and interaction of Android has continued to improve over the years, something it should be encouraged for, but the design and consistency of style throughout has stayed muddled and tacky looking. They’ve obviously woken from their design slumber recently, realized this fact and put much more focus into the design of products now, with Chrome looking simple but smart, it was a step in the right direction.

So, with the increased use of smartphones, many web developers have become interested in the app developing niche. Also, designers are starting to realize what a major trend this is and they also started designing cool app templates. If you’re looking for an app for you, for a client or you just have an idea and don’t want to start from scratch, then these awesome Android app templates will surely help you a lot.

With technology impressing us ever more and slick interaction being covered as standard, the focus shifts to design now more than ever and with a iOS vs. Android war hotting up for this year, design & UI may be the deciding factor.

If you’re an Android app developer or just want a great app for your business, then you should definitely check out this list of 20 premium Android app templates! These are some of the best Android app templates on the web.

These great Android app templates will help you create your app faster, as you will already work on a premium template.

To help you out, all of these Android app templates have premium designs and they can be customized to fit your brand. Here they are!

P.S. Check out these free app templates in PSD format! You’ll find them useful!

Impossiball – Android Game – Emoticon Game ! + Eclipse Project(with Admob&Heyzap)

Impossiball is a very popular arcade game nowadays and with this template, you can create an awesome game similar to this one. You have to tap to jump and hold to fly above obstacles.

FlappyBot – An Obstacle Avoidance Game

FlappyBot is a native Android Arcade game in which you have to avoid obstacles to get to the next level. It was written in Java with Eclipse and it can be edited to your liking.

Kids Memory Game with AdMob

Kids Memory Game is yet another nice Android game application that lets you create different memory matches and contains an unlimited number of game modes. Check it out and create an awesome memory game.

Hide Photo and Video Vault With Fingerprint

Keep your best memories in a vault and never lose them. The Hide Photo and Video Vault With Fingerprint is a native Android app template that comes with Admob, Google Analytics & Firebase Integrations.

Jumper – An Arcade Bouncing Game

If you’re up for some more native Android Arcade Games then you might want to check out Jumper! It was written in Java with Eclipse and it can easily be customised to fit your interests. You can add more bars and special items and even give it a reskin.

Advanced-Colorbook

This is a really nice Colorbook app that comes with many great features. It is easy to be used by kids and lets them create colorful images by simply filling surfaces with the color bucket. Advanced-Colorbook provides you as many color categories and color reset options as you wish. You can easily reskin and customise this template.

Classic Highway Car Avoidance Game

This is a classic car avoidance game and a native Android game to which you can add different types of vehicles, trees, stones, and logos. It comes ready with AdMob!

Webview with Splash Screen and Scrollable Tabs

With Webview, you can turn your website into a cool Android application within minutes. By using the Webview with Splash Screens and Scrollable Tabs you can customise your app in basically no-time!

Kids Jigsaw Puzzle Game with AdMob

If you’re looking for more games check out the Kids Jigsaw Puzzle Android game application. Create different puzzle games with any number of slides with this app’s code

Abc Call Recorder – Beautiful UI, Admob, Firebase Push Notification, Admin Panel

You never know when you’ll need a similar app. The Abc Call Recorder is an android app that can record incomming calls and lets you replay them.

EasyView – Android WebView App

If you liked the Webview app then you might also want to have a closer look at EasyView. This is an Android application that helps you easily create a personal app based on mobile websites.

Flying Panda: Game For Android With AdMob

The Flying Panda is a really nice game and it comes packed with AdMob template.

Android Live TV

How about making an app that lets users watch live tv on their Android devices with Android Live Tv app.

Universal – Full Multi-Purpose Android App

If you were looking for a really nice multi-purpose Android app then you have come to the right place. Check out Universal, an app template with which you can use as many Twitter timelines, YouTube channels, RSS feeds, websites and radio stations as you want.

2048 Puzzle – A Classic Android Game

Who doesn’t like the 2048 puzzle game? Well, now you can create your own custom number puzzle game with this template. This template was specially designed to be edited using Eclipse so make sure you have the Android SDK installed.

Chameleon

One page website template that has motion effects to create an android mobile application. The template is fully customizable.

HD Wallpaper

You should also have a look at the HD Wallpaper app template that brings all the best HD wallpapers and backgrounds to your Android device.

Success Quotes – Android Template

Do you want to work hard to achieve your goals? Then how about using or creating an awesome application that could make your dreams come true. The Succes Quotes template can be used to create a really nice app that could motivate you through unique quotes.

Matches Puzzle – Android Game

This is one of the best casual games in which you move 1 or 2 matches to fix the equation.

Ringtones App Template with AdMob

You can now create the ringtone of your dreams. This template lets create different ringtone apps.

The post 20 Awesome Android App Templates with Premium Designs appeared first on Web Design Dev.

20 Awesome Android App Templates with Premium Designs was first posted on August 27, 2014 at 12:15 pm.
©2022 “Web Design Dev“. Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at jc@ventureupwards.com

Categories: Others, Programming Tags:

20 Awesome Android App Templates with Premium Designs

August 27th, 2014 admin No comments

Mobile devices are very popular these days and many web developers have become interested in the app developing niche. Also, designers are starting to realize what a major trend this is and they also started designing cool app templates. If you’re looking for an app for you, for a client or you just have an idea and don’t want to start from scratch, then these awesome Android app templates will surely help you a lot.

All of these Android app templates have premium designs and they can be customized to fit your brand. Here they are.

The Restaurant App

The Restaurant App is a mobile reservation system that used for managing reservation and restaurant menu. Admin can manage reservation, restaurant menu and other configurations.

FlappyBot – An Obstacle Avoidance Game

This is a native Android Arcade Obstacle Avoidance Game, written in Java with Eclipse. This game can be edited to your liking.

Kids Memory Game with AdMob

Kids Memory Game is an Android game application. This application lets you to create different memory match games with unlimited number of game modes.

Recipes App

Recipes App is an application under Android platform which can be used to create application about food recipes. If you are a chef or have hobby in cooking then this app is perfect for you.

Jumper – An Arcade Bouncing Game

This is a native Android Arcade Jumping Game, written in Java with Eclipse. eel free to add more bars, more special items, more coins or give it reskin.

Goceng: Deal Aggregator App

Goceng is a deal aggregator application template that run under Android platform. This will help you build your own mobile deal application faster.

Classic Highway Car Avoidance Game

This is a native Android Highway Car Avoidance Game. Feel free to add any type of different vehicles, trees, stones or logos of your company on the road. Comes ready with AdMob!

Webview with Splash Screen and Scrollable Tabs

Turn your website into Android Application just in minutes with Webview with Splash Screen and Scrollable Tabs. You need only several minutes to customize it to your needs.

Kids Jigsaw Puzzle Game with AdMob

Kids Jigsaw Puzzle Game is an Android game application. This code project lets you to create different puzzle games with any number of slides. he game is packed with different settings for customization.

Layar Tancep: Youtube Channel App

Layar Tancep: Youtube Channel App is an application template for Android that can be used to build your news video, sports or any video using youtube channel.

EasyView – Android WebView App

EasyView is an Android application that helps to create personalized applications based on mobile websites easily.

Flying Panda : Game For Android With AdMob

The item is packed with AdMob template. You can exchange the AdMob Publish ID and make money only for you.

Android Live TV

Android Live Tv Application is app that show live tv on android device. Watch your favorite TV channels Live in your mobile phone with this Android application on your Android device.

Universal – Full Multi-Purpose Android App

You can use as many Twitter Timelines, Youtube Channels, Rss Feeds, Websites& Radio stations as you want. Also you can get content using official API’s and display them in Cards style list view. This app template has many more other features.

2048 Puzzle – A Classic Android Game

This is a template for the classic 2048 number puzzle game, which can run on Android devices. The template is designed to be edited with eclipse, having Android SDK installed.

WordPress News App

Create user friendly and nice looking Android News Application directly from your WordPress website just in minutes.

HD Wallpaper

“HD Wallpaper” is a cool new app that brings all the best HD wallpapers and backgrounds to your Android device.

Success Quotes – Android Template

SuccessQuotes is an android application motivating you to hard work and to be enthusiastic to achieve your goals and make your dreams come true.It has SQLiteDatabase with 1000 success quotes for more than 180 authors.

Your Android Map

Your Android Map is a location app template for Android that you can use to create any location(map) application such as tourism app of your city, store, restaurant, hotel, or any interesting place app.

Ringtones App Template with AdMob

Ringtone App Template application lets you to create different ringtone apps of your choice. You can create ringtone apps like funny ringtones, scary ringtones, office ringtones, and more.

The post 20 Awesome Android App Templates with Premium Designs appeared first on Web Design Blog | Magazine for Designers.

Categories: Others, Programming Tags:

20 Awesome Android App Templates with Premium Designs

August 27th, 2014 admin No comments

All of these Android app templates have premium designs and they can be customized to fit your brand. Here they are.

The Restaurant App

The Restaurant App is a mobile reservation system that used for managing reservation and restaurant menu. Admin can manage reservation, restaurant menu and other configurations.

FlappyBot – An Obstacle Avoidance Game

This is a native Android Arcade Obstacle Avoidance Game, written in Java with Eclipse. This game can be edited to your liking.

Kids Memory Game with AdMob

Kids Memory Game is an Android game application. This application lets you to create different memory match games with unlimited number of game modes.

Recipes App

Recipes App is an application under Android platform which can be used to create application about food recipes. If you are a chef or have hobby in cooking then this app is perfect for you.

Jumper – An Arcade Bouncing Game

This is a native Android Arcade Jumping Game, written in Java with Eclipse. eel free to add more bars, more special items, more coins or give it reskin.

Goceng: Deal Aggregator App

Goceng is a deal aggregator application template that run under Android platform. This will help you build your own mobile deal application faster.

Classic Highway Car Avoidance Game

This is a native Android Highway Car Avoidance Game. Feel free to add any type of different vehicles, trees, stones or logos of your company on the road. Comes ready with AdMob!

Webview with Splash Screen and Scrollable Tabs

Turn your website into Android Application just in minutes with Webview with Splash Screen and Scrollable Tabs. You need only several minutes to customize it to your needs.

Kids Jigsaw Puzzle Game with AdMob

Layar Tancep: Youtube Channel App

Layar Tancep: Youtube Channel App is an application template for Android that can be used to build your news video, sports or any video using youtube channel.

EasyView – Android WebView App

EasyView is an Android application that helps to create personalized applications based on mobile websites easily.

Flying Panda : Game For Android With AdMob

The item is packed with AdMob template. You can exchange the AdMob Publish ID and make money only for you.

Android Live TV

Android Live Tv Application is app that show live tv on android device. Watch your favorite TV channels Live in your mobile phone with this Android application on your Android device.

Universal – Full Multi-Purpose Android App

2048 Puzzle – A Classic Android Game

This is a template for the classic 2048 number puzzle game, which can run on Android devices. The template is designed to be edited with eclipse, having Android SDK installed.

WordPress News App

Create user friendly and nice looking Android News Application directly from your WordPress website just in minutes.

HD Wallpaper

“HD Wallpaper” is a cool new app that brings all the best HD wallpapers and backgrounds to your Android device.

Success Quotes – Android Template

Your Android Map

Ringtones App Template with AdMob

Ringtone App Template application lets you to create different ringtone apps of your choice. You can create ringtone apps like funny ringtones, scary ringtones, office ringtones, and more.

The post 20 Awesome Android App Templates with Premium Designs appeared first on Web Design Blog | Magazine for Designers.

Categories: Others, Programming Tags:

Pexels and Travel Coffee Book: Two New Sources for Completely Free Photos

August 27th, 2014 admin No comments

Oops, we did it again. Two more sources for completely free photos have been washed upon the shores of Noupe headquarters. I call them completely free, because both sources chose Creative Commons Zero as their license model. And as we all know, stuff licensed CC0 is free for any legal purpose, not even attribution is required. While Pexels is more of an aggregator of elsewhere already available material, Travel Coffee Book concentrates on collecting travel photography from all over the world. It resembles the popular Unsplash very closely. Both services deserve to be bookmarked. Here’s what you can expect…

Categories: Others Tags:

Older Entries

Archive

Hungry

Understanding

Shades Of Summer

Summer Is Still Here!

Pawns And Kings

Dream It

Be The Wind Of Change

Elephant In The Room

California Sundown

Green Grass Of The Vosges

Autumn Ripples

Good Bye My Dear Hot Friend

Sugar Cube

Join In Next Month!

What’s Your Favorite?

Footnotes

Kerning’s Calling

The Idea Behind The Notebook And Badges

The Importance Of Research

The Process

Sketching is a Game of Trial and Error

Tracing Sketches with Adobe Illustrator

Let’s Finish the Design!

Let’s Go Print!

Final Thoughts (That Is, Always Have Fun!)

Footnotes

Why Form Factor?

Feeding Data To Google Analytics

Analyzing The Data In Google Analytics

Big Picture With Dashboard Widgets

Form Factor Segments

Conclusion

Footnotes

Terminology

How Tag, Category and Custom Taxonomy Archives Work

Using Conditional Tags

Creating Custom Taxonomies

Using WP_Query With Custom Taxonomies

Customizing Taxonomy Archives

Hello pre_get_posts

Adding Custom Post Types to Category or Tag Archives

Making Category or Hierarchical Taxonomy Archives Hierarchical

Creating A Custom Landing Page For Taxonomy Archives

Taking Control

Footnotes

Categories

Blogroll

Archives

Meta