How To Make Your Next Website Design Pop

I found a Great article on @JustCreativeDesign. The Article is about making your Website Design POP!
Like popJunky :D

Layout Fundamentals

This is always extremely crucial with design, in all forms from print to web.
According to @motive you want to utilize your "above the fold".

"The part of a webpage that is visible in the web browser window when the page first loads is described as being ‘above-the-fold’."
Also you need to figure out somekind of design sense for this project. Whats gonna be your design comp?
Colors, Fonts, all that jazz.

Alignment and Grid

"Alignment and spacing in web site design creates order, organises the page and groups parts of the website for easy navigation. In the screenshot below you can see the guidelines in place ensuring everything is aligned"

For this, check out @960
Here you can download the grid system which comes with some images, and a template css and html doc.

---

The article over on JustCreative is filled with some few other awesome techniques and must have's.

iTunes U

My Latest and Greatest Discover!

So, after hearing about an iPhone Stanford Programing course @JeremyLevan I had to go and discover.
What I found was iTunes U

iTunes U is a collection of podcast from Universities.
The podcasts range from Audio to Video on any subject you could ever want.

• Psychology


• History


• Science


• Engineering


• Literature


• ANYTHING!

Right now Im big into cosmology and physics. iTunes U has a great episode with the University of Michagan called Saturday Morning Physics. This is an awesome series. Lately I have been downloading the casts, and watching them.
Im trying to become a genius!
Its absolutely amazing!

California Academy of Sciences - SF

For my field trip I chose, the California Academy of Sciences. I've been here several times, and every time I go I absolutely love it. Its the best place in San Francisco.
The CAoS holds tons of room for inspiration and imagination. Just the outside of the building is a work of art. And the magnitude and range of items within the museum is enough to fill your entire day.

Visually Sunning

The gallery of animals and fish showcase the stunning work of creation. The displays the CAoS uses are enough to suck you in to full interest.
I noticed that the overall space of the rooms were empty and dull, but the explosion of color from the items made the entire building beautiful inside.

HUGE IDEAS

One thing that always blows me away is the comparison to life, in huge quantities or size.
I noticed with interaction design. HUGE things get a TON of attention.

Shocking the masses

A lot of what I believe in today, is breaking the rules. When you arent afraid to tell it like it is, or be who you are, you can Shock the Masses! I compare this to interaction design by Breaking the rules.


THINK OUTSIDE THE BOX!!!

This is FUN!

I notice in everything that I interact with on the web and in museums, its all about originality and presenting ideas in new, fun, and interesting ways. You have to be entertained with what your interacting with. And what ever can captivate your mind, will entertain you.
This can be as simple as something nice to look at. Something nice to touch, hear, smell, or even taste.
Though, please done lick the giraffes.


Stay entertained!!!

10 Best CSS Practices to Improve Your Code

Once again I found an awesome, extremely useful article on Web Designer Depot. Its about 10 awesome practices to improve your CSS code. Most of these Ive used, seen @SebastianJT, or are learning.

1. Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.Use a structure that works best for you while keeping future edits and other developers in mind.Resets and overridesLinks and typeMain layoutSecondary layout structuresForm elementsMiscellaneous--- WDD

2. Title, Date and Sign

Let others know who wrote your CSS, when it was written and who to contact if they have questions about it. This is especially useful when designing templates or themes.

3. Keep a Template Library

Once you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.You can save multiple versions for multiple uses: a two-column layout, a blog layout, print, mobile and so on. Coda (the editor for OSX) has an awesome Clips feature that lets you do this easily. Many other editors have a similar feature, but even a simple batch of text files will work nicely.

4. Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

5. Hyphens Instead of Underscores

Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than #col_alpha.This I have never heard of. Im an underscore guy, due to my habits in coding with AS3. Most of all my HTML is either a combination of camelCasing or under_scores.

6. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.

7. Optimize for Lightweight Style Sheets

Using the above tips, you can really cut down the size of your style sheets. Smaller loads faster, and smaller is easier to maintain and update.

8. Write Your Base for Gecko, Then Tweak for Webkit and IE

Save yourself troubleshooting headaches and write CSS first for Gecko browsers (Firefox, Mozilla, Netscape, Flock, Camino). If your CSS works properly with Gecko, it’s much more likely to be problem free in Webkit (Safari, Chrome) and Internet Explorer.

9. Validate

Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.

10. Keep a tidy house

Separate browser-specific CSS to its own individual style sheet, and include as needed with Javascript, server-side code or conditional comments. Use this method to avoid dirty CSS hacks in your main style sheets. This will keep your base CSS clean and manageable.

-->
http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
<-- AWESOME VIDEO

Another Thing I found was a RT from @SebastianJT about Object Oriented CSS. Check out this video, its pretty interesting.It talks about coding for re usability for building modules with in web pages. Very Interesting.

9 Tips For Brand Building With Web Design

Web Designer Depot

I read a great article on Web Designer Depot about building a brand with Web Design.
This article had the top 9 important things to concentrate when branding. Check them out.

1. Color Its all about the color. How do you spill paint on the page?

"The choice of a good color palette is very important in branding. Color isn’t just aesthetics — it stimulates various emotions and carries with it subconscious associations to various things and characteristics." - WDD

2. Character

Of course we know that in branding, you have to have character. How do people see your brand, what is there opinion or perception..
"Does your brand have character? Infusing your brand with a little personality can help you define what it stands for.Is the brand all about stability and safety so that your customers can be sure to rely on you? Is the brand fun and down to earth?" -WDD

3. Emotion

ONCE AGAIN CHARACTER
"Emotion is another factor to consider when building your brand. What feelings and emotions do you want people to experience when they visit your site? What sort of things do you want them to associate with your brand?" - WDD4. ConsistencyDont be too choppy in your design. people need to know where they are, and whos page it belongs to.
"To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them." - WDD

5. Reusing code and visuals

Consistency Again!
"Consistent visuals and layout allows you to reuse more of your content, be it stylesheets or images. This means that your site will load faster as the user’s browser doesn’t need to download as many things — old images and CSS are already stored in its cache." -WDD

6. Size and position of the logo

Yo, you gotta throw your face out there. Let people see, and know who you are!
"The accepted norm when positioning your site’s logo is to put it in the upper left area of the page." -WDD

7. Value proposition

"When a visitor arrives on your site for the first time they take the first few seconds to orient themselves. Is this the right site? Does this look interesting? What is this all about? To answer these questions you should provide a clear and concise value proposition to your visitor." -WDD

8. Tone of voice

"The language you use on your website needs to reinforce your brand’s character and personality. If your brand is a friendly and down to earth, and your audience are young, tech savvy people, then informal and fun tone of voice may work well for you." - WDD

LEGIT!

Check out the rest of the article on Web Designer Depot!

Project Persona

Name: Albert Russell
Age: 24
Race: White
Computer: Mac OS
Gadgets: iPhone, Nintendo DSi
Average Hours on Computer: 4-6 perDay
Job: Works at an electronic store

About:
Albert Russle is your average american guy. Hes a computer geek, has all the cool gadgets, and spends his lonely friday nights surfing the internet. Hes into networking and social networking websites. When hes not on facebook or myspace, hes writting blog articles and twittering his wacky findings on the internet.

His use with Faviii:
Albert found Faviii, after reading about it on a blog site. He used faviii to save and index all his book marks. With faviis blog integration and facebook widget, Albert was able to show the world his bookmarks with a cool mini icon wall.

10 Ways to Launch a New Blog with a ‘Bang’

Web Designer Depot
This is great for any one who is interested in starting an awesome blog, and looking for some great ways to launch!
This article had some awesome start up steps to get your blog rocking. I read through and decided to summarize.

1. Get some content!

Once again, blogs are all about content. From what I've noticed and learned, blog sites that have new and original content are the ones that rock!Abduzeedo produces at least 4-7 blog posts a day! That is a huge ammount of work. Of course though these articles are being supplied by several blog readers, who are content providers.
Blogs can be ran by a single person, 1-4 posts a day.
Or multiple people (subscribers) 3-6 blog posts a day!

2. Promote using Twitter

Of course this makes a lot of sense. I've notices a boost of 90 page views a day when I place my link on twitter!I found some useful twitter widgets out on the web.
Check out
http://www.twitterbuttons.com/This site has some cool little button generators to get people following or retwittering your content.
In ShortThis article had some awesome other tips. I think though the most important are the content, and the promotion marketing.Blow up your product and get people noticing you or following you on twitter. Build links and post your site out for the world to read and find.

Other smart ways to get your site launched.

DIGGGGGGG
Of course!

Final Project Proposal

Project Name: Faviii

Scope:
faviii is a social networking application/widget.
faviii purpose is to build networks and link relationships between websites. You collect and save bookmarks into the dashboard or by using twitter updates. Your bookmarks generate a favicon which is stored into your crate. Your crate then displays the icons in a grid. The icons then can be fed into a blog, or your personal site. Each icon is hyperlinked to the site that created them, giving a fast easy linked list.

Icons are generated in 3 ways:
Favicons: Favicons are generated by using Googles s2, favicon generator.
Gravatar icons are used by taking a users email and generating a gravatar icon.
Manual icons, upload forms are available for icon uploads.

Target Audience:
Faviiis is going to be created for people who write, read, and maintain blogs. This application is also targeted to Twitter users, since sites will be able to be bookmarked using twitter updates.

Techs:

Faviii will have a full user login with username and password. Each user will also have a custom faviii page, where faviii pages can be bookmarked and linked.

Technology:

PHP

Javascript

HTML

CSS

10 SEO Techniques All Top Web Sites Should Use

I found an awesome resource online.
@Abduzeedo!

10 SEO Techniques All Top Web Sites Should Use

1. Title Tag

A page title is the first thing a search engine will look at when determining just what the particular page is about. It is also the first thing potential visitors will see when looking at your search engine listing.

2. Meta Tags

Be sure to include a few relevant keywords in this tag, but don’t stuff it with keywords either. The description tag should read like a sentence — not a keyword list.

3. Proper Use of Heading Tags

Your main page title should use the h1 tag — this shows what your page is about. Use of additional tags, such as h2 and h3 are equally important by helping to break down your copy. For one, you’ll see a visual break in the text. But as far as the search engines are concerned, it will automatically know what your topics are on a page. The various heading tags give a priority to the content and help index your site properly.

4. Alt Attributes on Images

In terms of SEO, putting a brief yet descriptive alt attribute along with your image, places additional relevant text to your source code that the search engines can see when indexing your site.

5. Title Attributes on Links

Including title attributes on links is another important step that any good web site will have. That’s the little “tool tip” that pops up when you place your mouse over a link. These are especially important for image links, but equally useful for text links.

6. XML Sitemap

This list of ALL pages / posts / etc. of your site also includes information such as the date the page was last modified, as well as a priority number of what you feel the most important pages of your sites are. All elements that help the search engines properly find and link to all content of your site.

7. Relevant Content

Having content relevant to your main page or site topic is perhaps the most important SEO aspect of a page.

8. Link Building

However there are many reputable and niche directory sites that you can use to submit your web site, or specific blog articles to. With genuine content — especially if you have a blog — you’ll be able to generate links with other web sites and blogs, as well.

9. Social Media

Although technically not SEO, Social Media is such a growing factor in getting your web site noticed, that it’s an important element to include in your plan.
TWITTER

10. A Few SEO Don’ts — Flash and Splash

Flash sites are cool, for showing off, but not for optimization.

ARTICLE SOURCE:
http://freelancefolder.com/10-top-seo-techniques/