5 Techniques that Will Take your Design to the Next Level

1. Add Gradients

Gradients can add a lot to web design without overpowering it. They also add depth and a modern appeal. Gradients can come in a variety of forms, too.

The example above uses gradients all over the place. From the top bar, to the logo, and throughout the various types of content. As you can see, there are different variations of gradient too. The gradients with the deepest contrast (Fallscreek, Hotham, and Hakuba) create a place for the eyes to focus.

Gradients can b added very subtly too. The above design is far from a sleek style, but gradients are still present in the logo and site title, and in various icons throughout the design.

This illustrative design uses slight gradients throughout the illustration, and adds detail with gradients to the navigation and various icons.

2. Add Lighting Effects

A technique that is sometimes similar to gradients is lighting effects. Glowing, spotlight, or other lighting effects can have a significant impact on the overall design. Again, lighting effects add depth and visual appeal, but with a bit more pizazz. These effects are often times the main feature, or highlight the main feature, in the overall design.

The above design features various gradients, but a main thing you’ll notice is the ’shine’ effect in the background. Two simple gradients, and this line have created a very realistic look for this website. On top of that, similar lighting effects were used in the featured icons.

As one can see, the main lighting effect resembles an underwater scene, and can be related to the site title. That lighting effect is complimented with the semi-transparent content area. Also notice the slight lighting effect to the logo design. Adding subtle lighting effects on top of the main effect can add a lot of appeal as well.

The background lighting effects are obviously not the only feature making this design amazing. It is a great example, though, of how lighting effects can add to any part of the design– whether it be the whole design, a logo, or in this example, an illustration. Nick La’s post, Vector Polishing Techniques, goes over these various techniques that he has become famous for, many of them being lighting techniques.

3. Use Image Detail

Many designers will create a main header or background image, and close down Photoshop for the rest of the design process. This is a huge mistake. Adding small image details to buttons, headers, and specific content areas can add a lot of detail to a design, creating more appeal and focus.

The travel website above uses image detail in various spots. For example, the navigation, menu background, borders, and even the submit button for the the search bar.

The above is a great example of how blog design can benefit from extra detail. The design above features a lot of whitespace and is very simplistic. The extra detail on the post date, comment icon, and color added to the active navigation element in the above screenshot already adds so much. If you visit the site, you will also notice details in the search bar, other navigation elements, etc.

This design adds image detail to the headers, a very common and effective trick when using this technique. One will also notice icons and unique borders used throughout the design. The footer border is also very colorful, creating a great separation point.

4. Declutter and Add Whitespace

This doesn’t necessarily mean every design should resort to the minimalistic style. Any design style should pay attention to the amount of whitespace present in the design. Also decluttering or removing any content or elements that are not needed in the design will help bring attention to the elements that are really needed– as well as leave more room for whitespace.

The extra spacing throughout the design aid in the visual hierarchy. One of the first components the visitor’s eyes are lead to is the navigation area. This area has a significant amount of whitespace around it. As I stated in A Guide to Simplistic Web Design, whitespace frames whatever it is around, and adds focus to the internal elements.

Be sure to consider spacing between the large, main components in the design as well. Drastic spacing between the content, logo, and navigation bar remind the visitor that they are separate entities, and allow the visitor to focus on each individually.

For websites that require a lot of content on the front page, even when decluttered, a smart use of spacing between paragraphs, headers, and images can create a content-heavy site that doesn’t look too busy.

5. Add Dynamic Effects

Most websites aren’t ready to enter the world of 100% flash, but adding smaller dynamic effects with, for example, jQuery, can create a sense of professionalism and aesthetic appeal that is bound to amaze.

There are a number of ways a designer can add a dyamic feel to a design, but because JavaScript is the most common way to do this, here are a few well-known techniques that are used.

jQuery Tabs

Carousels

Flash-like Menus

Lightboxes

Fancy Forms

What are some of your techniques?

Please share some of your own techniques with design, or share if any of the above techniques helped you out!

Interview with Jacob Gube of SixRevisions.com, a Web Design and Development Blog

1. Let’s begin with the basics. Could you tell us a little about yourself and your blog?

I’m Jacob Gube (pronounced as “goobeh”): a 26 year old web developer, author, and the Founder/Chief Editor of Six Revisions, a web publication that shares useful design and development information and tutorials. My passion in life is creating (and writing about) awesome websites and web applications. I also like taking pictures as a hobby; something that I’ve been neglecting because of all the things going on right now.

2. Is being a professional blogger your full-time job, or do you work on other projects as well? Do you have any other websites that keep you busy?

I am not, and never will be, a full-time blogger. To be effective at writing about the topic of design and development, I have to practice the stuff I write about on the site. I have a full-time job as a Web Developer specializing in distance-learning education and online training sites and applications.

As for other websites: I don’t have any other web property besides Six Revisions, though I do work closely with the people over at Smashing Magazine, so if there was any other site keeping me busy — I’d have to say it was them. Vitaly Friedman, Co-Founder and Chief Editor of Smashing Magazine, is a friend of mine and is a person I take a lot of advice and inspiration from, whether its in my writing or what TV shows are worth watching. He always manages to find ways to improve my writing and makes me think of things I’ve never thought of before. I’ve also learned a lot about how to become a good publisher/editor from him. Having written for various other online publications, I would have to say Smashing Magazine is the best place to write in.

3) It’s easy to see that Six Revisions is very popular. How long did it take to get the following you have now, and how did you do it?

Six Revisions has been up for a little less than a year and a half, and the journey from the start to what it is now has been a life-changing experience for me. How did I do it? I think the main recipe is to write about what you know and to let your passion, knowledge, and experience about the topic show in the stuff you write. I think that’s what makes people come: they want to read about design and development not from a professional writer, but from someone who’s just like them.

When it comes to contributing writers — I typically recruit and publish authors that write not as a profession, but rather, as a passion. For example, Jan Cavan from Dawghouse Design Studio, who writes Photoshop tutorials for Six Revisions, is a design agency graphic/web designer whose work has been featured in .NET magazine. Tyler Denis from Denis Designs and Matthew Heidenreich from PSDVIBE are freelance designers who share their Photoshop expertise on Six Revisions. Angela Rohner, who puts together these beautiful design showcases, and who runs my favorite web design gallery (TheBestDesigns.com), is an Art Director and front-end developer for a design studio. Francisco Inchauste, the brilliant mind behind Finch, is a UX designer. Phil McClure from theRailWorld.com, who writes about RoR, is a software developer. These are just a few of the great and talented people who write stuff for Six Revisions readers — they’re real professionals who just happen to have a knack for writing.

4) As a blogger myself I know how hard it can be to keep focus. How do you stay motivated to keep working on Six Revisions, and creating new posts almost every day?

When you receive emails and comments from readers thanking you for the stuff you share, whether it be a cool slideshow jQuery script, a freebie set of textures, or a showcase of designs that’s inspired them in their own work, that is motivation enough to keep going. I have an obligation to the readership to provide them with useful information on design and development.

The key is to have a love for what you write about, otherwise you’ll run out of ideas and you’ll never put the time you need to keep a regular posting schedule. The topic I write about is what I think about before I go to bed, and the first thing I think about when I wake up – it’s sad, but true, and you know what, I don’t mind it one bit. If I were to love something else, like spelunking or baking cookies, even if I worked as a web developer, I would write about those topics instead.

5) When did you first become interested in the world of web development, design, and blogging? What inspired you to do what you’re doing today?

Let’s start with development first. I started as a hobbyist software programmer making command-line games — this was about when I was 14 years old. About a year later, I learned about HTML. It must have been HTML 2 or 3 (probably 3), and there wasn’t really any CSS back then, so just inline properties for things like background color, widths of elements, and table layouts.

Let’s jump ahead to design. When I was about 17 years old, I grew an obsession towards Photoshop; I saved up all my money for three months to purchase my very own copy. I started off professionally as a freelance graphic designer, more specifically, a brand identity designer for small businesses and start ups — this is about the time I was able to hone my skills using Illustrator (you can see one of my early vector illustrations in college on Flickr).

But I always loved doing web-based stuff so I transitioned into web development, towards PHP and client-side scripting like JavaScript and Flash AS, taking my passion for coding along with me.

Blogging just happened by accident: I was looking for an outlet to share and maintain an online archive of the things I learned from work, and a weblog just seemed like the natural way to accomplish this. I set up a site, installed WordPress, and in under a day, I had a post up even before the “sixrevisions.com” DNS records had fully propagated.

And that’s my story in a nutshell. In short: being a designer/developer was planned since they’ve been my passion most my teenage and adult life, blogging just sort of happened by accident and on a whim.

6) What advice would you give to a person just starting out in your field, whether it is blogging, design, or development?

I’m not going to try and say something smart and enigmatic to make myself sound intelligent and cool, that’s just not my style: if you know me, you’d know that I’m a practical and straight-to-the-point person.

For designers and developers: learn your craft well and be sure to keep up with what’s new, even if you don’t plan on using it; that way you’re always well-informed. For example, I know about Flex 3 even though I’ve never applied that knowledge; I’m dangerous enough with it to be conversant about it. Start a blog, that’s the best way to learn and to force yourself to keep up with what’s going on around you.

Bloggers: write about a topic you know well, not about a topic you think will generate the most site traffic.

7) What are your future goals, both for yourself and your blog?

That’s a tough one. I’m not that much into planning, and I believe that if you work hard and do what you love, the rest will fall into place, and at the very least, you’re doing something you love doing. I do know that I would like to redesign the Six Revisions layout, as well as improve site features and findability (I did the current layout in a rush). I do like the simplicity of the design as it is now though, so I’m not sure when I’ll ever want to redesign it.

Other than that, my goal is to finish the books I’m writing and not get my editors mad(der) at me for being late on my chapters… again.

Predefined Variables in PHP: For complete beginners

This is an overview made for beginners: and introduction to predefined variables in PHP. We’ll go over what they are, where you’ve probably seen them, and how and when to use them.

What are predefined variables?

Predefined variables in PHP are exactly what they sound like — variables in the PHP language that have been defined already. They can use used in any PHP script, with no need to create them yourself. They serve a purpose that is commonly used among programmers repeatedly, such as passing information from a form to a PHP script ($_POST would be used for this).

Here is the list of currently defined variables in PHP. Of course, you don’t need to understand all of these quite yet, but they can come in handy for any PHP developer.

• $GLOBALS — References all variables available in global scope
• $_SERVER — Server and execution environment information
• $_GET — HTTP GET variables
• $_POST — HTTP POST variables
• $_FILES — HTTP File Upload variables
• $_REQUEST — HTTP Request variables
• $_SESSION — Session variables
• $_ENV — Environment variables
• $_COOKIE — HTTP Cookies
• $php_errormsg — The previous error message
• $HTTP_RAW_POST_DATA — Raw POST data
• $http_response_header — HTTP response headers
• $argc — The number of arguments passed to script
• $argv — Array of arguments passed to script

All of these variables interact with the current server in some way. This means their purpose is to either get information from the server (e.g. Find the IP address of the user) or translate information to the server (e.g. send a user’s information from a form through the server to be handled by a PHP script.)

Let’s now get a closer look at some of the most commonly used predefined variables.

$_SERVER

This variable is an array of values, with the values containing information about the server.

If you don’t know what an array is, it’s quite simple: it is a collection of values, put into one component. For example, an array of numbers would be “1, 4, 6, 3, 3″. All these numbers can be stored in one place, called an array. The array can then be assigned to a variable name, like “$numbers”. There are more formal definitions of an array, as this definition may not be 100% ‘accurate’. However, it’s a good outline and way to think of arrays.

Let’s say we’re creating a fluid layout, and because different browsers handle pixels differently, we want to determine the browser type of the user so we can lead them to a specified stylesheet. This way, we can make sure a fluid layout never breaks.

In the PHP $_SERVER array (collection), there is one piece called “HTTP_USER_AGENT”. This piece of the array (index of the array) contains the user’s browser information. We can call it like so:

$_SERVER["HTTP_USER_AGENT"];

To see it in action, let’s echo it out:

<?php
     echo $_SERVER["HTTP_USER_AGENT"];
?>

The code above will return browser information in the form of a string. My browser information looks like this:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
     (.NET CLR 3.5.30729)

I won’t get too into it, but from here on we can see how we can use this information to specify a certain stylesheet for a user. If we store that String in a variable, (or part of the string), and send it through an if/else statement, we can give the user the correct stylesheet.

Note: This is just pseudo code below!

$browserType = $_SERVER["HTTP_USER_AGENT"];

if $browserType = "Mozilla..."
     then [switch user to the Mozilla Firefox stylesheet]

else if $browserType = "Internet Explorer..."
     then [switch user to the IE stylesheet]

else [use the default stylesheet]

Here are some of the other indexes in the $_SERVER array:

• Get the user’s IP Address: REMOTE_ADDR
• Get the hosting server’s name: SERVER_NAME
• Retrieve the referrer URL: HTTP_REFERER
• Retrieves the server identification string: SERVER_SOFTWARE
• Retrieves the pathname of the current running script: SCRIPT_FILENAME
• Retrieves the current page URL: SERVER_PROTOCOL
• Retrieves how the script was requested (Did it use “Get” or “Post”): REQUEST_METHOD

If you don’t understand what they do based on the general description given above, do some more research on them, as well as try them out!

$_POST

This predefined variable is very commonly used, and incredibly useful when working with forms. You’ve probably seen this one before if you’ve ever tried to learn PHP.

The $_POST variable is linked to a method in PHP, called “post”, respectively. This method is often used in forms that need to send data to a PHP script. An example of this would be a sign up form: the user enters in data to the form, the form uses the post method to send it to the specified script, and the script can then process the data.

<form method="post" action="phpscript.php">

Easy enough, right? Well in order to carry the input from the form over to the script (in the example above, ‘phpscript.php’), it puts the data in an array, and assigns that array to a variable: $_POST. So, the $_POST variable contains all the data sent through the post method.

To specify the names of the indexes in the $_POST array, we clarify names in the input tags within the form:

<form method="post" action="phpscript.php">
<input name="username" type="text" />

After using the name=”" attribute, we can easily find that data in our $_POST variable array:

$_POST['username']

We have retrieved the data from a form, sent it to a PHP script, and can now work with it inside the PHP script. Using that, we can assign the username to a variable with in our PHP script, manipulate it, or send it to a database.

$_GET

The $_GET variable is very similar to the $_POST variable in that it can work with forms and a PHP method called “get”.

<form method="get" action="phpscript.php">

The difference is that the get method will send information through the URL, like so:

http://example.com/?name=Kayla&website=http://webitect.net

Let’s break that up a bit. We can see the example website: http://example.com. Then, we see a question mark (?). This question mark means that everything following it within this URL is now associated with the form, and contains the variables. We then see “name=Kayla”. This would be if I were to create an input field named “name”, and input “Kayla” for the variable to be passed:

<form method="get" action="thankyou.php">
<input name="name" type="text" />

Next, an ampersand (&) that will connect all the field names and variables. Finally, our second piece of data, named “website” with a value of “http://webitect.net”.

The URL will go to the page where the form wants us to go (the location of the action=”" attribute). In our case, ‘thankyou.php’. It can display a thank you message, or whatever other type of content you’d like to display. In addition, this page can retrieve data with PHP:

$_GET['name']

A better example of $_GET in action is:

<h1>Hello, <?php $_GET['name']; ?>!</h1>

Of course, that’s fairly useless, but you see how it could be used if needed. The point of $_GET is to easily pass information from a form that the user enters, and provide it to the next page. This is helpful for any sort of non-secure information, such as number of items to add to a shopping cart, or posting a website to a database.

You would not, however, ever want to use $_GET for a signup form or anything that uses secure information. Otherwise, important information (like a password) would be sent through the URL, and could be seen by anyone that could view the computer screen.

Conclusion

Hopefully with a more in-depth overview of these three predefined variables, it can get you started in understanding the rest of them. A great place to get started is the PHP Manual itself.

In a future tutorial I really want to go over the $_COOKIE variable, and how one can use cookies to identify users and work with specific users to the programmer’s advantage.

A Guide to Simplistic Web Design

Define Minimalism

To start, think about what makes a website the opposite of minimalistic: A lot of color, images, shapes, and not enough whitespace. Also think in terms of content. Simplistic web design also strips the design of unnecessary content, so what a visitor does see, is what the visitor needs to see.

By subtracting the unnecessary elements in a web design, we create more meaning to the remaining pieces. What are those remaining pieces? Portfolio pieces, blog posts, a resume…you name it, it’s important.

Typography is a #1 Priority

Let’s think about what we do need in simplistic web design. Content, content, content. The number one way to dress up content is in the form of typography. Paying special attention to typography in simplistic design can create great aesthetic appeal by adding minor detail like italics, serifs, and defining spacing and proximity.

A List Apart features one of the greatest examples on the web of typography. It is obviously a very basic and minimalistic design, featuring black white, gray/beige and orange. The only image that is used in the logo, which is also minimalistic, and the majority of shape on the design is rectangular.

Looking closer at the design, we can see that the designer spent a lot of time thinking about typography. They first thought about the size of the headers, paragraphs, navigation, etc. relative to all other content. Then, color came into place. Notice how the brightest color on the page, orange, highlights the titles of fresh content.

There are other ways to highlight content with just typography. Bolding, italicizing, size, and font change all come into play. Using correct hierarchy in typography is also a must, so pay attention to proximity and spacing as well.

Boring Color? No. Little Color? Yes.

Many designers want to spice up simplistic web design with bright, interesting colors. However, as a general rule of thumb, a simplistic design should not use more than 2 colors in the actual design. This is because pops of color creates strong contrast, opposed to weaker forms of contrast like change in shape or size.

Janic Design uses two contrasting colors: green and orange. The rest of the design is variations in gray, and uses contrast to get the point across. Also notice that the bulk of the design are in these grays. Those bursts of color lead the eye to what is most important: logo, navigation, and portfolio content.

The only other colors in the design are in the portfolio pieces themselves, leading the eye even more. This strong contrast in color and style creates a design where the visitor sees the portfolio pieces first; this is a great goal for any designer making a portfolio.

An Effective Use of Whitespace

Whitespace is often overlooked as such a big part of web design. Ever wonder why adding a bit of margins on the side of a layout makes it ten times more appealing? Whitespace frames whatever it’s around, meaning side margins frame an entire layout. This gives focus to the whole design.

Experienced designers know how to take the knowledge a bit further. Using whitespace to properly frame headers, intro text, content, and navigation can make for a more effective layout. A good designer knows how to influence their audience with their design, either to read the content, donate money, make a sale, or leave a comment. Whitespace is one of these biggest influences.

Whitespace is not only used to frame, but to also create a sense of feeling. The more whitespace there is, the lighter it feels, and the more luxurious it is. Luxury can be compared to professionalism, high-quality, and high-price.

The image above is from a very informative article from A List Apart: Whitespace. Mark Boulton goes into what exactly whitespace is, how to use it effectively, and a walkthrough of basic practices when working with whitespace. I highly suggest everyone read the article completely through:

• Whitespace by Mark Boulton

What do You Think of Simplistic Design?

Share your thoughts, practices, and tips on simplistic design.

How do you use whitspace in design?

Do you have any special Typography tricks?

How important do you think color is in minimalistic design?

6 Websites that Can Help you Increase Website Visitors

Just because you have a blog or website, it does not mean you are getting the traffic you deserve. And if you are not getting traffic, why? What about if you want to know how your website ranks, or how to improve it? These six resources will check your site and give you helpful information on improving tags, search engine optimization, usability optimization, and website traffic overall.

1. Mint

http://haveamint.com

Like the motto says, have a fresh look at your site. Access statistics on all sorts of parameters from number of visits to unique referrers. If you want to analyze your website page by page, this is a great source.

2. Submit Express

http://www.submitexpress.com/analyzer

Get information on how to improve META tags and get statistics on keyword density. It’s incredibly hard to write meta tags, and Submit Express helps a lot.

3. DN Scoop

http://www.dnscoop.com

DN Scoop’s intent is to give an estimated value of a domain. But it also provides information on Pagerank, links pointing to your domain, and traffic values.

4. Website Grader

http://website.grader.com

Website Grader is pretty basic, but free SEO tool that analyzes the effectiveness of your website. One should also do a competitive analysis. Type in other competing websites to find out SEO, website traffic, social popularity and other factors. You will get suggestions on how to improve the site from a marketing perspective.

5. Crazy Egg

http://crazyegg.com

One of the best tools out there, Crazy Egg comes in four flavors: basic (free), standard, plus and pro. The packages depend on how many visits and pages to track at once. CE visualizes visitors, a cool concept through heatmaps, lists or overlays.

6. Popuri

http://popuri.us

Popuri gives you information on everything from PageRank to del.icio.us Bookmarks to Alexa rank, at once. It is similar to Smart Page Rank but with a more attractive interface and more statistics.

The Ultimate Wordpress Theme Developer List

I’ll probably be adding more as I find things, and feel free to add your own resources in the comments. I’ll add them to the list as well when I get a chance.

For a bit of motivation, here are the prizes again!

1st Place: $100 via PayPal or 1yr. of free advertising on Webitect.net

2nd Place: $50 via PayPal or 6mo. of free advertising on Webitect.net

3rd Place: $25 via PayPal or a free domain name

All participants have the choice of their Wordpress theme being featured on Webitect during and after the contest, and available for download. As a benefit, any theme is allowed to host a personal link to your own blog or website.

General Code you can Copy

• Easily Adaptable WordPress Loop Templates
• Huge Compilation of WordPress Code

Cheatsheets

• The Wordpress Help Sheet
• Advanced Wordpress Help Sheet
• My Wordpress Cheat Sheet
• Web Design WordPress Template Tag Reference Guide
• Wordpress Codex Site Architecture

Tutorials and Walkthroughs

• So you want to create WordPress themes huh?
• Designing a WordPress Theme From Scratch
• See How Easy It Is To Widgetize WordPress Themes
• Wordpress Tutorial: How to Create a Wordpress Theme Dissection of a WordPress theme
• Building Custom WordPress ThemeTheme Development Codex
• Wordpress for Designers: Screencast Series
• [Day 1, Day 2, Day 3, Day 4, Day 5, Day 6, Day 7, Day 8, Day 9, Day 10, Day 11, Day 12, Day 13, Day 14, Day 15]

Blank Starter Themes

• Refueled Blank Wordpress Themes
• Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time

• Blank Wordpress-themes ready for 2.7 up for grabs!

50 Textures of Man-made Origin

I’ve collected 50, relatively large and high-resolution textures created by humans in some way, under the categories of fiberglass, packaging, rubber, Styrofoam, tape, electronics, tile, concrete, brick, signs, and graffiti. With such a wide variety of form man can make, using these textures to create art is only a small step away.

read more

Web design tips: The pros and cons of splash pages

Splash pages are often thought of as ‘pretty little additions’ to a website, but not thought of more than that. One should look closer, however, and truly examine the benefits or deficits of splash pages, before just throwing one on a website.

Why does one need to think closely about this? Many new webmasters don’t realize how big of an impact a splash page can have on an entire website. This impact can be good or bad, depending solely on how, and why, a designer uses a splash page.

read more