The menu I will be explaining is fully responsive and works with touch devices, so there is a little bit of jQuery code needed to make sure everything is cross browser compatible.

Demo

Here is what our menu is going to look like when we are finished. Resize the screen to see what the responsive version looks like.

View Demo

Requirements

• Ability to edit your theme’s functions.php file
• Ability to upload files to your theme’s directory.
• Basic understanding of CSS and PHP

Create a Menu in WordPress

Before we can start styling our menu, we need to first create the HTLM structure using the WordPress menu system. You probably already have a menu built in WordPress, but if you don’t head over to Appearance > Menus and create one. WordPress provides a easy to use interface to allows you to drag and drop menu items into a hierarchy. When you are done creating your menu structure, give the menu a name and then save it.

A Custom Walker Class

Before adding our CSS and jQuery to the menu, we first need to make sure that the HTML being outputted for the menu is nice and clean. I’ve created a custom WordPress Walker Class that does just that. The WordPress Walker Class takes the structure of your menu and then prints out the corresponding HTML. The Walker class below makes sure we have nice, clean HTML to work with and that our menu items have the correct CSS classes assigned to them.

To use this Walker class, simply copy and paste it to the bottom of your theme’s functions.php file. If you don’t see a functions.php file, then create one and paste the code in.

class CSS_Menu_Walker extends Walker {

  var $db_fields = array( 'parent' =>; 'menu_item_parent', 'id' => 'db_id' );
  
  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }
  
  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }
  
  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
  
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = ''; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    
    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'active';
      unset($classes['current-menu-item']);
    }
    
    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' =>'_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-sub';
    }
    
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    
    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
    
    $output .= $indent . '<li' . $id . $value . $class_names .'>';
    
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    
    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'><span>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</span></a>';
    $item_output .= $args->after;
    
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
  
  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}  

Print the Menu

Now we need to print out our menu using the wp_nav_menu() function. Where ever you place this next bit of code is where you menu will be printed out. I’m using one of the default themes so I’m printing my menu in the header.php file. This will be different for you though depending on where you want your menu to show up.

Using PHP we will pass this function the parameters of our menu so that it can print out the HTML structure. The ‘menu’ parameter is the name of the menu you created in WordPress. The ‘container_id’ will add an ID to the menu’s containing DIV. The ‘Walker’ parameter is telling the wp_nav_menu() function to use our custom WordPress walker class to print the HTML.

<?php 
  wp_nav_menu(array(
    'menu' => 'Main Navigation', 
    'container_id' => 'cssmenu', 
    'walker' => new CSS_Menu_Walker()
  )); 
?> 

Once you have placed this code in your theme’s template file, save the file and then refresh your site in the browsers. We have not added any styles or jQuery so you should see a plain HTML list being printed out like the one below.

The CSS

Now we need to add the CSS styles to our menu so open up your themes CSS file. It might be in a folder called css/styles.css or just a file in the root directory of the theme. I’ll break up the CSS to explain it a little bit, but you can also skip ahead and just copy and paste all the code in at one time.

Notice that we are using CSS ID that we specified in the wp_nav_menu() function, #cssmenu.

This first bit of CSS takes care of the browser resets so that everything is uniform. We are also using the free Google Font PT Sans that we are importing at the top of our file.

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
#cssmenu {
  background: #4cb6ea;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  font-family: 'PT Sans', sans-serif;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;  
}

This next chunk of CSS will take care of the majority of our menu’s styles. I wont go over it all in detail, feel free to ask questions in the comments about any part that you don’t understand.

#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#cssmenu ul:after,
#cssmenu:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 1;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 2;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 170px;
  padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: #4cb6ea;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #4cb6ea;
}
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu > ul > li:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 0;
  background: #ffffff;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: '';
  background: #ffffff;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 14px;
  top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: '';
  border: 4px solid transparent;
  border-top-color: #4cb6ea;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
  top: 21px;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  padding: 15px 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}
#cssmenu > ul > li {
  width: auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
#cssmenu > ul > li > ul > li {
  width: 170px;
  display: block;
}

If everything has been done correctly, your should have a completely functioning drop down menu. If your menu doesn’t look like the image below, go back and double check your CSS styles.

Now that we have your basic menu styles in place we need to create the CSS styles that will take effect for mobile devices. This is the responsive part of the tutorial. We will be using Media Queries to specify which styles kick in and at what screen width.

@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  #cssmenu > ul > li > ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu.align-center > ul > li {
    display: block;
  }
  #cssmenu > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul > li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }
  #cssmenu ul > li:after {
    display: none;
  }
  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
    display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #ffffff;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover > a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }
  #cssmenu #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }
}

We wont be able to see our responsive styles until we add a little bit of jQuery. So lets do that first before checking our menu.

Minimal jQuery

Next we will need to add the small amount of jQuery below to one of our themes script files. Almost all WordPress themes use jQuery these days so just find the file called script.js or possibly functions.js and paste the code in. Notice we are using the #cssmenu ID again to target our menu.

$( document ).ready(function() {
  $('#cssmenu').prepend('<div id="menu-button">Menu</div>');
  $('#cssmenu #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }
  });
});

Test it Out

Save all your files and go back to your browser. To test the responsive styles, resize your browser window to less than 800px. Your menu should look like the image below:

That’s it! If everything was done correctly you should have a functioning WordPress responsive drop down menu.

Troubleshooting

If your menu doesn’t seem to be function correctly, or it looks a little off then it is possible you are experiencing residual styling from your WordPress theme. This means that there are other CSS styles in your theme that are conflicting with our menu styles. The only way to fix this problem is to track down the other CSS styles and remove them. Your best bet is to use the Firebug extension for Firefox and inspect the CSS styles manually. Once you find the conflicting styles remove or delete them.

The post WordPress Responsive Drop Down Menu Tutorial first appeared on DesignDisease | Web and Graphic Design Blog.

For your design inspiration today, we take a look at a selection of standout artwork from some well known and more obscure names in the music world and explore the images, typography and talent it takes to translate their sounds into a striking piece of artwork.

And You Will Know Us By The Trail Of Dead

This wild alt-rock outfit, hailing from Austin in Texas, are known for their theatrical live sets, which often result in most of their equipment being destroyed on stage. The chilling image of the skeleton enigmatic of films such as the Witchfinder General and other rural horrors such as The Wicker Man and simply, yet effectively, sums up their chilling name. Similarly the blood red colours and simple typography is reminiscent of films from the early 1960s period. In its colour scheme, simplicity and boldness this poster, designed by James Flames, is a brilliant visualisation of the ethos, musical style and mood of the band.

Brain Jonestown Massacre and Primal Scream

This poster, designed for Brian Jonestown Massacre’s 2009 double-bill with Primal Scream at Club Nokia in Los Angeles, uses typography and illustration to give the psychedelic late 60s a burst of new life. Similar to earlier artwork for bands such as The Grateful Dead and The Byrds, it clearly identifies the two bands major musical influences without falling into the realms of pastiche thanks to a clean colour palette relatively simple illustrative style.

Belle and Sebastian

This Glasgow-based indie-pop band takes its name from the popular 1965 French children’s book by Cecile Aubry. In the use of typography and iconic illustration the artwork clearly tips its hat to Belle and Sebastian’s Gallic origins. Designed to promote their 2010 American tour, it’s a loving homage to French New Wave cinema production, promotion, and the iconographic approach which helped to define French cinema during the late 1950s into the 1960s. The influence of Saul Bass, whose iconic style helped to characterise Hitchcock’s promotional material, is also in evidence in the stark monochromatic stripes, the stylised pen nib and the simple colour scheme of black, white and red.

The Shins

Designed in 2006 by Power House for their 2006 gig at the Crystal Ballroom in Portland, this poster takes the theme of Christmas as its starting point and fuses it with a typically East Coast lo-fi twist. The bleached out colour palette is in check with the band’s earlier albums Chutes too Narrow and Oh, Inverted World, both of which feature a similarly minimalist design-style. The white-out baubles and blanched typography lends a hazy feel to the work, and perfectly accentuates the band’s dreamlike, summery sounds in contrast to the festive theme of the December billing and Christmas conceptualisation.

With the digital era at its peak, it’s clear that poster design still lives on, there is nothing more nostalgic and liberating then a good old fashioned poster.   If this post inspires you to go out and make your own posters, I usually print my posters with YouPrint.com. 

The post Inspirational Gig Poster Design first appeared on DesignDisease | Web and Graphic Design Blog.

For designers who want to create a start-up, finding the right advice on the flooded internet can be overwhelming. We have come up with advice to help get your design start-up off the ground!

Get a good name

The first part of building a successful design brand is coming up with a good name for your company. It should be memorable, easy to spell and easy to find in Google search. It should be classic, rather than trendy, since you don’t want to have to re-brand your company every couple of years.

Create your brand story

These days, brands have to appeal to people’s emotions as much as they fill people’s needs. That’s why, once you have a company and a name, you need to clarify your brand story. Your brand story could be that you are the little guy, trying to make it in a big industry. You could tell the story of your struggle to set up your company, since people love stories of struggle, triumph and overcoming hurdles.

Create a brand design

Once you have determined your name and brand story, it’s time for the design process to begin. Be sure you get a consistent design: your logo, web site, stationery, ads and even your reports and presentation slides should all have a consistent look to reinforce your branding.

As a Start-up company it’s important to work with as little overheads as possible, if you plan to design and develop your own website, there are many online tools such as the whoishostingthis.com web host comparison tool and the design market place 99 designs that can help you cut costs on creating a website.

Distinguish yourself from your competitors

If you haven’t thought of this already, you need to define your unique selling point, also known as your USP. Is there a gap in a market that you are seeking to fill? Is there something you can do to make your design company completely unique? Is there a trick your competitors are missing? What will client get from you that they won’t get elsewhere?

Once you’ve determined what makes your company different, you should condense that into one sentence. Make it clear and simple, and make it easy for potential customers to discover your USP.

Now it is time to truly set yourself apart from your competitors. Compare your prices, trustworthiness, value for money or even your ethical standards to theirs. You don’t have to bad-mouth your competitors to do this. Simply point out what you do, and leave it at that.

Build your brand visibility

Now it is time to get your brand in front of the right people. Identify your most profitable clients, then figure out which channels you need to go through to reach them and how frequently you should try to connect with them.

Establish your online presence. Buy a .com, .co.uk, or equivalent national domain. Anything else, like .org or .net, doesn’t seem as professional at first, and it will take longer for people to take your brand seriously. Then get the social media profiles that you need. Don’t get a social media profile just because it is there. Facebook and Twitter are not necessarily going to provide a firm return on your investment, so they may not be worth your time. On the other hand, not having profiles might make you look less professional.

Start establishing your credibility. Do this by making connections between your company and established companies or respected individuals, especially when you are discussing the work you have done. If you can get recommendations from them, that is even better. You can also establish credibility through quality research that you publish on your website and through your social media profiles. This can be research you have done on your own, or you can hire a professional company to conduct a survey on your behalf. You can also participate in industry conferences, and try to get speaking engagements at them.

To publicize these efforts, regularly publish newsletters and press releases. You can also get some publicity by participating in and sponsoring charity events or activities. If you can get your company name in the programs and ads for the charities, as well as the press surrounding the events, you get some valuable publicity and your brand becomes more visible.

If you do all of these things, you should have a well-established design brand in practically no time.

The post Branding and Start-Up Tips for Designers first appeared on DesignDisease | Web and Graphic Design Blog.

No matter what kind of designer you are or what kind of office you want, you need some space to doodle and let your creative mind free. Crucial to that blank notebook, ready to spark the imagination, like the Walls Notebook, which features photos of blank walls.

A clean desk is a happy desk, and a clutter-free space will leave you free to concentrate on your work. An organizer like the Pen Zen desk organizer will allow you to story all your pens and pencils, whatever their size, in an attractive, orderly way.

The Uten.Silo wall organizer is a classic example of great product design. You can use it both as inspiration and as a place to store your various bits and bobs.

Even in this increasingly digital world, you will have to open a letter at some point. Use the Stila paper knife to stylishly save your hands from paper cuts.

The Munny vinyl doll might seem like just a toy, but like the notebook above, it can open up creative channels. Like the wall organizer, it is a design classic. And this seven-inch version gives you even more space to doodle.

Everyone needs an old-school in tray. That’s just a fact. But it can help designers keep their papers in order without looking too corporate.

The Sharpie Liquid Pencil is not exactly cheap, but it is amazing. The liquid graphite filling goes on paper like ink, is erasable like pencil and after three days, is permanent like permanent marker.

When you have a lot of gadgets, keeping track of cords can feel like it takes up the better part of an afternoon. Use something like the Cordies cable organizer to keep all your cords tidy and in place.

It might not be the most polite of boxes, but when you have a lot of junk you need to keep track of, the Crap storage box is exactly where it should go.

How many times have you stared at your staple remover, imagining the fantastical creatures it could be? Well, Jac Zagoory took that idea and ran, creating a series of stapler removers in the shapes of animal heads including this majestic lion head.

A file cabinet is a necessary addition to any office, and this one is ideal for the designer drawn to minimalist shapes and modern pops of color.

The Capisco chair may seem like an ordinary, ergonomic desk chair, and in most ways, it is. But it has a feature unlike any chair out there: you can sit in almost any position comfortably. Do you want to sit with your side against the back of the chair? Do you want to swing it around and sit in it backwards? Do you want to climb all over it? This chair is designed to handle it all.

If you need to be able to draw with flexibility and accuracy, you need a free form ruler like this one. As you draw, it keeps track of how long you’ve drawn, so you know the exact length of whatever you’ve drawn.

An angled lamp always comes in handy, and few mix style with function quite like this Carpenter chrome lamp.

The Aakkoset bookshelf is not exactly cheap, but it is a heart-stopping way to keep your books and reference materials organised. It can even act as a room divider, if you want a gorgeous way to mark out your home office space in your flat.

Sometimes dealing with vague briefs, incoherent client demands and conflicting feedback can be too much even for the most patient designers. The infectious Disease stress ball is a tactile way for you to get the bad feelings out without getting in trouble. Plus, the color combinations are pretty cool.

As a designer, you really can’t have too many ways of storing inspirational bits and bobs, various pens and pencils and other important whatnots. Small wooden drawers like these can keep the miscellaneous stored away nicely.

If you like to have a cold beverage while you work, this USB mini fridge is great. Plus, it looks like an old timey ice box, which is charming.

Why have boring yellow sticky notes when you can use Talk to the Hand sticky notes? They are a great way to take down messages or quick notes, and the fact that they will remind you of school days when someone would write their number on your hand is just a bonus.

Seriously, a designer can’t have too many interesting storage options. Small Lego storage boxes are a great way to keep those pedestrian office supplies you still have to use out of your direct eye line.

Good luck with going back to your old desk without getting at least one of these things, designers!

The post 20 Office Supplies Perfect for Designers first appeared on DesignDisease | Web and Graphic Design Blog.

The Redbox PSD template looks like this:

Here is the tutorial on how to make a template like the RedBox:

Step 1.

Open a new file (file > new) 1400 x 1600 pixels

Step 2.

Create 2 vertical guides (view > new guide) 1 at 200px & 1 at 1200px. This is the centre and guides of your design.

Step 3.

Using the rectangle marque tool change the style to fixed size at 1400 x 120 pixels.

Step 4.

Fill using paint bucket tool the margue box with colour #2A2E39

Step 5.

Add your logo to the left guide in the new header.

Step 6.

Add your navigation to the right of the page using the type tool.

Step 7.

Create a 200 x 200 box using the rectangle marque tool and postion under a navigation as a drop down.

Step 8.

Fill the box with colour #e74e4e then add your sub navigation with type tool.

Step 9.

Add your main banner image sized 1400 x 400 and position under the header.

Step 10.

Create a box using the marque tool, position over the banner and fill with colour #e74e4e.

Step 11.

To make the intro box transparent change the opacity of the layer to 80% on your layers palette.

Step 12.

Add your intro text into the transparent box.

Step 13.

Create 4 new vertical guides at 500px, 550px, 850px & 900px. These are splits for your 3 services content.

Step 14.

Add a title, icon and text in between each of the 3 guides.

Step 15.

Add 5 portfolio images sized 250 x 220 and line up horizontally across the page, do the same again underneath to give you 10 portfolio images.

Step 16.

Using the marque tool add a 1400 x 200 box and fill with colour #B6B6B6 then position under your portfolio images.

Step 17.

Add your clients title with type tool and position to the left.

Step 18.

Add your left & right arrow icons and colour overlay (layer > layer style >colour overlay) with #e74e4e.

Step 19.

Add your client logos to fit inbetween the arrows and colour overlay (layer > layer style >colour overlay) them with #FFFFFF.

Step 20.

Using the marque tool add a 1400 x 100 box and fill with colour #2A2E39 then position under the grey clients background box.

Step 21.

Add your footer links and copyright using type tool to the left.

Step 22.

Add your social media icons to the right and colour overlay #B6B6B6 if necessary.

I hope you enjoyed the tutorial, if you wish to download the RedBox template then click the link below.

Download the Redbox PSD Here

The post Create a RedBox Website Template: Tutorial & PSD first appeared on DesignDisease | Web and Graphic Design Blog.

Have you heard of reseller hosting? A popular choice of many webmasters, web designers and small businesses, plenty of confusion still exists around what reseller hosting actually is and the benefits it has for anyone looking to host multiple websites. If you’re familiar with reseller hosting already, this article will serve as a useful reference/checklist to make sure you’re getting all of the features you need from your reseller package.

So what is reseller hosting?

Reseller hosting is a term used to describe hosting multiple websites under a single, larger, web hosting account. A reseller hosting client (i.e. someone that buys reseller hosting) generally buys a reseller account to become their own web host and offer hosting to their own clients, or just to consolidate multiple websites of their own under a single account. The latter is becoming increasingly popular among webmasters who maintain a number of websites as one reseller account means it is a single monthly fee, a single renew date and generally less hassle than renewing multiple shared accounts.

Most reseller hosts don’t mind if you use the account to host your own websites, or to offer hosting to your own customers.

Reseller Hosting – different platforms

A number of different reseller hosting platforms exist. However, one platform stands leagues ahead of the others for simplicity, ease-of-use and number of features. This platform is the cPanel / WebHostManager (WHM) platform. A couple of screenshots give you a sneak preview below and you can find out more at www.cpanel.net.

cPanel control panel

WebHostManager (WHM) control panel

The cPanel / WHM system is two fold.

WebHostManager

WebHostManager is the reseller control center. You use WebHostManager to add/modify/remove/manage each of your resold accounts. The screenshot above shows how easy it is to add a new account. WebHostManager also gives you, the reseller, the chance to login to your client / resold accounts’ cPanel, change their password, check their diskspace usage and more. Each account you create through WHM comes with it’s own cPanel login.

cPanel

cPanel is the account control panel, or client control panel. Every full account you create comes with it. It allows account owners (whether that’s you – the reseller, or your client) to manage all aspects of the hosting account. These aspects include email, FTP, databases, passwords, WordPress and more. There’s way too many features to list here so check out the fully-functional live demo at http://cpanel.net/demo/

Other important reseller hosting features

This list is by no means definitive, but it should give you some ideas of what to look for when choosing your reseller host

• Personal nameservers – these add a degree of professionalism to your reseller business. Personal nameservers look like ns1.yourdomain.com and ns2.yourdomain.com. You can give these to your clients and these will also show up in any WHOIS searches on domains pointed to your nameservers
• Free account transfers – stuck with another, poor-quality web host? Some reseller hosting providers offer a free account transfer to help you migrate your accounts off the old hosting company
• 24×7 support – an important requirement for any reseller. You need to know that your service provider is there to give you help, when you need it. If your client has a problem that you can’t solve and you need to speak to your reseller host, it is imperative they’re there around the clock and answer you quickly so you don’t keep your client waiting
• Billing software – many reseller hosts now include free billing software to allow you to easily manage and bill your own clients. Two popular choices of reseller billing software are WHMCS and Blesta
• Credit card processing – some reseller hosts also offer free or discounted credit card processing software, allowing you to easily accept payments from credit cards. Paypal and Google Checkout are both popular and free ways of taking payments, but you really need to take credit cards to add a degree of professionalism to your operation. Popular credit card providers include 2Checkout.com, Charge.com and WorldPay.com

Good reseller hosts

This wraps up the first part of our reseller hosting guide. We’ll be posting a follow up soon. But lastly, we’re sure you want to know who we recommend you look at for reseller hosting? There’s plenty of options around and Google “reseller hosting”, “reliable reseller hosting” etc to get a better idea. But designdisease.com is hosted by WebHostingBuzz and you can check out their reseller hosting here. The also offer UK reseller hosting for those in the UK /Europe.

Good luck with your journey into the reseller hosting world!

The post Reseller Hosting and what to look for first appeared on DesignDisease | Web and Graphic Design Blog.

Server technology advances at a breathtaking rate each and every year. Server manufacturers focus on increasing raw performance while reducing power usage; in today’s world, energy costs are only ever going to rise.
As part of the launch of our new UK dedicated servers, our design team built a 3d image showing just what goes in a typical server. Each of the key core components is highlighted and we’ve explained the technology we use. DesignDisease is hosted on a WebHostingBuzz dedicated server, so this image is particularly appropriate.  I’ll let the pictures do the rest of the talking :)

The hardware components that make up a dedicated server

The post What makes a web hosting server? first appeared on DesignDisease | Web and Graphic Design Blog.

With the massive growth in technology and increase in the number of platforms, there is a huge increase in the number of people starting technology and internet based businesses . One thing that has been common to all businesses is the need for a creative and responsive web developer – someone who understands exactly what they need and how they need it. And someone who delivers on time.

Entrepreneurs and small business owners are known to browse the internet looking for that awesome developer who would develop their dream website and give the desired results.  Of course, there is no dearth of web designing projects out there on the internet. So how do you as a developer, get more clients off the internet? How do you make sure you stand out from other freelance designers?

The answer is very simple – content marketing. Providing killer content through regular blog posts, guest blogging, weekly podcasts and participating in online communities can help you get your name out there. And here’s why:

• Let them find you – Building a strong online presence by sharing what you know in the form of maybe a blog or your own, or as a guest blogger or as a paid writer for a publication is what will drive your clients to find you and more importantly, trust you.
• Kill the Competition – I think that if you are a web designer or a developer who understands how to market your content online, you would have a tremendous advantage over your rivals who are trying to use conventional methods to sell their services.
• Impress the Clients – There is a possibility that your future client does not understand a thing about web design. They do not know what HTML5, Web2.0, XHTML, W3C Standards etc and which technology would suit them. What they would understand is conversion rates, e-mail lists and sales. Writing about such stuff and telling them how web designing works makes you sound competent and makes them want to work with you.
• Build your brand – What happens when people need to get work done and they hear about someone who is a recognized expert in that particular field? They want to hire that person. Essentially by creating content that connects with clients and web developers alike, you have gained exposure and people are talking about you. You have created a brand for yourself.
• Get paid while you are at it – Several tech publications are on the lookout for technology experts who can write and educate their readers about web development and news from the world of website building. As a guest blogger, you could easily get paid while sharing your knowledge and get paid a decent amount.

And as they say, “Coding don’t cut it anymore”. Talking to your audience will help you develop a connection with them. Designers need to be more than just code-developing geeks. The clients think of you as the digital gurus and having a solid digital presence is what would be expected out of you.

The post How to Get More Clients as a Web Designer/Developer By Sharing What You Know first appeared on DesignDisease | Web and Graphic Design Blog.

Here are five tips on how to jazz up your articles and blog posts with beautiful and provocative photos that will grab your audience and keep them:

Show Life

Puppy picture

You might be used to thinking about pictures as a way to capture a person posing in place. But try to broaden your horizons and approach your photo selection as a photojournalist looking to capture a specific moment or feeling in time. The more unique the moment, the greater it will resonate with you and your audience. Photos shouldn’t be an afterthought before publishing; active and creative images will make a discernible difference.

Sprinkle Color

Colored lips picture

You have just a few seconds to really catch someone’s eye as they land on your page or scroll through. Having a picture front and center for that reading experience is a start, but selecting a photo that grabs readers by their optic nerves is a surefire way to get them to stick around. Certain colors appeal to us in different ways. Looking at your article, think about what emotion you’re hoping to rouse up. And then choose a photo bursting with colors that will reflect that. It’s the first impression that matters most, after all.

Think differently

Small boy picture

Do something unexpected. Too often, people just throw in a picture of a horse atop an article related to horses. It’s easy, but it’s also easy to get lost in the mix with the other horse articles out there. Ask yourself what the post is really about and then choose a picture accordingly. In the horses example, if it’s about an epidemic, show a weak horse. If it’s covering a prized horse, make sure you pick an image of a horse wrapped with a ribbon. The accessories within the picture drastically change the meaning from one picture to the next.

Go big

Elephant and dog picture

Every article should have a big, compelling image at or near the top. If someone passing through your site sees too much text toward the top, they will likely leave. It’s aesthetically pleasing to see a banner image right away — just look at how Facebook and Twitter redesigned their profile pages. Editors from popular sites have recognized the gains they get from abiding by this principle. You should follow suit and default to include a big photo that will speak loudly for the article.

Go small

Chihuahuas picture

For longer articles, you should discover new ways to keep the reader engaged. Visual aids like charts and jumpquotes go a long way, but they might strike the wrong chord for the less intellectual crowd. No matter, it’s essential to break up the text from time to time. Float a headshot-sized image to the right of the text midway through the article. It’ll make the long text much less daunting and help the reader get through to the end. You can also use these to illustrate your individual points along the way. Once you have a focused and happy audience, it’s up to you to keep them there. And a series of smaller stock images throughout will do the trick.

The post 5 Tips on Picking Great Images for Your Articles first appeared on DesignDisease | Web and Graphic Design Blog.

A datacenter is a facility that is designed and built specifically to house computers, storage arrays, and telecommunications (networking) systems. Some datacenters have incredible security measures to protect what is inside, and the largest datacenters are known to use more electricity than entire towns. Exact locations of datacenters are generally kept secret for security, but here are some interesting facts about them.

Via: WhoIsHostingThis

The post A Look At Awesome Data Centers (Infographic) first appeared on DesignDisease | Web and Graphic Design Blog.