Color as Communication
on January 12, 2010

Detailed look into effectively communicating messages to users using colors.

Introduction

The importance of color in design is not only important, but a deciding factor on the success of you and your works. Learning to master the art of color design is a tool that will greatly affect the future of your portfolio. In this post we will look into how you may communicate using colors, and represent different actions properly with color association.

Color Scheme Concept

Color Scheme is defined as “an arrangement or pattern of colors or colored objects conceived of as forming an integrated whole”(Cite). Creating a color scheme is one of the first steps in designing. This may be a well thought out process or just mixing and matching colors together, which ever path you take, a color scheme is made.
In web design, there are many ways to go about making a color scheme for yourself. Choosing a base color would be the fist step. Usually a solid, dark color, such as black, or charcoal gray, or a subtle light color such as white or arctic blue as brief examples.

Starting with a basic base color, gives you range to use more vibrant or dull colors on your secondary color. The secondary color in your design is best used in logos, headers, other images and some action buttons. Secondary colors are meant to be flashy. Bright, colorful colors are commonly used on dark base colors, although vibrant colors are often used on light base colors as well.
The third color of color schemes in web design are often text or content boxes. Typically text is black, as it is easily readable on a light background. When using a dark base, and the text is placed without a light container, it is difficult for readability. On a similar note, the base color may create a static display for content in the same color, confusing the user.

Understanding Effective Color Implementation

Becoming effective at color implementation will provide you with the skill to grab the attention of the audience, manipulating their focus to present the content you want the user to see using color schemes. Combined with the ideas from above, using color schemes, I have complied a few examples of attention grabbing web sites.

Shown are 4 examples of excellent color combinations and implementation of color schemes.

Common Colors Uses For Events

When you approach a stop sign, you stop. When you see a green turn signal in your lane, you proceed to turn. When you see blinking orange lights on the car a head, you slow down as cautious of their turn. All around us we use colors and associate them with alerts such as stop, go, caution. We do the same thing on computers. Errors, save confirmations, important information alerts, etc.
Especially in web applications it is crucial to present the user with the correct message if there is a need to address the user. Is there an error? Errors are a problem developers wish magically fixed themselves, but designers have to anticipate and alert users if there is a problem. Perhaps you have an email application and you click send, but nothing happens. Do you click send again, possibly flooding the recipients inbox with duplicate messages? If there was a clear message that showed the user the message had been sent successively. Maybe you would like to tell a user, for their security to change their password, but they overlook the message because it blends in.
To fix these issues we can use color to grab the users focus, and communicate the proper message alert.
Red, stop, delete, error, something is wrong. When a user views a red prompt, they may have a certain level of panic, and frustration. Maybe their document has not been saved due to an error, or their password is wrong during a log in. Below are a few great uses of red as alerts.

Green, go, save, success, Everything is fine. Coming across a green prompt a user may feel secure, and achieved. Documents have been saved, messages sent, registration complete. Below are two examples of fantastic uses of green as alerts.

Yellow/Orange, caution, new information, confirmation, attention requested. When presented with an alert in this color, a user may feel informed. The use of these alerts are vast, most common are informing users of new content and warning of security issues. Below are several examples of yellow/orange as alerts.

When and What to Communicate With Color

To further explain what to communicate with the colors for alerts, it is necessary to know a few key things about the users. In a web application where the users can add, delete, and modify any data, there is significant need to use the correct colors to communicate an alert message. If a user is greeted with a new alert, quickly judging the color before reading the message will allow the user to be prepared to take the action needed to fix the alert. It is important to use colors to communicate messages to the users, as it will substantially reduce confusion on your design.

What kinds of events should be alerted?
Any form of error that a website can encounter, including (but not limited to)

• 404 page
• Database connection errors
• Login errors
• Registration errors
• Delete confirmation
• Delete success
• Close application

Anytime a user has successively created, saved, modified, or needs to move on, including (but not limited to)

• Saving
• Editing
• Creating
• Updating
• Adding
• Moving to next(button)

Any type of important information that is relevant to users.

• Security precautions
• New features
• New items

In Conclusion

Using colors effectively can greatly increase a users understanding of the messages you are communicating to them. Taking into consideration schemes, different alerts, and implementation of the colors best for each, you can create a user interface with minimal confusion.

Resources

Here are a few tools and websites to aid you in designing with colors.
COLOURlovers
Kuler by Adobe
Hex Color Chart

Poll: New Article Topics
on January 7, 2010

Be a part of Division Overlay’s future! Fill out our quick poll on what type of new blog posts to write more of, it only takes seconds..

As Division Overlay begins a new year, working feverishly on getting Echo Stream together (More Information soon). It seems as though our blog has felt much neglect as of late. So to make up for an empty feed reader on our part, we would like to know what kind of topics you would like us to spend a little more time on.  Please take a quick moment to answer our one question poll below to provide us will valuable feedback.

Creating a basic View Counter using PHP and MySQL
on January 1, 2010

Create a simple view counter using PHP and MySQL.

This tutorial relies on server side programming languages. To begin, be sure you have XAMPP or a similar localhost software running for testing purposes.
Get Xampp

In this tutorial, you will learn how to make a view counter using a few lines of PHP and MySQL. We will also be playing around in phpMyAdmin to create a basic table. This is not a real use case for this technique, you will most likely be adding this to a table on the database that contains profile information or a similar table.

Step 1

We begin the tutorial with a basic HTML page, with a PHP brackets in topmost part of the document. This is where we will place the database connection information. Your localhost may be set up differently than this, please familiarize yourself with your username and password of your server.

Step 2

In good practice, declare variables with data that will be used more than once. This includes “host” which in our case is localhost. This will differ if you are using a live server, or are using this on an application in a website. “username” is the username for the server. Default username for localhost is ‘root’. “password” is naturally the password to the server, again default for local host is ‘none (represented with empty quotes)’. “dbname” should contain the name of the database you are trying to reach. In this case we have created a database named ‘views’. We will go further into this in a moment. ”tblname” represents the table inside of the database that contains the information we desire, in our case we named it ‘counter’.

Step 3

Its time to open your phpMyAmdin. This is where we can access, and manipulate database data. Depending on software and platform, your URL may be different. (http://localhost/phpmyadmin/).
Find the section that allows you to create a new database, shown below. We will be making a new database named “views” as we have coded into the variables in step 2.

Step 4

Now, we will need to add a table and a row of data. Start off by making a table and naming it “counter” as we have coded in the variables on step 2. Then we will need 1 field of data on this table. (As mentioned before, this is not a real life use case. In actual use, you would add a field to an existing table.)

Step 5

After creating a new table, you will be presented with the field form. The way you make this is really up to you, for this tutorial we will just do a couple of things. The filed is named “hits” and the length is set to “5” the highest number this counter can hit will be ‘99999′.

Step 6

There are several ways you can do this through PHP, for this tutorial we will do it through phpMyAmdin. Insert a new row, and set the initial value to ‘0′. This will ensure the counter will start at 0 and the first view will be counted as 1.

Step 7

We are now done with phpMyAdmin. Lets get back to the code. We have our database set up, and we have all our variables with the names set up. Now we need top connect to the server and database.
To do this, we create a new variable named “con” for ‘connection’. The name of this variable is not important, however you should have a clear idea of what variable is when looking at the name.

this function we will use to contact the server. Inside the parenthesis is where the variables containing the server details go.

After the parenthesis, to make sure nothing executes unless the server is connected add the function ‘die()’ This will stop the script from running any further.
We also need to connect to the correct database, in our case the name is ‘views’. To do this is similar to connecting to the server.

Inside the parenthesis is where the variable containing the name of the database goes “$db_name”. Just like above, use the ‘die()’ function to stop script execution if there is an error connecting.

Full code for connecting to server and database

Step 8

Now that we are all connected, we are ready to start the fun part. Obtaining data from the database, displaying it, and modifying it. To do this we first create a variable named ‘query’.
Inside the variable we access the database using SQL – mysql_query()
“SELECT hits FROM $tbl_name”
This will select the row ‘hits’ from the table ‘counter’.

Then we need to count how many rows are in the ‘hits’ block. Create a new variable named ‘numrows’.

Step 9

Next we add an if-while loop.This will make sure the variable numrows has data in it, and to store that data in variables as needed.

This grabs the data inside the query, and stores them all in an array variable named ‘row’. We want to be a little more specific, so we add a variable named views and have it be the same as the hits-row.

Step 10

At this point the information is in the script, you just need to display it. To do this, we are going to add a print() function. Adding the variable to the print data so it is on the screen.

Step 11

Everything works, and now we need to count up and add the new number to the database. This part is quite simple. Take the variable ‘views’ and add 1 to it on every page load.

We then need to put the new number in the database. To do this requires a little bit of SQL.
Use the same ‘query’ variable and structure as we have above.

The SQL for this action is a little different than selecting. To place a new value in the database requires the following query “UPDATE $tblname SET hits=’$views’”
This will update the ‘counter’ table and set the row ‘hits’ with the value of the variable ‘views’.

Full code in body section

Final

Your view counter is done, Watch as it counts up. Questions and comments will be answered below. Thanks for reading the tutorial.

Happy Hollidays!
on November 27, 2009

Happy Holidays from Division Overlay. 40% off of all design packages in the month of December to celebrate the holiday and our second successful year of operation. Also, take a sneak peek at the new Echo Suite service.

Seasons greetings from Division Overlay! It is a joyous occasion. We are approaching our second full year of operation. Not only that mile stone, it is the season of gift giving. If you look on our home page http://divisionoverlay.net/ you will see a very special offer for the month of December.

We are offering 40% off of all design packages in the month of December. Starting December 1st at Midnight and running through December 31st at 11:55pm. This sale includes but is not limited to Logo design, UI design, HTML mockups, Icon design, and much more. However the sale does not include, Consultations, any development work (PHP, JavaScript, XML), and Hosting.

Also this month, we are launching Echo Suite into beta. You will be able to register and use the Suite starting this December (Date TBD). There is a teaser graphic also on our homepage (http://divisionoverlay.net). There will be a separate blog post about Echo Suite when it is released.

Updated Engine and Theme
on November 19th 2009

Welcome back to the blog! We have been working on a few new features. We have also upgraded the engine behind the blog (wordpress) and optimized it by moderating plugins. Read on to learn what is new.

Hello and welcome back to the blog. We are glad to announce the updated theme is up and functional. What is new? (Click Images to enlarge)

“New” post ribbon displayed on new posts. The layout for post previews are now handled with wordpress excerpts. We have added an icon representing the post topic and a brief summary of the article which will be displayed on all new posts.


On all new blog entries, the title, post image and the post summary will all be displayed at the top in a container for quick viewing.


Now, on tutorials, instead of giving boring text links to downloads and demos we now added buttons. Clear and centered in the middle of the blog post.


Author information and bio has also been implemented. Not a big feature, just giving the blog posts a little more personality.

Other News

On the development side, We have optimized the code slightly for the blog posts and home screen. We have also deactivated all the useless plugins that were installed, and updated the ones still in use.
The blog is also on the latest version of wordpress (2.8.6). That ensures that we have a more secure and bug-less operating system.

There are currently 3 new blog posts in draft, 2 of which are tutorials and the other being an inspiration article. We hope to get those up progressively before the end of the year.

We are also working on a few things for holiday release. Here is a little sneak peek of some of the things we are working on.

Echo Suite is a new web service created by Division Overlay. It will feature many different services combined into a central station where you will be able to use one ID to login to all the different apps.

Watch for this little guy on the home page (here) within the next 2 weeks. There is a special offer in the air…

We are also looking for people who want to by ad space (left sidebar on blog) if you are intrested, contact us (here).

So please leave a comment below and tell us what you think about the new features and coming attractions from Division Overlay.

As a student in an XML class I am learning a lot of things that the language can do. Something I thought was very interesting and easy to learn is using XSLT to transform an existing XML document into either another XML document, text file, or an html file.

I made a little screen cast to show how its done. There is no audio in this video. It is preferred you view the video in full screen (to see all the text and such).

Just as well, I added a “gallery” of the title screens just in case they went to fast for you, or you just wanted to review them.

View Title Screen Gallery

I have also linked the twitterTransform.xslt file for a reference. I did not add my RSS feed as you should be able to access your own very easily. I also did not link the output file as you will be generating your own with the transformation.

twitterTransform.xslt

In this tutorial I use:

XMLSpy (https://shop.altova.com/category.asp?category_name=XMLSPY)

You can use the trial and purchase if you like it as much as I do.

I went through my vast iTunes library (~4000 songs) and picked 28 of the most stunning album covers to spark your inspiration.

Clean / Simple

Angels & Airwaves – We Don’t Need to Whisper

Avenged Sevenfold – Avenged Sevenfold

The Blaqk Year – After the Storm

Coheed and Cambria – Good Apollo, I’m Burning Star IV, Vol. 1: From Fear Through The Eyes of Madness

Family Force 5 – Dance or Die(EP)

Good Charlotte – The Chronicles of Life and Death

Hawthorne Heights – Fragile Future

H.I.M. – Dark Light

Meriwether – Meriwether

Papa Roach – The Paramour Sessions

Grunge

Bullet for My Valentine – Scream Aim Fire

Demon Hunter – Storm the Gates of Hell

Evanescence – The Open Door

Green Day – 21st Century Breakdown

Meese – Next in Line

Mendeed – This War Will Last Forever

My Chemical Romance – The Black Parade

Rage Against the Machine – The Battle of Los Angeles

Artistic

3OH!3 – Want

Aiden – Conviction

Blink-182 – Blink-182

Dot Dot Curve – Till the Wheels Fall Off

Eminem – Relapse

Fort Minor – The Rising Tied

Incubus – Make Yourself

Plus 44 – When Your Heart Stops Beating

Single File – Common Struggles

Take the Crown – Relapse React

Introduction

In this tutorial you will learn how to make a basic email form using xhtml, css and php. In this tutorial we will be making a small contact form where the user will fill out a form and using php will email it to your inbox. We will look in to error processing for eliminating some spam in this tutorial as well.

End results:

- Try it -

Step 1 – Basic HTML template

First lets create the basic template for the form to be placed in. This, of course will not be the template you will use, as you will probably implement this into your own design and site. This is the beginning of the template, it contains all the dividing inlays and correct tags to start out the template.

We will need to declare the doctype and create all the necessary header information such as the content-type and title. We also link the style sheet in this section.

In the body section I have placed a number of div tags that will hold the content we will place inside them, using css later we can do some formatting.

Next lets make the the form with all the inputs and labels for the user to fill out that will ultimately be emailed to you when finished.

To correctly flow with the template we have just made place the create the form inside the “container” div.

Final index.html file

Step 2 – Styling the index

For the sake of the tutorial I chose to add a little style to the page. Although the css is very generic, it is not required to use on your own form. It is simply used to give the tutorial a little flair.

To use the two images in the tutorial download them here:

Graphics

Background Image

Container Box

Final style.css file

Step 3 – Declaring Variables

Now that we have the html template and the page styled using css and the graphics. We need to start building the actual php script that will email you when filled out.

First thing I like to do is declare all my variables at the top of the script for easy reference later on.

These variables are pulled from the form in the index.html file. I placed them in variable names that would be easy to remember. Name, Email, Message, and the Subject is a static variable and you set it as you please. It can easily be pulled from an input if added on the form.

Step 4 – Error processing

For the sake of sorting out the false emails at the application level, this step should never be overlooked. As this is a basic tutorial, You only learn how to check if the fields are empty. If I get enough demand I will write more on error handling.

We need to check if there is any value to each field (name, email and message) and have the form die if the fields are empty.

The die() function will stop the form from executing any further. So it will display the first error it catches. If you place an email, but not a name, the name name error will display and stop the script from executing.

If all the fields have input, then we need it to show a message to give the user a peace of mind that their message has been received.

Step 5 – Email formatting

Now that we have all the data we will need to send a message, we need to format the email in a way that is easy to read for you.

Setting up the time stamp. Fairly simple format.

Month text (July) Day, Full Year(2009) Hour:Minutes am/pm.

This block makes up the body section of the email.

This will display the time stamp we just made first. The “\n” is a line break in the text. So the next variable is on its own line. Then it will display the name and email followed by the subject and message.

We need a from line, so you know who the sender is before you open the email.

Step 6 – Email the form.

The script is now ready to email the content to the email you choose.

You’ll need to place your email in the place of “your-email@doamin.org”. You can add more than just your email address if you are needing to send it to several people or departments. You can add a comma and add more email addresses in that section.

End the script and you are ready to upload and test the script.

Final email.php file

Conclusion

Final EmailForm.zip

You should now have a working email form that will email you if all the fields have been filled out. You can do much more with this application, such as check if the email is a real email address, check for words or links you dont want inside the message, the options are endless. I hope this tutorial has helped you out, and you may have learned something new and useful today.

Hello there!

It’s been a long time coming, but we have finally accomplished the redesign. After six months of designing and coding the site. We have finally produced what we set out to do.

This is the fourth major redesign of Division Overlay since we launched in December 2007. Creating the User Interface was something of a challenge for the first few mockups. We went through dozens of potential candidates for the design, all of them ultimately were rejected in favor of this one. After we had finished the grueling hours of tedious designing and tweaking, we had a tremendous problem. The PSD document with our design became corrupted. Luckily we had saved PNG formatted images of each page on the PSD, so all we had to do was back track and trace our work. From that speed bump, we were able to race toward our mark at full speed, continuing on from slicing the images, to coding the template. On to programing the PHP and jQuery to finishing up with this wordpress theme.

Now on to more business

Along with the redesign launch, we also have a slew of new things for you to download and have fun with.

Including:

• Blue Quartz 3 template
• LaunchFuture template
• Quote Machine
• Kings Crown Set
• and much more..

We will also be writing more posts ranging from full in depth how-to tutorials to updates on what Division Overlay is up to.

After all the work we have put in, it would be nice to leave a comment no how you think the new site looks.

In this tutorial, I will go through the way to make a randomly picked quote generator work on a modular level. This is so it can be added to and updated, ported and reused without having to copy a bunch of files.

This technique is a pretty easy one. Let’s start off by making the “quote.php” file.

This will cycle through 5 quotes that we will input in a minute. If you choose to add more cases, then you will need to change the “4” to the last case number you added. This is so it will cycle through all the quotes, not just the first 5.

Now we need to add the cases.

That is it for the “quote.php” file.

Full script

Now we will make a little page that it will go on. Nothing fancy, you can jazz it up as you see fit. Start off with the doctype, and all the required code to make the page valid.

Now let’s give the page some basic styles, fonts, colors, etc.

Now we can make a little box where the quotes from the “quote.php” file will be inputted in to the main file.

The Full main.php file is as followed.

This is how you would make a simple and nice little quote generator, to go on any site that supports php.

Try the demo.

Any questions, comments or concerns please do not hesitate to leave a note below. Thanks for your time.