Take a look at your toaster. Now your DVD player. Next, your coffee machine. They have some solid gold advice for your social network.

It might sound crazy, but all of these appliances have design standards, and the Web is no different. Consider the 'play' button on your old VCR. When users know what that button is, they can recognize it on their DVD players, MP3 players, online videos and more, and instantly know how to use them. 

Changing the Web standards of your network is like forcing your user to learn a new language.

It asks them to give up on ideas that they are familiar and comfortable with, and that means they spend more time learning how to interact with your site and less time actually interacting with it. 

Take a look at your page stats over at crazyegg.com and your Google analytics - You may be shocked at how impatient your users are. No one wants to buy a toaster they don't know how to use. On the Web, that means going over to another site. 

How do you apply these standards to your site? 

- Prioritize.
Your toaster has one giant button to push the toast down and to warm up the coils. That's the first priority. The other controls are for advanced users - those who want to control the darkness of their sliced bread. 

Prioritize your site and think about what they'll most likely be looking for (or what you want them to be looking for) on every page. Make sure that option is highlighted in an easy-to-find way. Let users fine-tune if they want to, but make access and interaction as fast and simple as possible. 

- Stay traditional, even if you don't.
We talked about that big green triangle on the DVD players, the universal signal to users that "this starts the movie."

Design a DVD player without that triangle somewhere and you're guaranteed to confuse

people. 

You may have the next killer site that will take the world by storm, with new ideas and a new architecture all its own. That's great. But it won't matter if no one knows how to use it. If you can use a button, use a button; if you can use a text field, use a simple text field. 

If you have a stunning, simpler idea for how these things can work better, try them out, but do so carefully. Once you understand what users are looking for, you can play with the rules, or present them in a new way. But you must learn what works for your users first, and work to those expectations.


Hopefully all this talk has left you seeing your toaster, and your Web site, in a way that leaves you hungry to improve - or, at least, hungry for some toast. 

Is it just me? Did I miss something? I've been known to do that and anounce a new socialgo feature after it had already been discontinued! haha.

The New Profile Designer

Well it's here.. the new Socialgo Profile designer. Now we can just throw in the towel and become mini myspace? SG Forbid! this thing allows you to tell your members what they can touch and not touch... which on my site there will only be a few options - cause i'm that way.

instal and configure

You will find the little doodad in your SG widget box on the right hand side of your Layout Manager as usual. You need to drag it to your "I" zone at the very bottom then double click (this feature doesn't seenm to work in the ne safari) or click the edit widget up top and you get this..

look at all those Options!

Now if you check all of them your members can do a beautiful page, effecting many parts such as the content boxes, the header font, color, background, nav, nav color, background image, and the list goes on. Just look at what your site will look like.. isn't it exciting! 

How it works

Once you configure your new shiney widget your members will see a new button on thier profile page right there with the other configure buttons.



Now, the widget kinda messes up your site when it opens, and it has a few bugs at the moment that I won't go into because I'm sure SG is busy fixing them as I write. you'll the drop down at the top of your page, and there you can select eather color or advanced.





Color takes care of Color;) and advanced is your background images.It's pretty straight forward. The changes happen as you change them, close the widget and your done. Here is what I did in my profile.

In what you love, there is no end to inspiration.

I won't lie. I was a terrible hack when I first started web design. I would grab CSS from this site and that, HTML here and there, but it showed, they all looked like frankenstine, because they were ideas of many different people, and as much as I want to, I can't make another artist's ideas look good. 

Quit making it such a dredge by forcing creativity upon your self that is not yourself. It really does leave you with a un-satisfied taste in your mouth, because, you go back and look at the stuff you hacked from, and there is something missing from yours. some balance or invisible grid you can't quit make out. It makes designing your web site more of a experiment than a creative decision.  I'm not talking about inspiration. I constantly find inspiration in other work and try my own twist on their idea. I'm talking about the code and graphics. 

Design what you love 
What do you love? Do you love the ocean, or rusty old trucks--the candy dish your grand mother had on the dresser beside her collection of glass angels. 

I loved junk. My Grandfather had a thrift store, and it was full of junk. Old junk, that even back then I couldn't believe people would buy.  Every time we came to spend the day with him, he would let us pick one thing out of the store to take home. I usually went for the army gear, rusty grenades (no pin :), helmets and canteens. As I got a bit older I started picking photographs. He would buy from estate sales so there would be boxes of boxes of old torn weathered family photos. What people did with them back then? I don't know. But I loved them. I still do. I go to estate sales and buy pictures of their family, old letters and medical forms. 

I use these in my designs, or for inspiration in a design.  I almost can't get passed flowery old textured looks, but I have to to keep my job. Everyone wants the web 2.0 slick minimalism.  Don't get me wrong, I have a special place in my heart for that kind of design too, but it is not my true design. 



Put it together
To incorporate what you love in to your designs is one of the most satisfying  accomplishments a artist can have, especially when you do it well, which is about half the time. 

But you say, "I don't know how to incorporate what I love".  Everything has a feeling to it, and sometimes that feeling is all you have to go on in design. You may love women :), well women have inspired great design all through time. Think of the majestic curves, and the soft textures, the colors of beige, pink, stunning red lips, all of the tones of brown in her hair. The Ocean is liquid, so make your site a liquid design with subtle colors and make use of blur, smear and ripple.  Even video games bring about certain shapes and colors in your mind. Take a snap shot of your video game in play, horizontally blur it, brake it up, copy and paste until it's unrecognizable as that game, but instead colors, balance, shapes and harmony. 



The zen of ones and zeros
In what you love, there is no end to inspiration. When you start to indulge this part of your design you will be amazed at how far it will take you. And don't ever take the easy way... As in the example above, don't put pink flamingos and pictures of the bahamas (unless your a travel agent), Don't just put a woman's body (unless your Zauku), dig deeper. Challenge yourself by scanning things that represent that love, find colors that best represent the many emotions it gives you. Shapes that harmonize.

Your on the computer all day anyway, why not make it something that adds to your life rather than takes from it. Yes, you can have spiritual, existential moments even with ones and zeros.  

I've been a designer for almost 15 ears, though most of that time was spent in print and video graphics, I love web design the mostest. I think I love it so much because it doesn't have to end. As a songwriter I learned a long time ago that the joy was in the making more than the product, and with web design, the making never has to end, especially with your Socialgo Template.  

Another reason to love the web is it provides the perfect problem for creativity to exist.  Creativity is problem solving -- that's it. The greater the problem, the greater the creativity it takes to overcome, and as we all know, the web is one big problem, because it evolves constantly, never sagnet, never standing still. 

Have you ever had someone say, "Just do whatever you want." I hate that. Because there is no problem to solve. It's much better when they say, "Our colors are dirt brown and lime green, and our logo is two feet long."  

I find as the years go on that I  have more and more customers that tell me to do whatever, so I've started providing my own problems, to force me to solve them with creativity.

Working with someone else's code is always a great creative problem, so Socialgo is just one big problem. Because you can't move the menu above the header -- you can't put a class or ID where there is not one and so on. 

So here we have the perfect formula for successful creativity.  Don't get frustrated--get creative. See it as a adventure. Try something that our not sure is possible, or try something you don't know how to do. 

If anyone asks me how to learn coding of any type. I tell them go out and sell a web page, specifically with something you don't know how to do. Tell your wife and children you will see them in two weeks, and lock yourself in a room until the job is done. By the end, you will have learned more than a semester at college. Then of course you will get the call that it doesn't work in IE6 7 or 8 and you have to lock yourself in a room for another 3 days. 

In the same way, charge yourself to do something your not quiet sure how to do, and commit to it until it is through. continue to do this with any code you want to learn. I tell you, most of the great coders, CSS, HTML etc.. I know have done it this way. I don't know many, actually only one, that went to school for it.

If you get stuck give me a ring, or widget lab is real helpful with SG. Just continue to challenge yourself. Just make sure you backup every thirty min. Keep them by date and time so you can always step back if you need to. Or, you could just buy a mac and use CSSedit.  

We're going to mak a little web 2.0-ey starburst and then place it in the header of our Socialgo Network. We will use this as a button for prosocailgo that directly links to our latest  CSS 101 series. But first things first. Here is how you create the graphic using Photoshop. 



Create a new doc around 200px by 200px.  Now select the shape tool in the tool bar.

 

In the toolbar at top center you will see the Shape drop down click on it and look for the starburst shape. If you don't see it, then click the options drop down (a small arrow, top right of pallet. ) and select all. You should find it now.. 

 

click on it and draw a shape hold down the SHIFT key to keep it proportionate.  you will need to fill this shape with the color you want I went with black.

 

Once you find the color, click ok and fill the shape by using key command alt + Delete. You have to colors in the tool bar. The foreground (the one ontop) the background. You can use this key command to fill with either foreground or background. Foreground is alt+delete, Background Command or control Delete.  

Now Make a new layer above the shape.
 

Now select you marquee tool (the dancing ants tool)



Now drag a circle once again holding the Shift key to keep it a true circle. Draw it about 40% to %50 over the shape creating a half moon.



While it's still selected,  (make sure your on the new blank layer) fill it with white. you can do this with key commands b hitting the D key, that sets your colors to default (black and white.) then hit the  X key, that puts white to the foreground, and as we know you can now fill it with alt+delete. 



Now we are going to delete the outer section of this white circle. We will retain the starburst shape by using it as the selection for deleting.  

Ok, Make sure your new white layer is still selected and  caommand (apple) Control (sucky computers) CLICK the shape's mask layer.



You will now see that the shape has been selected with the dancing ants. 




Now we want our white highlight to be a few pixels in from the edge of the shape. So while this is still selected go to your SELECT menu drop down and click Modify > Contract. In the Pop-up enter 3 for three PX, press enter.

Now don't touch anything and go back to the SELECT dropdown and select "Inverse"



Hit Delete. You have now deleted the outside parts of the white, and left a cool little outline for our highlight.

That Highlight is too bright so we will just drop the transparency. NOTE: it's also a nice touch to do a very subtle gradient on this highlight, from White to transparent. But first transparency. Select the layer and slide your transparency down to around 30%. 



Now for a few effects. We will put a outline at 1 px, with a color that is only a few degrees bellow our starburst color. So I'm using a very dark gray.





While we have that open select the "drop-Shadow" radio button at the top of the panel.  adjust the occupancy to about 50.



Almost done. Now on that starburst shape we created we want to make a gradient to give it some more dimension. 

The way we will do this is close to the same way we deleted the white circle. Create a new layer, while the layer is still selected Control or Command click the starburst mask, just like before. 



Make sure the blank layer you just created is selected and go to your color picker on the tool bar. Now to do our very subtle gradient, I'm going to pick black as my  foreground and a few degrees lighter gray for my background. Now we are going to fill that selection that should still be dancing ants on the stage. 



Select Gradient tool and then click the gradient properties in the horizontal top toolbar. You have the option (usually default) for the foreground to graduate into transparency -- we don't want that, we want the one that is fading our foreground to our background color.



Now drag the gradient to diagonally across the selection. (It it's still not selected, just command click the shape mask again, then select the blank layer we want to fill. )



Well thats it! You can of course play with it more, try some different gradients, maybe bevel / emboss.  I'm just going to throw some text on there (text with slight drop shadow) and we're done. In part two we will put this into our header. If you want to see a example go to littlepraerbox.com look in the banner and see our beta burst. this one is not linked though, like the one we're going to do.

 


>>>Download PSD Starburst 2.0
GoTO: Part 2