I wondered for quite a while how to achieve this and firstly had divs and spans everywhere, then I looked at the data and realized that basically theres 3 lists of information; the product name, the quantity and the price. So heres the HTML:


<div id="wrapper">
<ul id="products">
<li><h2>Product</h2></li>
<li>black t-shirt - large</li>
<li>blue t-shirt - large</li>
<li>red t-shirt - small</li>
</ul>
<ul id="quantity">
<li><h2>QTY</h2></li>
<li>1</li>
<li>2</li>
<li>4</li>
</ul>
<ul id="price">
<li><h2>Price</h2></li>
<li>£40.20</li>
<li>£40.20</li>
<li>£40.40</li>
</ul>
</div>


The wrapper div can be set to any width and the shopping cart will stretch to fill the void. Heres the CSS:


#wrapper{width: 300px;}
ul{ float: left; margin: 0; padding: 0;}
#products{width: 50%;}
#quantity{width: 25%;}
#price{width: 25%;}
li{list-style:none; }
h2{display: block; margin: 0; padding: 0;}


View the semantic shopping cart to see how it looks, I think I could accomplish a lot more advanced shopping cart designs and also that this would be easier to maintain than its tabular equivalent. Your Thoughts?

Plee to the Browser Gods

Please give more emphasis to enlarging text, maybe implement the simple “3 T’s” icon for text adjustment and stop hiding this functionality in a drop down menu out the way, I know Internet Explorer 7 brought it a little more into the limelight but I truly think the “3 T’s” or at least a letter “T” maybe with a plus and minor next to it would be a better solution.

The “3 T’s” or the Letter “T” have well know meanings as users are used to them in Office Applications. They are common place and a recognized icon for text.

Display Shopping Cart

Description

The template tag nzshpcrt_shopping_basket displays the shopping cart, usually used to add the cart to the sidebar or header.

Usage

< ?php echo nzshpcrt_shopping_basket(); ?>


Display Category or Brand

Description

The template tag show_cats_brands displays a list of the categories and brands. Usually used to list all the categories in a sidebar

Usage

<?php show_cats_brands(); ? >


Display Products from a Category

Description

The template tag wpsc_category displays a list of the products from a specified category. Usually used to create category pages.

Usage

[wpsc_category=2, full ]


Display Default Products

Description

The template tag productspage displays a list of the products from your default category, you set your default category in shop settings.

Usage

[ productspage ]


Display Homepage Products

Description

The template tag homepage_products displays a list of the products you set if “display on frontpage” is ticked for each individual product. Usually used for you shop homepage.

Usage

[homepage_products ]

Initial Logo Ideas

Firstly I have decided that I want to create a really simple brand that will somehow encompass the initials (DB), I think by shortening the brand name the users association with the brand will be easier to remember.

I also want something more traditional with a feeling of literature to emphasize on the fact that this is a blog, this means the content should have presidency. So no shiny web 2.0 logos, no shiny edges and no reflections.

Font Styling

To reflect the tradition of writing or journaling and to embrace the design decisions I have already taken on Designbit I will stick with Serif fonts for the logo. Throughout Designbit I have used Georgia as I like the way the serifs look non anti aliased, and also because I like it in smaller font sizes with lots of letter spacing.

Color Choice

As for colors I shall reflect the colors already picked on the design of the blog, white(#ffffff), light blue(#E5F2F8), and bright pink (#FF6AB5). I always keep this website quite monotone and decided a 3 color palette (black / pink / blue) will allow the content more space to breathe.

Putting Pen to Paper

I am not an artist and for sake of ridicule I shall keep my scribbles to myself (coincidentally, cameras stopped working), I often get remarks that I write like a doctor or even a 5 year old, but vanity aside I always start brand identity away from the computer with my trusty notepad and pencil, I find now is a good time to go for a walk and for me the more green around me the better.

I am back from my walk with my dog (Puddles) and I have some great ideas for which I have scribbled down as soon as I got through the door:

{insert photo of scribbles - when cameras fixed!}

Concept 1: Shield

My first preferred concept is a shield with the brand initials on it - the idea being that the shield represents the tradition of the written word and could be modernized by adding a few cool vector swirls or even some grunge effects, shields do seem to be in vogue at the moment.

Concept 2: Simplified

My second preferred concept is taking my original idea of using the intials and simplifying it down to its most basic form, actually getting rid of the second initial and just associating the brand with the first initial (D).

Well I am not completely removing the second initial (B) but intersecting them together. Its feels like I’m finding the the lowest common dominator or making the logo into its simplest form by just using one main letter (D).

Logo Concept Conclusion

I like the idea of the shield but think it will be a little too jazzy / detailed for the blog design so I’m going to go with design concept 2, the simple Capital “D” with a lowercase “b” interjected within.

Just imagine If I could get my brand associated with just a single character - that would be quite an achievement.

Logo Concept Summary

So to summarize on the task ahead of me I have a checklist of features the logo should encompass: Serifs, Brand Colors and Extreme Simplicity. I also have my logo concept which fits in with these ideals quite well and I have had some exercise. Watch this space for step 2 : logo mock up.

This is also a great vid of Picasso’s work including the cubism movement:

Boagworld Podcast

This podcast aims to provide news and advice on website design and management without overwhelming you with techno babble! Hopefully it has something for everybody, whether you design, develop or run websites on a daily basis.

Media Artist Secrets

This podcast is well presented and is aimed at all media artist’s, the emphasis is on motivating and inspiring entrepreneurs and also features some great business hints and tips.

.Net Mag

The .Net Magazine podcast is well put together and usually features industry news and reviews and an in depth interview with a leading web designer / developer.

Small Biz Podcast

The UK’s first small business podcast. Interviews and practical advice for startups and businesses of all sizes. Real inspiration, real insight and the secrets of success from real entrepreneurs.

Rissington Podcast

John Oxton and Jon Hicks, broadcasting from their ex-RAF base office in Upper Rissington. Think of it as a web-geek version of Gardeners Question Time!

Wordpress Podcast

The Wordpress Podcast is a great way to keep up-to-date on all things Wordpress including plugin releases, updates, news and reviews and sometimes interviews and guest speakers.

Tweak Podcast

Tweak is all about the small stuff, making small adjustements in your life and business can make a big difference. This podcast is excellently presented and covers the process of web design in great detail from a freelance designers perspective.

South by South West Podcast

From the SXSW conference; the speakers are great quality and alot of its great listening from a multitude of web design and technology related industry leaders.

Creating mock-ups usually involves opening up a blank Photoshop of Illustrator document and laying out 2 or 3 different themes as to how the website will look, the mock-ups are often greatly detailed and take up a lot of time to produce. Each Mock-up usually contains a fairly accurate layout structure, a color theme, some even have an initial logo concept.

Mock-up Problems

If each Mock-up takes 2 or 3 days to complete that’s a lot of time wasted that could be spent in other areas, I also think the designer is sub consciously laying out the design in the fashion that best suits the theme they are creating and not a layout designed for the websites users.

I also believe the more choices you give clients the harder it is for them to choose and you will end up with a mish mash of design elements from each mock-up - don’t get me wrong the client should have some design control but they are paying you to be an expert in design.

What you are really doing in these initial 3 mock ups is proving your design skills by showing off a fashion show to the client - surely that’s the job of your portfolio.

My Mock-up Approach

I waste no time making three different mock ups, I don’t create a load of different styles and I do not make my initial mock-ups detailed at all. I use a three step process to collate specific data and create just one mock-up that represents my proposed design ideas:

1. Color and Feeling Chart

Instead of wasting my time creating a fashion show I use color theory and any existing companies branding to pick great contrasting colors to make the backbone of the companies brand. I show the client this in the form of a swatch with a description and the color chart that explains my color choices.

It also outlines what emotional reactions the colors provoke to the user and what characteristics the colors are associated with and why they are right for the company. I usually use Adobe Illustrator for this and export it as PDF to print off or email. I also discuss this with the client and get the client to sign this off.

2. Sitemap

I create a site map of the website from the data initially gathered from the client and represent this as a black and white chart that outlines the navigational structure and also how each page inter connects -I usually use Microsoft’s Visio for this and then export it as a PDF to print off or email. This is also signed off by the client.

3. Website Reviews

I will hand pick from the clients leading competitors websites and ask the client what he likes about different parts of their websites, do you like the curves here? does this sidebar look better on the left or the right? I will also throw in a few websites that I know will answer some questions for instance do you like a minimalistic website like Designbit or a curvy website like some other website?. Do you like straight angles or curly lines? Do you like the type on this website? etc

I collect this information and this will help determine the clients taste and how they want there website to be themed. After all they are the people paying the bills. I also take what I feel their chosen demographic likes also - but usually find user identification happens a little further along the design path. I outline my findings in a document and get the client to sign off on this too.

Its Mock-up Time

Now I will open up Illustrator and create one mock-up from the data gathered from the three steps above and this is a quick mock-up that showcases the colors we have picked the navigational structure and the theme that the client likes as well as the layout and typography.

I explain that until we delve deeper into the data gathering process we cannot possibly define the exact functionality and therefore most page elements position and importance cannot be calculated properly yet. I will show off how some elements will look but the mock-up concentrates on representing the findings so far plus a little bit of my design flare.

The great thing about working with mock-ups in this way is that the client is talked through the whole process and also makes the design choices themselves - they are kept in the loop throughout the whole process and will feel like they have contributed to the design of the mock-up. When you show them the complete mock-up they are happy with it because they are well aware why you used those colors, why you used that theme and why the navigation structure is presented in that way.

This process of creating one mock up is really trying to get the message across that if you take more time accessing the clients needs with well planned data gathering / analysis you will get the mock up that’s a good fit for the company first time. I also find I can complete this whole process in a day or two, and then you have already got some great supporting information to take into the next development phase , the planning.

Your Thoughts?

Please share your thoughts on design mock-ups and what process of mocking up do you use?, am I the only designer in the world who creates one mock-up?

KISS (I meant the acronym)

KISS (Keep It Simple Stupid) a lovely term obviously coined by some Yorkshire farmer talking about mud or beef or cheese - but annoying as this phrase is it works well. If your not that confident about your design skills or illustrator / photo-shopping then keeping things simple is the best way forward; simple typography; keep the amount of fonts down to increase neatness.

You don’t have to reinvent the wheel on every project; most companies just want a website that will get their message across and achieve their main goals if they want you to reinvent the wheel they will pay well for the extra work. So layouts can be simple easy to use and dependable, top main navigation a sidebar for lower navigation and obvious content areas.

One of the most common comments I receive when I show potential clients some of my works is that its “really simple to use” and “obvious”. You don’t always have to use flashy graphics with gradients, shiny effects and buttons for links and most the time this is unnecessary as fundamentally the Internet is full of hyper linked web pages linked together by blue underlined links - this is web education 101 and what your mum, brother and grandad will know about how the Internet works.

Learn a CMS

If you want to make any company happy nowadays you will have to supply them with a means of controlling content without having to rely on a expensive web designer to change the coding every time they want to update the website.

A Content Management System will allow the client to log in add/edit/delete and manage the whole website from any PC with a Internet connection. This is a big step up from static HTML and probably looks very scary but this will really differentiates you as a designer to your potential client. I use Wordpress, Shopify and Joomla and have found them invaluable tools.

Get a reseller account

Web hosting can be quite expensive for companies and often the idea of having to pay for hosting as well as your design services to smaller clients will put them off - if you can include web hosting for a year with your design / re-design then it may sway the deal. You can also reliably host your own company website and any extra projects you delve into.

Make industry contacts

Often you be asked questions by client that you do not know the answer to, the client doesn’t know how many different subcategories of web design they’re are and probably doesn’t know the difference between web design (design and front end) and web development (programming / back-end).

If you have a programmer / SEO/ designer / CMS expert / industry contact then you can say yes to their questions safe in the knowledge that you have the contacts to get the project completed and gain the clients trust with positive answers.

You are not lying to get the project, you are being hired to solve their web design needs and everybody in every industry outsources. I have lost count of the amount of times I have picked a industry contacts brain about their specialist subject and it has had a positive effect on my project. I have a handful of developers / designers that I can rely on and I know their rates of pay and how busy they are at all times.

Be competitive

I often challenge my peers to bets about marketing (how many diggs you’ll get), design competitions (logo design etc) and often lose dreadfully but its a great way to learn from one another and gauge how each other works and if you can work together on future projects.

Drop the dead donkey

If you try a side project that’s soaking up your valuable time and funds that isn’t working don’t be scared to drop it - I have just done this with a project I have invested in and now another great idea is getting that attention.

Drop the dead donkey

If the client is really indecisive, rude, overly demanding, wont pay a deposit, then don’t be scared to drop them - they will be more hassle than the projects worth. They are really nice companies and individuals out there looking for other nice professional people to perform services for them.

I cant believe the fantastic clients I often work with, really nice genuine people who are fair and respectful - I didn’t go freelance to work with anybody else.

Google Basics

If you run a normal search through Google and click “google search” Google will search for every word in your terms: and show pages relevant to your search. If you re-enter some search terms and click “im feeling lucky” Google will pull up the one website that it believes is most relevant to your search terms.

If you searched for “Web Design Blog”, the result that is returned will contain all the 3 search terms but not necessarily as a phrase or related in any way.

Google actually performs your search with the words you specify and in the order you have typed them. So to make a search more relevant you should always but the most important term first.

Google Special Characters

You can use special characters or operators to find results in a specific way. I will cover 6 special characters that will help you search more accurately.

Quoted phrases

If you put your search terms in quotes then Google will return results containing the exact quoted phrase in the order you have specified and containing each search term.

For Example if you search for “Anthony Brewitt” in quotes then the pages that are returned will show that exact phrase, not “Anthony had a dog called Brewitt”.

+ operator

If we want Google to search for a particular term we put the addition sign directly in front of the search term, this is usually used if there is a stop word like; the, I, and, Of etc. So if your search term was
“+the web design blog” Google will take the stop word “The” as part of the phrase. Note that there should not be any spaces between the operator and the search term.

- Operator

The exact opposite of the + operator. If you do not want a word to be in your search term then precede it with the minus operator, For example: “Book –by a.c grayling” . The pages returned from Google will not have the search term “by” within them.

~ Operator

This is called the tilde operator and is used to search for the word and synonyms of that word, a useful one for technical research. for example: “~ cat”. Just in case you didn’t know a synonym is a word that describes the identical or near identical to the original word. For instance Cat could return Feline or Pussy Cat.

OR operator

Use an uppercase “OR” between search terms and Google will return any of the search terms. Handy if you want all your search terms to be within your returned results. For example: “Web OR Design” will find pages that include either “Web” or “Design” or both terms, but not pages that contain neither search term.

.. Operator

A great way of searching Google for a price range. Say you want to search for a new Sony monitor and you have a budget of 100 – 400, you could set your price parameters using this operator. For example: “Sony Monitor 100..400″

Special Character Conclusion

I hope these special characters will improve your Google searching, I use them often as a lot of the time I agree to projects that will have one or two sections I am a little unsure of, thanks to these special characters I am confident I will find my solutions in Google quickly. Happy Googling.