In this post we’re going to look at some of the greatest uses of texture in web design today, and see how it can be used in so many forms. We’ll explore how the use of texture has evolved over the years in web design, and how any designer today should use texture to make designs really pop.

Check out the rest of my post on onextrapixel…

Whatever your reason to begin creating premium themes, this guide can help. In this post we’ll cover design styles that sell well, must-have development features, some tips on selling your first themes, and even a few business models for how to get started.

Read the rest of my post on onextrapixel…

Hierarchy is the element that makes users look where they do and when they do it. The top hierarchical element on a web page will be the first thing the user sees, and the lowest will be the last. It’s easy to see why hierarchy has such a profound effect on web design — it’s all about the user experience, and any website’s presentation to the user. In this post, we’ll cover some of the basics of working with correct hierarchy, and how it specifically applies to web design.

Check out the rest of my post on onextrapixel…

This is not going to be an in-depth post on JavaScript, or anything like object-oriented material. Instead, this post will cover the basics of JavaScript that every designer must know to become better designers. In this post, we’ll cover some JavaScript features (and trends) that focus more on user experience and design elements themselves.

Read the rest of my post on onextrapixel…

Then, in a later post, we’ll get into some real fun. In part two, we’ll slice up our design, and then use JavaScript to validate our form and make it more dynamic for the user to work with. The overall effect will be a sleek, user-friendly, and useful feedback form for your website. One could also create their own design variations and provide the graphics and code to the design community for reuse.

1. Create a New Document

Create a new Photoshop document at 450px by 500px. I’m using these dimensions to match my blog theme, however, if you have alternative plans for the final form, feel free to make it wider. While using 450px in width for this tutorial, I generally create content areas around 600px.

2. The Background

Select the Rounded Rectangle Tool, and set the radius to 10px. In a new layer, create a rounded rectangle to fill the space of our document. I currently have my foreground color set to #eeeeee, although we’ll be filling it with a gradient in a few moments anyway, so this really doesn’t matter.

In terms of our design, we’ve used to rounded rectangle tool because I’m envisioning this form within a larger space on a web page. The rounded corners will help it stand out more as it’s own element, while still making it look like it belongs.

Set the foreground color to #eeeeee and the background color to #dddddd in your color palette. Right click on our new layer, go to Blending Options, and select Gradient Overlay. Change the gradient to our current color palette. (Should be the first option.) Make sure that the lighter gray, #eeeeee, is on top. If not, make sure the “Reverse” checkbox is selected.

Go back into Blending Options and also give our new form an Inner Shadow and a Drop Shadow. Below are the settings I’ve used. Note that the effects are very slight, but give just enough of a 3-dimensional look that makes it all worth it.

* Click on images to see the full size.

3. Form Title

Let’s create a title for the form now and style it. Using the text tool, write out “Contact Form”. Change the text color to #aaaaaa so it is visible. I’m using a downloaded font called SF New Republic, the bold version, 36pt. This was a free font I downloaded ages ago, but if you do a quick Google search on it, I’m sure it’s easy to find. Otherwise, just use a clean, sans-serif, and modern font of your own choice.

Place the text 30px from the top, and 20px from the left.

Now let’s create a letterpress effect by selecting Blending Options from the right-click menu of our new text. Below are the settings I’ve used:

* Click on images to see the full size.

4. Form Fields

I always like to plan out the information I’ll need, even with something as basic as a contact form. For this form, we’ll be collecting first and last names, email, phone number, website, and a message. Before we design the fields, lay out the labels for each of these fields on the form, and give an estimate of where they’ll be finally placed. The only set placement we have right now is the top margin: the first and last name labels are exactly 100px from the top of our form. The other field labels are likely to change.

Use the font Arial/Helvetica, Bold, 14pt, #aaaaaa. Right now I have the anti-aliasing method set to Sharp, but this really doesn’t matter as we’re going to code the labels into HTML eventually anyway.

Let’s set some rulers to help us out. We’ve been placing everything 20px from the left, so let’s make another ruler 20px from the right. (Press Ctrl/Cmd+R if rulers are not on. Click on ruler bar and drag to create a new ruler.)

Then using Photoshop’s snap feature (View > Snap), create a ruler in the center of the document. (If you move a new ruler towards the center with the Snap feature on, the ruler will snap into place directly in the middle.)

Now turn the snap feature off for better handling, and create rulers 10px to the left and right of the middle ruler, for a total 20px gap in the center.

(Adjust any labels if needed so they line up like the image above.)

Now, using the Rounded Rectangle Tool again, set the foreground color to white, and the radius of our tool to 5px. In a new layer, create a rectangle for our first name field. Then, copy the field and press Shift+Right Arrow to move the copy to the right for the last name field.

You can also copy and paste those two layers as well, and bring those copies down to the Phone # and Website labels.

Finish off the message and email fields by using the height of the other fields and rulers as guides. Remember to leave space at the bottom for our send button as well.

Finally, add the same drop shadow and inner shadow effects as our Contact Form title before. The idea is that if we’re simulating an interface, all elements should be the same depth.

5. The Send Button

Finally, the send button. Turn the rulers back on (Ctrl+R), and create a new rounded rectangle, 5px radius, in alignment with our last name and website fields. Give it a Gradient Overlay with the grays: #dddddd and #cccccc. Make sure the #dddddd is on top, so our send button has an outward effect.

* Click on images to see the full size.

Let’s also give our button a Stroke (under Blending Options) to make it stand out more: 1px, Inside, 20% opacity.

* Click on images to see the full size.

Finally, using the Text tool, add the text “Send Message” and place it over our button. Right click the text layer, and add a white drop shadow to match our interface theme.

* Click on images to see the full size.

Our Final Design

Next time we’ll code our Photoshop contact form, and add some cool JavaScript for validation and an awesome user experience.

Be sure to follow me on Twitter (@KaylaMaeKnight), and subscribe to the RSS feed.

Despite many of us understanding how learning the language can help us professionally, learning PHP/MySQL can be difficult. This is especially true when going at it alone. In this article, we’ll go over what is most essential when getting started in PHP/MySQL, and what one can do to learn the language well enough to win over clients.

1. Install a Server for Working with PHP Locally

In order to get started with PHP development, one needs to install a local server first. This will allow one to develop PHP Internet applications even when offline, and locally on their own computer. This speeds up development dramatically, and is essential for the learning curve. In addition to making it easier on you, the developer, installing a local server is a skill that needs to be learned in itself.

I personally use XAMPP, which is cross-compatible and well-documented. XAMPP is a popular web server package (Apache), which includes phpMyAdmin, MySQL, and interpreters for scripts written in PHP and PERL. There are a number of tutorials available for installing XAMPP, more specific tutorials for installing Wordpress or other popular platforms on XAMPP, and documentation concerning settings, troubleshooting, and more.

There are also some alternatives including WampServer 2 and MAMP (Common for Mac users).

Check out some of the resources below for finding out more and setting up a local web server:

• Installing XAMPP on Windows (There are guides for any OS, just do a quick Google search)
• How to Install XAMPP (Windows & Mac installation guides, although not as thorough)
• Installing WordPress Locally on Your Mac With MAMP (for all those focusing on Wordpress development)
• Installing WordPress Locally (Another MAMPP/Wordpress installation guide, however very thorough and well-explained)

It can also help to do some research on web servers, different options, their benefits, and more just for the sake of becoming a better web developer. It definitely isn’t the ‘fun’ side of web development, but learning the technical side of things can help one to understand PHP/MySQL better, as well as web development in general.

2. Understand PHP-Database Interaction

Many new developers will want to get into PHP and MySQL, not really understanding why they are choosing the technology in the first place. PHP is so useful because of its easy interaction with a MySQL database. Understanding that interaction and when and how it can be effectively used is the first step to creating great web applications.

Take a shopping cart for example. Nobody creates a shopping cart in PHP for the sake of using PHP. It is instead PHP’s ease of use when it comes to updating, deleting, or adding new data to a database (such as products, prices, customer information, etc.) via MySQL.

Through PHP, using a MySQL-inspired function, adding data to a database can be as easy as:

<?php
// Connect to database, start sessions, etc.

mysql_query(”
INSERT INTO products (id, name, description, price)
VALUES(’sku-194923′, ‘PHP for Beginners’, ‘A PHP book for absolute beginners.’, ‘29.95′ )
“)or die(mysql_error());

?>

As a practice assignment, create a list of application ideas where PHP and MySQL would be a good idea for its development. Describe, either in psuedo-code English or in code, how PHP would interact with a MySQL database, and how it could interact with a basic HTML page and user interface to meet the goals of application. What types of information would need to be saved dynamically in a database for the particular type of application? In what ways should the information be accessed and interfered with by the user to create a dynamic web application?

3. Learn the Basics in the PHP Language

Where most people start is here: learning the basics of the syntax. This includes if/else statements, switch statements, functions, and for the eager and ambitious, object-oriented syntax. Needless to say, this is an essential step in learning PHP and MySQL, but most of learning a programming language is learning the theories and best practices. Understand first how to set up a PHP application in theory and the rest can be handled by looking up syntax as needed.

I think the best way to learn syntax is to just do it, rather than read through and study it. Think of a small sample program one could create (without looking up a tutorial for how to do is specifically). Start small, like a simple calculator, and work up to something like a simple content management system. Try doing it at first without the tutorial, but looking up syntax where needed. Then, read through a related tutorial, and examine best practices, fix errors, and learn from your own mistakes.

Tizag is a great place to start for this. There are no project-specific tutorials to learn from, but rather just how-to’s on how to accomplish general practices in PHP and MySQL. For example, there are no tutorials like, “How to create a basic log in script with PHP,” but rather information on how to save information to a database, check information from a form, and how to save session variables. All of these components put together can create a log in form, but it will be you that is putting it all together to create the log in script, instead of copying and pasting code.

4. Know how to Debug PHP/MySQL & Handle Errors

It’s easy to give up learning a new language when constantly running into errors. Especially when going at it alone, it is especially difficult to overcome obstacles. Error handling is essential to any programmer, but even when just starting out, get a good grasp of at least some basic error handling. This way, when encountering a problem, it can be ten times easier to figure it out.

Check out the following resources for debugging in PHP:

• Debugging Techniques for PHP Programmers
• PHP Debugging Basics
• Debugging PHP with Firebug and FirePHP
• Debugging in PHP (PHP Manual)

Also check out best practices for error checking in PHP, which in return can help with debugging along the development of an application:

• PHP Error Handling and Logging (PHP Manual)
• W3School’s PHP Error Handling
• Error Handling in PHP: Coding Defensively

Always be sure to set up specific and custom made error message within the development process to be sure you know what exactly the problem is. Within the learning curve, this is a great way to learn from regularly committed mistakes, and fix them in the future for faster development.

5. Study Application Design

With a mix between HTML, PHP, MySQL, and even other languages on a webpage, a PHP application can quickly become unorganized and eventually confusing. Staying organized is the key to being a good developer. By doing so, not only will it make it easier on you, the coder, but also for your client and anyone who may need to maintain the code.

For example, web designers and developers who have only studied design, XHTML, CSS, and the other basics of website development already follow basic best practices for organization and website structure design. All stylesheets, by best practice, are located in a /styles or /css directory. The same goes for external JavaScript files in a /js or /scripts directory. Main pages are located in one directory, and sub-pages can be better organized.

Beyond organizing where files should go, there are also best conventions for naming files, and for how the code is organized within those files. JavaScript implementation is usually best put right before the footer (with the link to the external JS in the header). We all learn at the beginning that external stylesheets are appropriate for organizing code, rather than placing all of the CSS, JavaScript, and XHTML into the same file and repeating that that information in each page. Simply sharing external files between multiple pages is more efficient.

The same goes for PHP application development. One common best practice is to put all of an application’s classes into a /classes directory. There may also be an /includes directory. Functions to connect to the database would all be in one class, and functions that deal with a user would be in another.

I could go on and on about my own application design and best practices, but that’s for a later date. Below are some resources to check out what other developers do, and what anyone should do:

• Five Common PHP Design Patterns
• What PHP application design patterns do you use?
• Introduction to Design Patterns Using PHP

It can also be helpful to look up more advanced tutorials for PHP application development, and examine how that developer is choosing to set up their application, and any best practices they may be using. Or, download an existing script, and examine it from the same point of view.

6. Study Database Design

Just as important as application design is on the PHP end, the MySQL database structure is just as important. Organization can speed up development and lead to easier and more efficient maintenance. In database design, there is a concept called database Normalization. This presents the idea that data should be organized in a common way among applications, and these ways have been defined as efficient and as organized as possible.

Check out the following resources for getting more familiar with normalization, database design, and common mistakes when using databases with PHP:

• Five Common PHP Database Problems
• Database Normalization
• An Introduction to Database Normalization
• Peachpit: MySQL Database Design

At least with me, learning how to structure a database and how to navigate my way around something like phpMyAdmin was the trickiest part to becoming a great PHP programmer. No doubt, a good PHP application cannot be made without a good database design behind it. However, learn the theories and best practices, do some practice work, and learning the correct methods can come more easily than you’d think.

7. Find a Favorite Framework

Last but not least, research some popular frameworks and get started with one. I only use a framework for bigger applications, but knowing one will come in handy as being familiar with one is just a part of being a good developer.

I personally use CodeIgniter, and from my experiences it has served me well. Other popular frameworks include Zend and CakePHP. I chose CI because Zend tends to be for much more complex application development, and it seems to have more documentation/tutorials than CakePHP. However, be sure to check out a number of other options, check out a few beginner tutorials for each, and determine which one is right for you.

For inspiration, here are ten blog designs that decided to mix it up when it came to the wireframe of their blog design. No more header, content-left, sidebar-right, and finally-the-footer boredom. These designs put a unique twist on where they place their posts, and how the user can interact with their blog.

1. Scott Boms

2. Split Da Diz

3. Hell Yeah Dude

4. Schneeballschl8.de

5. Peminoz

6. Inca un Calator

7. FRKT

8. Jonathon Moore

9. Billy Tamplin

10. JR Velasco