If you’re a Genesis framework user, you’ve probably noticed a new logo in the most recent 1.9 version. Today, I’d like to share with you some ideas behind the new Genesis visual brand and what direction overall in which we’re taking StudioPress.

The idea of redesigning Genesis appeared once we realized we’re getting closer to the big 2.0 version.

I had a couple of serious discussions with Brian Gardner on the future of StudioPress themes and the Genesis framework design itself.

Our first brainstorming session was more about the fundamental ideas of what StudioPress design is about.

Let’s get back to the core and define what the Genesis framework really is…

The Genesis Framework

If you have ever used any of our themes, you probably know they’re characterized with simplicity but incredible functionality.

There are not too many crazy custom settings or options that would control the visual aspects of the theme, but, on the other hand, it gives much more flexibility for designers and developers to customize the theme thanks to the way it’s coded.

From a technical point of view, the Genesis framework is very well optimized, fast, secure and modular.

The goal was to connect everything from what the Genesis framework is to its back-end as well as represent similar values in a visual area.

Of course, we didn’t want to just redesign the Genesis logo and let everything else take its own path. Our goal was to create a new trend that would become a common feature between all of our child themes.

Our codex of a good design

Here is a list of some core features we will try to include in our designs:

1. Responsiveness – this means we’ll avoid static graphical elements that would require a special code to make it responsive. Making all elements flexible will result in less complicated CSS code as well as ensure an easier customization process.
2. More spacing – we want to let our designs breathe by making them more spacious. We believe that white space is a well-used space.
3. Readable typography – yes, no more 12px body font size. You’ll see increased font sizes and higher contrast in all our new themes.
4. Flat design – making more elements flat means less CSS code and more flexibility in customization. It’ll also help us achieve a more simple and modern appearance. However, it doesn’t mean we’ll do all of our child themes completely flat. You may expect very subtle shadows or delicate gradients.

The Genesis logo redesign

The new Genesis logo was supposed to represent all of these features in one. We wanted to make the logo simple, flat, spacious and with a nice typography.

My first sketches looked like this:

What brought us to some quick design ideas during our meeting at Starbucks:

We chose a concept we liked and did a final version of it:

We chose “Lato” (created by Łukasz Dziedzic) as our main font of the new Genesis framework default theme and the logo.

It’s one of my favorite fonts on the Google Web Fonts and I’ve used it in various projects so far. It’s free, open-source and there are 10 styles from “Ultra-Light 100″ to “Ultra-Bold 900″ which gives you a lot of design flexibility.

Summing up

Branding is something more than just a pretty logo design.

Whenever you start a “rebranding” process, first think about the core values that you want to put behind your mark. Make a small mission statement of what your services or products really are.

Follow that path and you’ll be able to easily create a brand that will remain for years.

Bonus: Genesis 2.0

For those of you who read the article to the end, I have a small bonus. Here is a teaser of the future Genesis 2.0 default theme design that we’re working on:

The year 2012 was definitely a great year for web design. We saw several new trends that have significantly changed how the web looks today.

We saw the rise of responsive design, more beautiful typography and various implementations of animations and effects using CSS3 / HTML5 / JavaScript.

In this article, I’m going to focus more on visual design trends that I think are going to rule in 2013.

1. Flexible design

Today, when we design a new website, we already know it must be responsive by default. The responsive layout is not a feature anymore — it has become the spine of any website layout.

Instead of using extra big batches of code to make each screen resolution step separately responsive, we’re going to make our layouts fluid in the first place and let them automatically fit to all other screens.

Using responsive units like ‘em’, ‘rem’ and % will help us to make all inner text and images flexible.

This is the end of static elements.

We’ve already done this in the most recent Genesis 1.9.
Go ahead and check out the CSS code.

2. Flat design

Creating shadows, gradients, bevel and emboss effects with CSS is not a problem anymore. However, the new web design trend, what we can call “flat design,” doesn’t need it at all.

The flat design makes your website look sharp and clean, and it’s easier to maintain the visual balance.

We believe that Internet users are so well educated in 2013 that they don’t need a button to have that 3D dimensional-looking style in order to know that it’s clickable.

With the flat design, the user interface can still be intuitive and create a great experience. An excellent example of that can be LayerVault:

One of my most recent design projects, AgentPress, is all flat as well. See the results here:

3. Focus on typography

The database of web fonts grows every day.

We can now find hundreds of beautiful free web fonts on Google Web Fonts or choose some more unique and premium fonts from Typekit.

Typography became a really important part of modern web design and I believe it’s a foundation of any great design.

We can create the entire website by designing just typography and still make it unique and fascinating for the visitors.

Just look at some of these inspirational examples of wonderful typography in web design:

4. Long pages

People of 2013 can scroll! The old-school web design I learned had one main rule: “keep it above the fold.”

I heard it hundreds of times. Does it still matter? It’s obvious we want to keep some important things at the top of the website but “the fold” lost its meaning to me.

Instead of squeezing everything to the top of the website, it’s better to give it some space and let people scroll and explore the home page.

We’ve seen so many great web designs in 2012 with incredibly long pages that work just great.

People would rather scroll down the page than click and load to another page.

Scrolling is easy and we can even make it attractive and encourage people to take this action by using some effects like parallax scrolling.

Let’s look at some long page designs:

5. Big photos and detailed illustrations

Thanks to using more CSS3 and web fonts, we reduced the usage of many images in the web design. Instead, we can use images where they are really needed and we can use them in really high quality.

We saw that trend near the end of 2012 where we could admire huge full-screen photo backgrounds.

I’m really looking forward to seeing even more great pictures and extremely detailed, huge illustrations in the world of modern web design this year.

It’s all happening right now; see these examples:

Conclusion

Those are my five design trends that I think are worthy of special attention in 2013.

We’re definitely going to see more designs in this direction and there will be a demand for it.

Of course, we can’t stick to the trends and blindly follow them. We always have a chance to create something new and original.

We should also try to incorporate our own style into the current standards what will make our work unique and recognizable.

Which design style are you going to follow in 2013?

In my last blog post I introduced my small personal project called Typespiration. Now I’d like to share some thoughts with you behind the development process.

Please note that this is completely a side project for me. Of course, I could add more features and choose a different platform than WordPress to build the entire website. However, my goal was to create a simple website and use the system I already know.

Allow me to explain why I chose to make it all simple…

The idea and design

The idea to create typespiration.com hit me a long time ago. Most ideas can start out simple, but over time can start growing into a gigantic project that finally threatens to overwhelm you. I used to have many of these kinds of projects in my head. I put all of them on the side and thought that one day, I would complete them…

A couple of months ago I started following Sacha Grief’s blog. On his blog, I read about a process behind the simple side project called The Toolbox. I really liked how a quick idea could be transformed to a live website in such a short amount of time and with so little effort (he launched his side project in 10 hours!).

Sacha inspired me and I decided that I needed to take one of my ideas, simplify it as much as possible and then just launch it.

So, I crossed out a bunch of functionalities and features from the previous gigantic concept. I decided to make a simple website based on WordPress and use the Genesis framework as a parent theme.

I want you to know that I never had any business plan behind typespiration.com and I’m not planning to monetize it in any way. This decision made it even simpler and pretty straight forward. I just wanted to create a website where other people could sign up and share their typography with other designers.

I tried to incorporate this same “simplicity” policy into the design as well. I knew the website would be full of different designs, fonts and colorful examples and I didn’t want the website design to interfere with the content.

I needed a sharp and bold design that would create a good visual framework that would be separate from all the submitted designs. I chose a contrast color scheme which included a white background, black text and a turquoise color for a highlight.

In the next step I created the logo and a basic design concept in Photoshop.

Since the website is straightforward, I needed to design only the home page and a single post.

Custom theme features

As I mentioned before, I chose WordPress and the Genesis framework as a base for the entire website. These are the platforms I’m most familiar with and there are almost no limits as to what I needed to create.

The Genesis framework let me save a lot of time in creating the front-end visual structure. Therefore, I could focus on what was most important and code all the custom functionalities.

The first thing I needed to add was a custom post type to store all the typography styles. I used the register_post_type() function in order to register the custom post type:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

add_action( 'init', 'custom_post_type' );
function custom_post_type() {
    register_post_type( 'type',
        array(
            'labels' => array(
                'name' => __( 'Typespiration' ),
                'singular_name' => __( 'Type style' ),
            ),
            'has_archive' => true,
            'public' => true,
            'rewrite' => array( 'slug' => 'types', 'with_front' => FALSE ),
            'taxonomies' => array( 'tags' ),
            'supports' => array( 'title', 'author', 'thumbnail' ),
        )
    );
}

Next, using the register_taxonomy() function I registered a custom taxonomy “Tags” and connected it with my custom post type:

1
2
3
4
5
6
7
8
9
10
11
12
13

add_action( 'init', 'custom_tag_taxonomy' );
function custom_tag_taxonomy() { 
     register_taxonomy( 
          'tags', 
          'type', 
          array( 
              'hierarchical' => false, 
              'label' => 'Tag', 
              'query_var' => true, 
              'rewrite' => array('slug' => 'tag') 
          ) 
     ); 
}

One of the biggest challenges of this project was to make adding new typography styles very easy for new registered users. To make this possible, I needed to create custom meta boxes for all the information that needed to be entered. Here is how it looks in the WordPress admin panel:

I used the Custom Meta Boxes script created by Bill Erickson, Jared Atchison and Andrew Norcross. The script is incredibly easy to use and lets you quickly create different kinds of input fields and add it to the custom post type edit page.

First you need to initialize the metabox class:

1
2
3
4
5
6
7

add_action( 'init', 'cmb_initialize_cmb_meta_boxes', 9999 );
function cmb_initialize_cmb_meta_boxes() {

     if ( ! class_exists( 'cmb_Meta_Box' ) )
          require_once 'cmb/init.php';

}

Then, here is a part of the code I used to create the demo box:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

add_filter( 'cmb_meta_boxes', 'custom_metaboxes' );
function custom_metaboxes( array $meta_boxes ) {

     $prefix = '_cmb_';

     $meta_boxes[] = array(
          'id'         => 'demo_metabox',
          'title'      => 'Demo',
          'pages'      => array( 'type' ),
          'context'    => 'normal',
          'priority'   => 'high',
          'show_names' => true,
          'fields'     => array(
               array(
                    'name' => 'Demo background',
                    'id'   => $prefix . 'demo_bg',
                    'type' => 'colorpicker',
                    'std'  => '#ffffff'
               ),
               array(
                    'name' => 'CSS Font import',
                    'id'   => $prefix . 'font_include',
                    'type' => 'textarea',
                    'desc' => 'For exmaple: @import url(http://fonts.googleapis.com/css?family=Merriweather:400,300);',
                    'std'  => '@import url(http://fonts.googleapis.com/css?family=Enriqueta);'
               ),
               array(
                    'name' => 'CSS Code',
                    'id'   => $prefix . 'css_code',
                    'type' => 'textarea_code',
                    'desc' => 'Clean up your code. Don\'t use id selectors.'
               ),
               array(
                    'name' => 'HTML Code',
                    'id'   => $prefix . 'html_code',
                    'type' => 'textarea_code',
                    'desc' => 'Don\'t include any <HTML> and <BODY> tags. Try to keep your code simple.'
               ),
          ),
     );

)

It’s just that simple as building an array of all the elements. The script supports a few more kinds of input fields like radio boxes, check boxes, date/time picker, drop down options, etc. I use this script very often in my projects.

User registration

I wanted to have full control over the user registration. The idea was to create a form that people needed to fill out first and send to me, so I could verify if they were really designers.

To build the entire user’s registration process I used three WordPress plugins:

• Gravity Forms
• Gravity Forms User Registration Add-On
• New User Approve

In the first step, I created a simple “Request Invite” form using Gravity Forms plugin:

Next, I set up a new feed in the User Registration Add-On:

So far, so good. It’s been very easy to make these two things work. Now, everyone who fills out the “Request Invite” form is automatically registered in the WordPress system as a new user.

I needed a possibility to either “Approve” or “Deny” the requests. The “New User Approve” plugin does it for you. Before a new user is completely registered in the system, it goes under the “Users Pending Approval” box, where you can decide what you want to do with that user.

The last step in the user registration process was the customization of the email messages. To make this happen, I filtered the plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

add_filter( 'new_user_approve_approve_user_message', 'custom_approve_email' );
function custom_approve_email( $message ) {

     $message = 'Your custom email approve message.';
     
     return $message;
}

add_filter( 'new_user_approve_deny_user_message', '' );
function custom_deny_email( $message ) {

     $message = 'Your custom email deny message.';
    
     return $message;
}

The user registration process was complete.

WordPress admin panel customization

Customizing the administration panel was the last part of the theme development process. I did a few easy tricks to add a few personal touches to the WordPress system.

First, I customized the login page:

I created the login.css file in the main theme folder and added the following code to the functions.php file:

1
2
3
4

add_action( 'login_head', 'login_css' );
function login_css() {
    wp_enqueue_style( 'login_css', CHILD_URL . '/login.css' );
}

This let me use my own CSS in order to change the login page look. Check out the login.css file to see how it’s made.

Next, I removed some of the unnecessary menu items:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

add_action( 'admin_menu', 'remove_menu_items' );
function remove_menu_items() {
     global $menu;
    
     $restricted = array( __( 'Comments' ), __( 'Posts' ), __( 'Tools' ), __( 'Dashboard'  ) );
    
     end ( $menu );
    
     while ( prev( $menu ) ){
         
          $value = explode( ' ',$menu[key( $menu )][0] );
         
          if( in_array( $value[0] != NULL?$value[0] : "" , $restricted) )
               unset( $menu[key( $menu )] );
         
     }
}

Summary

Looking for solutions to your project problems may not be easy. Sometimes you need to be very flexible in using already-made plugins and mix it with your own code.

Before you start writing your own custom code, always make sure there is nothing like it already out there.

I skipped the theme styling process and Genesis child theme development guidelines in this post. However, if you have any questions about this part of the project, please ask me in the comments and I’ll try to answer all of them.

I’d like to present to you my personal project for all designers and typography lovers: typespiration.com.

Typespiration.com is a place where you’ll be able to find inspirational web font combinations along with ready-to-use CSS codes, color schemes and font families.

I came up with an idea for this simple website a while ago. If you read my blog regularly you’ve already seen my previous post “Start The Visual Design Process By Defining The Typography First,” where I explain why I believe that typography is the foundation of any great design.

Who is this website for?

First of all, typespiration.com is not for everyone.

If you’re a designer, this might be a great source of inspiration for your own projects. Some typographical ideas might be the foundation for your entire web design. You can quickly find the fonts that were used in the particular examples, download them and incorporate them into your design project.

If you’re a developer and design is not your best skill, you may find some ready-to-use beautiful typography examples. Simply copy the CSS code and use the suggested colors as a base color scheme. Now you can focus on your development while having a good-looking design theme.

How to use it?

The website is very simple and it’s still in its beta phase. Also, there are not that many typography styles added yet but you can still browse the current ones by going here: typespiration.com.

Choose the style you like and you’ll see the following screen:

1. This is a full-width demo.
2. Click to see full-screen demo.
3. You can quickly copy the entire CSS code of this example by clicking “copy to clipboard.”
4. Fonts used in this style. Click on the font to go to the source where you can download it.
5. Color scheme of this style.

Are you a designer? Join in!

If you’re a designer, you can join in and share your own typographical ideas. Fill out the “request invite” form and wait for approval. I’ll get back to you with a login/pass to your account within 7 days.

Once you submit your first style, it’ll appear on the home page. You, as a designer, will be listed in the “About” page and your profile (with a link to your Twitter and website) will be listed under each of your published font combinations.

My goal is to create a community of designers who want to share their ideas with others. Being listed on typespiration.com might help you get noticed and build relationships with other designers.

The biggest shifts in my life and career happened after Brian Gardner found some of my projects on one of the CSS galleries. Don’t miss your chance!

What’s next?

I’m planning to keep that website very simple and easy to use.

Once there will be more styles added, you may expect some extra “search” functionalities that will help you find the right font combination.

Also, I’m planning to have some exclusive bonuses for all registered designers. It’ll be worth it to be a part of this project!

Special thanks to Jason Weaver and Jonathan Perez for their initial feedback that helped me make this website better.

This is a simple guide for all front-end web developers who are not familiar with Adobe Photoshop to help you make your job easier.

For the rest of you who already know Photoshop, I have some tips and tricks that might help you improve your entire coding process.

I think web developers should know as much about design as designers know about HTML/CSS. The designers who send you their PSD usually spend hours on choosing the right colors, designing spacing, typography and all visual effects.

You need to know what’s really important while coding the website and how to use Photoshop in order to correctly take all that information from the design projects.

Here is what I’m going to cover in this guide:

1. Setting up the workspace – how to create an efficient environment for your work.
2. Spacing – how to measure all spacings.
3. Typography – how to take all information about used fonts and their properties.
4. Colors – how to easily take any color code that you can use in CSS.

1. Setting up the workspace

Because I do both design and web development I have two different workspace setups in my Photoshop:

Designer’s workspace

Developer’s workspace

Creating your own workspace is super easy. First, let’s see what panels you really need as a web developer:

• Layers
• Info
• Navigator
• Character
• Layer Comps
• Notes

Now, turn off all the other panels and leave only those that you need by selecting/deselecting items under the “Window” menu. Once you’re done and have positioned all the panels the way you like, go to Window -> Workspace -> New Workspace. Next, name your new workspace, for example “Development.”

Now you can switch between the workspaces using the drop-down menu in the right top corner:

2. Spacing

Here are some tips on how to correctly measure all the spacing.

First of all, let’s make sure we are operating on pixels. Turn on the ruler (Command + R or CTRL + R) and right click on the ruler to change the units:

Next, let’s turn on the guidelines (Command + ; or CTRL + ;) which might be very helpful. If the designer used the guidelines, you’ll see all the invisible borders that may help you to measure the spacings and define the entire website layout.

The best way to measure the spacings is to use the Rectangular Marquee Tool (M) and Info panel. You can select any area you want and then look at the Info panel to read the dimensions (in CS6 you can read X and Y right next to your cursor which is even easier and faster):

Press Command + D or CTRL + D to quickly remove the selection.

3. Typography

Respect the typography. Designers usually spend a lot of time planning all the font sizes and line heights. Make sure to take the right numbers and use exactly the same fonts in your CSS.

The easiest way to check the font size and line height is to use the Type Tool (T) and click on any text. Your Character panel will show you all the font info while editing the text:

In CS6 you can easily sort the layers by any kind. If you want to quickly see only the text layers, check a small “T” icon in the Layers panel:

4. Colors

There is only one tip I can give you to quickly pick the right hex number of the color you need:

Using the Eyedropper Tool (I), right click on any color you need and choose “Copy color’s hex code.”

Don’t worry about the “Copy color as HTML” option. You will probably never need it, unless you still use HTML 4.0… :)

Bonus

There are two external apps/plugins that I found useful:

Slicy

This app will let you quickly export single PSD layers to external files in PNG, JPG or GIF formats. It’s super easy to use and has many hidden functionalities (thanks to Brad Potter for pointing me to this app).

CSS Hat

This is a Photoshop plugin that will let you quickly turn layer effects into CSS3 that you can copy and use in your code. The plugin is not perfect and it’ll slow down your Photoshop while using it but it’s definitely worth trying (thanks to Travis Smith for pointing me to this plugin).

Summary

The web developer’s role is to turn the design into a working website while keeping all the design elements exactly how they were designed and approved.

It’s not an easy task since there are many differences between how something is designed and how you can style it in CSS. However, you always want to make sure it’s as close as possible to the original design.

Do you have any Photoshop tips that make your job easier? Share your thoughts in the comments.

This is a short story of my first “client” in the very early days when I started designing websites. I say “client” because I didn’t really receive money from that person (and I didn’t even ask for it).

However, I received something much more valuable. It’s an inspirational story I can share with you right now that has probably influenced my entire life.

Interested? Let’s see how it all started…

The book

I was very interested in software programming (especially C++) as a teenager. That was the time when the Internet wasn’t so easily accessible (at least it wasn’t in Poland where I lived back then). So, I had to buy some books in order to broaden my computer knowledge.

One of them was a 3-part book called “Symphony in C++“. I found this book recommended by many computer science students on the programming forums.

The book was written in such clear and easy to understand language that even a 14 year old boy could learn from it. I helped me a lot to develop my programming skills and write my first simple computer programs.

I offered service for knowledge

Pretty soon after that I needed additional sources to learn even more. I found another 2-part book by the same author called “Passion in C++” which was about more advanced techniques and object-oriented programming using C++.

These kinds of books were quite expensive in Poland, so I needed to figure out a different way to get them.

In the meantime, I started exploring some web design basics and learned HTML. At first, I built some very simple websites and did a little graphics work in Photoshop.

So, the idea was simple: I could contact the author and offer to design a website in exchange for the new books.

I didn’t think about asking for money. All I needed were these books, and besides, I felt like I was asking for too much as it was.

Then, I wrote an email to the author of the books…

Who was the author?

Here you might be surprised but it was quite difficult to find anything about the author. In fact, it still is. His name is Jerzy Grębosz (George in English – before you try to pronounce his Polish name).

Jerzy appeared to be a nuclear physicist who happened to know a lot about C/C++ — enough to write a few incredibly successful books. He is also an author of a number of publications in physics.

He’s an amazingly humble man. You won’t find any “About the Author” sections in his books. He holds a Ph.D. in nuclear physics but he never titles himself like this. All you can see in the book or website is just his name.

Also, he travels around the world looking for places that are not touched by western civilization. As a result, you can find many beautiful photo galleries from different places where he lived.

After my first email, he responded and asked me to call him “Jurek” which is a less formal form of his first name. He, of course, accepted my offer and in a short time we were ready to launch his new website.

That was my first experience in doing a job for someone other than myself. It was a great feeling to work with someone like him. I’m sure such a great experience with my first client had a big impact on my entire career.

Additionally, my first client was a man who inspired me not only by what he had achieved but also by what kind of person he is.

Pay time

I didn’t have to wait too long to get my books after I finished my work on Jurek’s website. I received the 2-part “Passion in C++” book with a special dedication on the first page:

“To my new friend Rafal Tomal —
author of my wonderful website.

Best regards, Jurek Grębosz”

I had to admit that working with Jurek was already like a big reward for me. However, I was also very happy I finally had the books!

The project

This website design may not look like any of my current designs, so don’t be surprised. I was 15 years old at that time and it was one of my first websites.

You can still find the live website under this address (it has an English version): http://www.ifj.edu.pl/~grebosz

In my previous post Making of: BillErickson.net Redesign I showed you the wireframe I created for my client. Many people asked me about the PSD I’m using to build my wireframes.

So, in this post, I’m going to share with you my very simple wireframe kit I’ve been using for a long time. I created it a couple of years ago and I’ve updated it many times since then. I always tried to keep it as simple as possible and avoid too many details.

Here is a quick preview of what this wireframe kit includes:

• Notes
• Images & video
• Form fields
• Headings, paragraphs and bullet lists
• Navigations
• Ad banners
• Common website elements like: search box, email sign up form, etc.

How to use it?

This is simple. If you have two monitors or a really big screen, it’ll be very helpful. I usually open a blank Photoshop document in one of my screens and the wireframe kit PSD in the other one. Then, I simply drag the elements I need from one document and drop them into the other one.

As you can see, all elements are black in my wireframe kit. You can easily change the background by managing the opacity of the element. This way, you can show that some parts should be more prominent or less prominent. Also, you can change the shape’s color by double clicking on the black square next to the layer name in the “Layers” panel.

Make sure to avoid too many details in your wireframe. I even try to avoid any text inside the wireframe graphics and I leave all notes in the yellow boxes on the side. The less detailed wireframe you create the more freedom you will have during the visual design phase. So, be careful to not limit yourself at this stage.

Here are some quick Photoshop hints on how to make your work faster:

• While holding the Apple or Alt key and clicking on the element you can quickly select the layer you need.
• You can quickly change the layer’s opacity by pressing 1 – 9 (0 is 100%) on your keyboard.
• Check “View -> Snap” and make sure you have checked all options under “View -> Snap to”. It’ll help you to better align the boxes.
• Create your own static elements by selecting a few layers and then choosing “Convert to Smart Object”.

Examples

Here are some examples of wireframes I created using this simple kit:

JayBaer.com

phoenixrealestateguy.com

Why Photoshop?

Yes, everyone asks me this question. Why am I using Photoshop to build wireframes?

I know, there are so many applications to help you build the wireframes and even let you collaborate on the same project with your clients or colleagues. I’ve tried many of these apps and I’m not saying they’re bad. Somehow, I always ended up using my wireframe kit and doing everything in Photoshop.

Here are a few advantages of using Photoshop:

• If you feel very confident in Photoshop, it’s just much faster than learning new software.
• You’re not limited to design elements offered by the software. You can create just about anything you want and decide how these elements should look. Then, you can bundle them into smart objects and use them again in other projects.
• You can use real pixel dimensions that you can later base your actual design concept on. Of course, the wireframe is not about pixel perfect layouts but it’s very handy if you can actually build your wireframes based on a 960 or 1140 template.
• If you have more than one wireframe page, you can keep them in separate layers and then use “Layer Comps” and “Smart Objects” to save your time.
• You can easily export it to almost any file format. If you want some quick feedback from your client, export it to PDF and your client can add his comments to the document and send it back to you.
• You can customize it and make your wireframes look original.

And here are some disadvantages of building wireframes in Photoshop:

• You need to spend some time to build your wireframe kit – looks like this is not a problem for you anymore :)
• It may not be that fast if you’re not a Photoshop ninja.
• The more complex design elements are not that easily scalable. You need to resize elements often by moving single vector points. That’s the only thing that bothers me while working on wireframes in Photoshop. It would be perfect if I could quickly resize the smart objects and prevent some elements inside it from scaling.
• Collaboration with other people on the wireframe might be more difficult. Only you and other people who know how to use Photoshop can actually edit the wireframes. I think this should go under the advantages ;)

Have fun!

I hope you’ll find my wireframe kit useful. I’d like to hear your opinions about using Photoshop for wireframing. What software do you use?

I was recently asked to design a new website for Bill Erickson – a WordPress consultant, an entrepreneur, and a founder of The Creative Space and BIL Conference. Bill is also a well-known developer in the Genesis framework community.

You may have already seen this project in my portfolio. I decided to write a quick “making of” article and explain the entire design process step by step.

My typical design process includes:

• Brainstorming and sketches
• Creating wireframes
• Choosing colors, typography and visual design style
• Designing the first home page concept
• Designing the sub pages
• Delivering the final design files

Of course, each of these steps is supported by conducting research, contacting the client, getting feedback, applying a round of changes, etc. However, in this post, I’m going to focus on some more important steps and design decisions we made.

Let’s begin…

1. Brainstorming

This is my first step of the design process. By this point, I’ve already gotten some project info and have gone through a bunch of questions/answers with a client.

I usually start the brainstorming with a pen and my sketchbook.

I didn’t go for any inspirations at this step. I didn’t want to influence my initial ideas with some other projects. So, I started with a few quick general layout thumbnails to help myself visualize the entire home page:

Based on that I tried to pick one, or rather, a mix of a few ideas and create one bigger sketch with some more details.

Also, at this stage I considered the mobile version of the site and made sure the layout I came up with would be easily responsive.

2. Wireframe

I never show any of my sketches to the client. First, I convert my sketches into a digital wireframe. I use Photoshop and my own wireframe kit PSD for this.

I drag and drop all basic elements from my wireframe PSD into the project. I’m trying to keep the actual dimensions of the page, sidebars, etc. These are not perfectly accurate yet but very close to what it will be in the final design concept.

This is the first home page wireframe sent to the client:

After getting some feedback from the client and applying some changes, we’re good to move to the next step.

3. Colors and typography

If you read my previous blog post, you know why I always start the visual design process with defining the typography first. In this step, I create a simple guideline of colors, typography and general visual design style.

That’s the moment when I open my browser and start searching for some inspiration. I’m looking for some other projects that might contain a style that would be close to the project I’m working on.

I knew that Bill was looking for something simple, clean, and minimalist and he also wanted to keep his current color scheme as well as similar typography set. I took his original color, fixed it a bit and combined it with some gray scale colors.

Next, I tried a few different typography combinations in the colors I chose and picked the one I liked the most:

In the last step, I created a simple guideline file using both the colors and typography I chose. I designed a sample headline, body text, button and a content box.

4. Design concept

This is my favorite part of the web design process – creating the first home page design concept. Based on the approved wireframe and my design style guideline I created this concept:

Also, that was the second moment when I sent the design update to the client. I want my client to see the typography and colors used in the actual design concept, so it’s easier to visualize how it all looks.

After some feedback from Bill and exchanging a couple more emails we made some changes to the original concept:

I’m really happy with the changes we made and as you can see we managed to find a good solution that both looked better and was exactly what Bill needed.

Of course, the project was not over yet. I was hired to design a few more pages like: Services, Blog, Contact and the landing pages.

5. Deliver the final project

Once all the designed pages were approved by Bill, I had to prepare the final package that included all PSD files and fonts used in the project. I always make sure my PSD files are cleaned up and that all layers are properly named and organized.

If you have any questions about my design process, please leave your comments below.

Also, I’d like to hear your feedback about this kind of blog post, and if you like it, I’ll post more “making of” posts in the future.

It doesn’t matter how good you are today. What really matters is how fast you progress and what steps you take every day to improve your design skills.

Recently, I tried to sum up my last several years of being a graphic designer in order to discover what really brought me to the level I’m at today. Nothing happens overnight. It takes a countless number of hours, plus practice and patience.

I tried to select five actions and routines I’ve been doing regularly for the last few years in order to become a better designer.

“Every artist was first an amateur.”

— Ralph Waldo Emerson

1. Learn to identify good design

If you want to create great designs, first you need to learn to recognize a good design from a bad one. It usually comes with experience. The more experienced of a designer you are, the faster you can perceive a better design.

You should train yourself in order to hone this precious skill every day.

The rule is simple: browse design projects every day. Start your day by going through the most recent design showcases and examining the work of other talented and experienced designers.

Study well-designed pieces and try to answer the question: “What makes it so good?” Focus on specific design elements (like navigation bars, search fields, buttons, etc.) and compare them with other examples. Try to guess why the designer made certain decisions. At the end of this process, sketch your own ideas as often as you can.

Treat your ability to identify good design like a muscle. Like every muscle, you need to train it to make it stronger and better. Don’t think it’s something you need to be born with. You can learn it.

Also, look around – there are great designs everywhere around you!

A list of great sources of beautiful designs and inspirations:

• Dribbble.com
• Creattica.com
• Designspiration.net

2. Study design theory

Everything moves so fast and if you want to be in the game, you need to know your stuff from the source. Read about new design techniques or trends. Study the design theory to find a sense in what you’re doing.

Don’t focus too much on how to achieve trendy visual elements in your designs. It’s very tempting to look into those “step-by-step” Photoshop tutorials. However, it won’t make your design skills better.

A good design doesn’t start in Photoshop, it starts in your head and on the paper. Understand the design theory first and add a visual skin later. Do your homework.

3. Have a sandbox

Create a place for yourself where you can try new things. Your own website or some other personal projects are usually a good place to start.

Treat it like an experiment and don’t be afraid of using unusual layouts or colors. Don’t settle with the first idea that comes to your mind. This is your playground and you’re your own boss. Have some fun with it and be creative.

If you don’t have any personal projects, create a fake one and pretend like you’re doing a job for someone. If you’re a beginner, those fake projects can be really helpful to build your portfolio and show off.

4. Improve your style

Sometimes a designer is like an actor and has to play different roles depending on the project that he or she is working on. However, it’s good to settle around a specific group of clients that we feel confident with and that fits with our design style.

For example, I definitely prefer clean and minimalist designs because I feel that approach is perfect for businesses, corporations and content-heavy websites. My portfolio is full of these kinds of projects and people usually know what to expect from me.

Try to find your own style that you feel good with. If there is a relatively big group of clients (even if it’s a niche) that finds your design attractive, you’re on the right track. Keep improving your design style and introduce new elements to every new project.

Think about your personal design style as your trademark. You want people to recognize your work and the best reward is when other designers try to copy you. It’s annoying but you can be proud of yourself!

5. Teach other people what you know

This is a very important step I’ve recently decided to take and started this blog. I always felt like. I was not someone who could teach other people because I’m still learning too. However, I discovered that sharing your knowledge is a great way to learn as well.

Writing design articles helps to organize your thoughts and review the knowledge you’ve already acquired. Also, it usually requires some research and examples, which can even lead to knowing the topic deeper and better.

Creating a blog is definitely a good idea and just another step you want to take if you feel like you’re ready for it.

Conclusion

These five tips are not steps that you should take and move from one to another. They are more like actions that you need to take regularly and repeat them over and over. Even if you’re an experienced designer and you feel like you’re on a really high level, you still need to study other design projects, refresh all the design theory, learn new techniques, improve your style and share with others what you’ve learned.

It might be difficult to objectively say if we’re making progress in what we do. If you love your design at the moment of creation and hate it next month when you compare it to your new projects, it means you are making progress. If you see a difference with every new project, it means you have made progress really fast and are moving in a good direction. Keep it up!

What are your routines that make you progress?

Some people say that they don’t need too much design because their blog is nothing more than just pure text.

What do they think web design is all about?

Well, it’s not all about fancy graphics, textures and flashy effects.

Design is every single character on your blog, a space between your paragraphs, an underlined link or your background color. Design is both what you see and what you don’t see. Design evokes emotions and can create unforgettable user experiences.

The heavy-content websites like blogs and online magazines require more design and are more difficult to lay out than any other kind of website.

Let’s see how a good design can help you to spread your content, attract a larger audience and improve the conversion – three crucial things for every content marketer.

Improve reading experience

You spend time and money on producing awesome content. You can write the most interesting articles on the web but nobody is going to read it if you use a light gray 11 pixels font on a white background. It really hurts.

A good design can make reading your content a very pleasurable experience and convince a lot of people to come back. Bigger font size, shorter paragraphs and funny/interesting illustrations can pique your reader’s interest and they will be more likely to share it with others.

Have ever read Jason Fried’s book Rework? You would probably be surprised how this book is designed. The chapters are very short and even the author admits that he removed a big part of the book content to make it as short as possible. Additionally, there are full-page funny illustrations and a lot of whitespace around the text.

It made a lot of sense to me and that was one of the best book reading experiences I’ve ever had.

Increase the conversion rate

Whatever your conversion target is, a good design can help you achieve your goal or multiply the results.

If you want to get more subscribers to your email newsletter, there are many crucial design aspects that you may want to consider. Every little detail may improve your results. Think about the sign up box layout, size, position and even colors or some graphical elements. Learn more about creating email newsletter boxes that work in my previous post: “Design the Email Newsletter Sign-Up Box That Works.”

Are you selling online products? You will need a good design to create promotional banners, landing pages and even the product design itself. If it’s an ebook, focus on the cover design.

A lot of people make their decisions based on how the product’s box is presented. You definitely want to make a great first impression with your product.

Define your visual brand

Branding is not reserved only for big companies. You’re never too small. You should keep a consistent look and feel between your blog, online products and an email newsletter you regularly send out.

The brand is not merely a logo somewhere in the corner. A good brand should describe the type styles, colors and even spacing between the elements.

Let your designer define your visual brand and use it everywhere. Be very specific. You don’t want to describe your brand color as ‘red’. Rather, use the exact hex decimal or RGB code that your designer can help you choose.

“It doesn’t matter, it’s just a red color.”

Well, it all matters! If you change your brand colors from website to website and product to product, it will create an inconsistent look and won’t evoke the same brand-feeling effect that you want your visitors to feel on their very first impression.

Can you imagine the “red” color of Target to be in different shades in different locations? You would probably notice a change like that. However, it’s always the same and this is why you feel so familiar with it.

All of these small details might seem to be barely noticeable but they’ll create a consistent look and feel of your brand to your visitors. You want to make your colors and type styles easily recognizable.

Summary

As you can see, design is much more than just pretty graphics. A well-designed blog can help you improve the reading experience and increase the conversion rate.

Moreover, you should look deeper and carefully design your own visual brand that will help you build trust and make your content recognizable.

Keep in mind that most people make their decisions based on their emotions and gut feelings. If you want them back, they need to feel good on your website. You can easily achieve this thanks to a great visual experience regarding your website and products.

Last but not least, I asked two well-known bloggers and content marketers how design helps them be successful:

Chris Garrett, www.ChrisG.com

“Rafal’s new design first of all gave me a more modern, professional first-impression, which is vital if you want people to stick around and take you seriously. The second boost was to the number of people who join my email list, which is my main way of sharing exclusive content with readers. Email sign up forms were intentionally located and designed to be appealing and highly visible, and have been hugely successful.”

Gregory Ciotti, www.sparringmind.com

“The biggest reason a lot of writers cast aside web design or consider it “not important” is that they are under this false assumption that their blog is simply a collection of articles.

It’s not.

Your blog is a user-interface, one that all readers have to interact with if they are going to read your content and (hopefully) take actions to buy something from you or subscribe.

Your site’s design is thus much more important than being a book cover (aka, “Don’t judge a book by it’s cover”) because it’s tied into how your content is read and interacted with.”