Here’s a logo I’ve made up for Botanica Landscapes in Canberra.
After doing a lot of rough drafts with a Wacom drawing tablet I ended up with this. I find using a drawing tablet with the airbrush tool is a great way to create lots of rough drafts in a short amount of time.
I choose the two hand drawn trees rough as I wanted to promote the idea of hand made landscapes. The customer loved this idea as well.
First concept with earthy colours and a more refined lines.
The final concept. I didn’t think the earthy colours were bold enough so I changed them to blues. I think this will stand out more on t-shirts, trucks and other merchandise. Blue also has the advantage of being the colour of trust.
Botanica Landscapes are very happy with the logo so I’ll move onto the website design in the coming week.
So your project is nearly finished, now all you need is a website to get the word out. 
Unfortunately this stage of the project is often neglected, which is understandable. Programmers want to work on the actual application rather then the website. However, your visitors aren’t going to download your application if they can’t find the download page.
As a developer (and as a consumer), I see lots of software websites that could be improved. Here are a few tips for making a good application website.
- Show a screenshot of your application on the homepage
Most of the time, this is what I look for first. At a quick glance I can see if the application is going to do the job I want. I often download software based solely on the screenshot.
- Make sure the user can get to the download/purchase page within 1 click
Firefox has done this part right. Nothing works better than an eye-catching “Download Now” button. The goal of your website is to convert visitors into downloads, so it’s wise to get your users to the downloads page as soon as possible.
- Explain in 2-3 sentences what your program is and how it helps people
This should be the first thing your visitor reads. Make it short and to the point. Crimson editor has an excellent description on it’s homepage…
“Crimson Editor is a professional source code editor for Windows.This program is not only fast in loading time, but also small in size (so small that it can be copied in one floppy disk). While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java.”
- Host a demo of the application or the application’s admin section
Dont make your visitors type ‘admin’ and ‘demo’ on the demo login form, it’s annoying, auto fill the fields.
- Don’t use bad stock photography
Personally, I prefer software websites without any photos. But if you have to use them, don’t include cliche photos of people in suits or talking on cell phones.
People associate these type of photos with faceless corporations.
- Include a news bit
Often one of the first things I do when looking at an application’s website is scan for the latest news to see how active the project is.
- Screenshots and gallery
If possible, have a screenshots page with at least 5 – 10 good screenshots of your application.
A window is essentially just a floating div. We can make the div draggable using the Script.aculo.us Javascript library.
First, we need to create the window div. Here is the CSS I used.
.window {
background: #d8e7fe;
position: absolute;
top: 200px;
left: 200px;
width: 350px;
padding: 1px;
-moz-border-radius: 7px;
border: 2px solid #21416d;
}
.window h1 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
padding: 6px;
display: block;
background-color: #9cc6ff;
font-size: 13px;
margin: 0px;
}
And here is the HTML markup.
<div id="mywindow" class="window">
<h1>Example Window</h1>
<p>Click and drag this window around the webpage.</p>
</div>
I’ve used ‘-moz-border-radius‘ for rounded corners because I’m lazy. You’ll need to use corner images if you want rounded corners that work in more than one browser.
Now all that’s left to do is the javascript. As I said before, we’ll use the Script.aculo.us library which includes a handy Draggable function. Theres a quick guide on how to install the library here.
Once you’ve got the library installed, add this short Javascript snippet to the head section of your document.
<script type="text/javascript">
function init(){
new Draggable('mywindow');
}
Event.observe(window, 'load', init, false);
</script>
When the page loads, the init() function is called, which tells the library to make the div ‘mywindow’ draggable!
View the finished product.
I often see folder icons in web applications, so I thought I would write a quick and easy tutorial for creating one in Photoshop.
Create a rectangle with a tab using a gradient similar to mine.
Create a new layer, then make a lighter colored rectangle above.
Skew (edit > transform > skew) the second rectangle to an appropriate angle.
Then do the same to the bottom rectangle and give the top rectangle a white outline. I did this by simply duplicating the layer, moving the bottom one 1 pixel to the right, and 1 pixel up, then increasing brightness so it looks almost white.
I also fixed the tab in this stage.
Add a light shadow and you’re finished!
