Lightweight, portable solar panels for charging a variety of small electronics which everyone uses today on a daily basis: Mobile Phone, Laptop, iPhone/Smart Phone, portable media player (i.e. iPod or similar) and much more.

Our daily lives have started to revolve around these devices and now we find it hard to do without them. When they run out of power, it puts us into a bind. Having one small, portable device that is capable of charging most of these devices fast using the power of the sun is not only good for the environment, it’s a smart and practical solution.

Our products differ from competitors by their small footprint, their high quality (made in U.S.A.), their ability deliver a charge even in low light conditions and being more powerful despite their smaller footprint, thus charging devices faster.

Because of this we required a different approach to creating and designing a website which would explain and define our products to interested customers and potential buyers.

We required a new logo for the entire product line and a website that was in 2 parts:

• An informative part of the website which would, among other things, explain in detail the functions and superiority of the products,have lots of nice high resolution pictures, and have links to testimonials, support and press releases.
• The other part would be a web shop which would be seamlessly be integrated with a partner logistics warehouse which was capable of receiving orders from the web shop automatically and correctly fulfill them without any other input anywhere in the process. This way we could focus on marketing and the customer’s needs without having to spend time with logistics.

Scratchmedia delivered on every part. First they listened to what it was we wanted even though we really didn’t know what or how we wanted it done. All we knew was we wanted the website to look new, to look “Web 2.0”which is we realized is a term that is overused.

They took our basic ideas and formed a website concept that seemed to be what we had in mind. It was slick, easy to navigate which was another big requirement, and versatile.

The entire website used the Magento Open-Source web shop system as its backbone, which is a powerful tool, if sometimes a little frustrating to use at the beginning for non-IT people.

However, the Scratchmedia Team was always very helpful with any problems that arose or any questions that needed to be answered, even after the website was finished.

They quickly got us familiar with the Magento back-end and its different functions as well as how to easily use the CMS functions to edit different pages all together.

The Scratch team were always very communicative, keeping us up to date with progress and overcoming any problems with ease.

Overall, it was a very good experience for us. If we ever need another website done (which is more than likely) we shall definitely turn to Scratchmedia first.

I met Ben about a year ago on a seminar. We immediately got chatting about our ideas for the web, and how it can be used to help people help themselves. And that’s how GuruShot was born.

GuruShot.com is basically a Web2.0 application for sharing the world’s wisdom.

The world is full of amazing quotes that can really give you just the inspiration you need at any moment. But they tend to be found in books and long lists.

GuruShot.com aims to deliver the best wisdom the world has to offer to anyone just when they need it.

You can go on to GuruShot and type in a word or two into the simple text field. Then GuruShot will try to give you a wisdom quotation that matches what you’re looking for.

So if you want inspiration about peace, family, marketing, or intimacy – just type it in and see what you get.

GuruShot is also a smart system. You can teach it what works and what doesn’t. If the quote you get back inspires you, or if it doesn’t inspire you, you can just click a button. GuruShot will then learn what quotes best match each subject, so that it can help people better in the future.

Of course, you can also add your own favourite quotes. You just need to sign up, confirm your email, and start sharing. You’ll get no spam – just an optional daily quote.

Please test GuruShot out today. I’d love to hear what you think.

And don’t forget to tell any friends you think may like it!

Best,
Ben

What's the best layout for a blog front page? To show full articles or to show summaries of the latest post?

According to research done by Jakob Nielsen, using summaries works best with blogs that people don't visit every day. They are better at drawing readers in as they offer a broader selection of subjects and increases the likelihood that they will find something that interests them.

Here’s the home page of PhilosophersNotes.

Here are the features I see in its design (and the approach to design) that I think make it work.

• Simplicity
• Pixel-saving
• Design the content
• Focus
• Call to action
• Personality

First of all, and most importantly, this site design is simple. It does very little that it doesn’t need to do, and every single element is there for a reason.

Simple sites work better because (as “Save the Pixel – The Art of Simple Web Design” teaches), “Success is a function of Attention divided by Stuff”.

The more stuff you put on a web page, the less attention each thing is likely to get. Attention is pretty finite, but you have a lot more control over the amount of stuff on a page, so we should always aim to use as few unnecessary elements as possible.

There is only as much navigation as there needs to be. The branding is simple and clean. The page only uses a few different fonts (the main heading and the main call to action use their own typefaces in order to stand out).

Notice how each piece of content has at most one image. When your eye is drawn to a graphic, it easily finds the associated text.

The page layout is very simple, with clear logo, branding, headline, callout info, and call to action. You can easily see what everything on this page is without having to engage your brain. I call that “getability” and it’s the sign of a well-made web page.

There’s a great strap line “More Wisdom in Less Time”, which clearly differentiates and positions the site’s unique value proposition. And the sub-header concisely adds a little more to get the point home: “The ultimate personal growth tool. Giving you more wisdom in less time.”

The “Save the Pixel” approach teaches that every visual element should have a purpose: every word, every line, every box, every image, every gradient.

A minimal pixel-saving web design does not remove all visual design. What it’s about is removing stuff that doesn’t need to be there so that the elements that remain naturally draw attention. When you clear the page of clutter, you can actually make more of the remaining elements.

Because PhilosophersNotes.com has done away with all the unnecessary decoration, it has acres of space for the really important content. So the headline, all the product images, and the callout shots are large and noticeable.

Plus, the text is nice and big, which is good for everyone, by the way! Not only will people with vision impairments be able to read this with ease, but I could read it on my iPhone without zooming. And anyone viewing the site on a regular computer will also read the text easily, so there’s no downside.

“Save the Pixel” also tells us to “design your content, not the box it comes in”. If you remove all the content, signage, and branding from this page, what would be left?

I’ll show you.

Not a lot, is there? This is the extent of the decoration on this home page. Remember, don’t decorate, communicate! Try this with your own designs, remove the content, signage and branding, and see what’s left. Can you justify every element?

When you view this design, where is your eye drawn? To content, naturally! Why? Because there’s practically nothing else to look at, as I’ve shown above. Your gaze is drawn to things that are most noticeable. “Save the Pixel” lists 7 noticeability factors: size, contrast, colour, dynamism, position, space, and 3d effects. The philosophersnotes design makes great use of all the noticeability factors, and more importantly balances them with skill.

Notice how the proportionally largest elements are at the top of the page. The headline is the largest text, and its partner image is the largest image. That combination of prominent position and large size clearly says “start here”.

The background of the page is greyscale, so any colour you see draws your attention to content. The blue arrow at the bottom draws attention to the main call to action.

Contrast is used beautifully. The iPhone image, video, bookshelf image, and video camera keep your attention firmly in the content area.

All the content has a generous amount of white space, which helps make everything easy to recognise and to read. A slight increase in line-height improves the readability of body text. If the page has more decorative clutter, either the white space would suffer or the page would have to get longer.

There’s nothing actually moving on the page (unless you watch the video). But there are diagonal lines (see the main page graphic in the header, iPhone, yellow book, video camera, and big blue arrow). These diagonals create a sense of dynamism, which draws attention. Can you picture this page with everything arranged square-on? It would be far less interesting. Giving stuff a slant lends it immediate visual interest (but don’t overdo it).

3d literally makes stuff “stand out”. 3d is used minimally on this page, but it is there. The angle of the yellow book creates a sense of space, and it has a drop shadow that suggests it’s floating off the table. The blue arrow and the two blue call-to-action buttons have subtle gradients and shading that suggest a shape. Other pages use stronger 3d effects, without ever losing focus and clarity.

A web page that doesn’t give you anything to do is not going to succeed at much. Every page has a purpose, even if it’s to get you to read the next page! The goals of this page are:

• to get the reader either to choose to buy the mini books on offer,
• to browse more info on the site, if they need to know more,
• or to enter their email and download the 3 free samples.

There is no missing the third call to action. It is the biggest area of colour on the page, in conjunction with the text “Start here!” in a unique handwritten font (so it stands out) and red colour (so it stands out more). There are three blue buttons on the page, all of which are calls to action, so that colour is being reserved almost exclusively for one purpose. By contrast, the other links, while clear, are far less noticeable. The calls to action draw your attention more and intentionally leave you with bold next steps.

Finally, this is a site that clearly has a character of its own. You may like it, you may not like it. But if, like me, you connect with the language, you’re probably in the target market for this product. If it turns you off, you were probably never going to buy Philosopher’s Notes in the first place, right? My tip is to let every site you create resonate with a clear personality. Whether it’s stiff and formal or hip and irreverent, let your brand’s personality come through in every phrase, and you’ll connect with the people you want to connect with.

For more detailed tutorials and 20 redesign case studies, check out my best-selling ebook “Save the Pixel – The Art of Simple Web Design”.

Design is the discipline of creating a new solution to a problem. You can design anything, from a web site to a stadium, a sales pitch, a recipe, a logo, a social media campaign, or a component for a machine. If the solution did not already exist, you have done design.

Every problem has its own unique requirements. If there is no existing solution to the problem, you have to make one. That’s design. You look at what the thing needs to do, and use your imagination and experience to visualise something that does that.

You know a design is good when it achieves the result it is designed to deliver. The result you aim to achieve may be purely functional, measurable with hard data, or it may be an experience, which it’s less easy to measure.

Graphic design is the creation of new solutions to problems within the medium of visual communication, either in 2D or 3D, on paper or digitally. The output is usually something that can be reproduced in order to deliver its objective many times.

Graphic design output includes logos, web site user interfaces, tattoos, sketches for fashion or industrial design, typefaces, print, animated characters, advertisements, flyers, movie credits, newspaper headlines, and designs for textiles. This is just a small part of what can be designed graphically. What they have in common is output that will be consumed through visual media.

Web design is the creation of a new solution to a problem in the web medium. It includes graphic design, because the output will be consumed through a visual medium. But it goes further than the purely visual. It stretches to incorporate every aspect of a web experience.

For example, choosing the right text contents for a web page is part of web design. This text may be viewed on search engine results, which is part of the user experience. And the position in the rankings of that result is also part of the experience, so I would argue that search engine optimisation is part of web design also.

Designing a web experience may incorporate some or all of the following list of disciplines. Some come under graphic design, others are broader design.

• Logo design
• User interface design
• Copywriting
• On-site SEO
• Link-building
• Social media promotion
• Information architecture
• Navigation design
• Design for accessibility
• HTML mark-up
• Design for ease-of-use (usability)
• Selecting content imagery
• Flash animation
• JavaScript coding of UI elements
• Conversion rate optimisation
• Pay-per-click advertising

The bottom line is that all these skills and activities can impact the success of a web site and the experience of using that site. This shows the breadth of the web designer’s toolkit.
Anyone who only offers the graphic aspects is not a web designer. They’re a graphic designer who is doing graphic design for web pages. And there’s nothing wrong with that. But do not trust a person with only graphic skills to build your web site, and it will not be anywhere near as successful as it could be.

For a web site to live up to its potential, it must attract the right audience, and in the right numbers. That means it must be optimised to be found for people searching for what the site offers, whether they find the site via organic (i.e. non-paid) search, through advertising, social media, or PR.

It must also be easy to use and compelling enough to engage and to keep people’s attention. It must be easy for most people to read, even if they have a visual impairment or are accessing the site over a slow Internet connection or on a handheld device.

In addition, the site should be easy for everyone to use, regardless of disability, and should work on a range of devices. Otherwise, it will only reach a fraction of its possible audience, so it cannot reach its potential.
A successful web site must also sell. Every site has a purpose, which should be to generate action by the visitor. A site that sells is one that generates that action, whether it is to buy, to sign up, or just to read.

How will you know how well your web site achieves its goals, unless you measure them? So tracking traffic, the flow through funnels, and conversions, is all a part of web design. The intelligence this process generates will often stimulate you to look for new or alternative solutions that do a better job. This is sometimes called conversion rate optimisation.

If a web site does not do all these things, how can you say it has been designed? Is the whole site the product of a creative process with the purpose of creating the best possible user experience? Perhaps part of it has been. If the graphics have been designed to fulfill a purpose, but the search engine marketing, accessibility, usability, and conversion optimisation have not, you do not have a web design, you have some graphic design on the web.

At his blog, Amir Khella has a thorough post on how to build interactive prototypes of iPad applications using Keynote. In the post Amir shares his Keynote iPad template for download.

Apple's presentation making software, Keynote, is apparently becoming a popular design and prototyping tool. According to Luke Wroblewski, the reason why is that:

- It's efficient to work with
- It has fairly powerful drawing capabilities that allow you to design in high-fidelity
- It's great for showing process flows and interactions
- Its animation tools makes it easy to show how things like transitions and rich interactions might actually work

Is sketching, wireframing or prototyping the way to go?

In this short article, Tyler Tate concludes that different design methods aren't mutually exclusive. "Rather, each method is appropriate in a certain context. At the end of the day, it simply comes down to selecting the level of fidelity that gets the job done in the least amount of time. As it's been said, 'Laziness is the mother of efficiency.'"

Over at Smashing Magazine, Lyndon Cerejo has written a nice primer on prototyping. In the article, he outlines the prototyping process and discusses questions such as fidelity, deciding what to prototype, and how to select prototyping tools.

Balsamiq is an electronic mockup tool to develop desktop applications, web applications, web sites, RIA and iPhone applications. It uses a library of hand-drawn controls (intentionaly) which you can extend with your own.

There are multiple ways to share the wireframes (PNG, interlinked PDF pages, online versions,...) and to gather feedback. It is designed for collaboration, in face-to-face or online meetings.

"Put that pencil down - Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting."

Dana Chisnell has done some research into what happiness is and how to design happiness into user experiences. According to Dana, there are three levels of happy user experiences:

- Mindfulness: The feeling of being paid attention to, that the designer is being considerate of our needs and wants.

- Flow: The feeling being of fully focused in a task to the point where we loose track of time.

- Meaning: The feeling of fellowship, making a difference and being involved in something bigger than yourself.

In the article, Dana gives example of sites that have accomplished to build these types of happiness into their designs.