Here's the part where I show you my planned layout for the client site. Luckily it's pretty simple so I shouldn't have to rely on graphics to show you, which is good because I don't have any.
The setup is really simple, partly because I'm new to website design, mostly because the client doesn't spend much time on the internet. So going with an elaborate and confusing layout would have been useless for her. Keeping it simple will make it easy for everyone to use the site.
The index page is also the home page, and a display page for new products. The client sells jams by the way. There will be a page listing what products are for sale, as well as a contact page so that people can send her an email about making a purchase. These were the required pages.
The extra pages - which were my idea - were more to improve her business image. There is an about page, with a small bio about how she started her business, and an awards page that lists her dozens of accolades in the field of cooking. This would serve as proof of the quality of her products, something every consumer should be looking out for.
The only other page I think may be necessary is a thank page, to confirm when a contact form has been sent. This one is a little iffy at the moment, as I'm not sure how well versed the client is with regular emails, let alone PHP forms. We shall work on this.
So here's the basic navigation, very linear I might add;
index (home) page
about (bio) page
menu (products) page
awards page
contact page - 'thank you' page
Every page is accesible from every other page, except the 'thank you' page, because it's only purpose is for assurance, rather than any actual content.
Monday, June 14, 2010
Client Website - Research
Okay, time to get up to date on my blog. So sorry I've been ignoring blog, I've been very busy.
Before I started working on the mockups, I did a little research on the competition. Here's a summary of some of the websites I looked at and my impressions;
Grainge Jams (http://www.graingejams.com.au/index.htm)
The Exotic Jam Factory (http://www.exoticjam.com.au/jam_factory/index.html)
I was seeking out some local small businesses similar to Monica’s to see what the competition was doing. Not surprisingly, there weren’t that many out there and I only managed to locate two. I can’t say that they’ve influenced my design, but they have convinced me not to be so boring.
The Exotic Jam Factory website is dull, and does nothing to interest me and possibly anyone else. I feel it was a bare bones task to make and all that was asked of whoever designed it was the bare minimum to get his business on the web.
Grainge Jams is little has a nicer layout, a little more interactivity, and better use of colour. But I’m not sure I’d use blues and greys when talking about food. I would think that websites about food would use more vibrant colours, and invoke some hunger feelings in the viewer.
Ozganics (http://www.ozganics.com.au/index.shtml)
Organic Road (http://www.organicroad.com.au/)
Organic Food (http://www.organicfood.com.au/)
With these sites I was looking at ways that other companies advertise their all natural food products. Monica’s jams are also organic and it would be wise to emphasize that quality. These websites work for businesses with a much larger target audience and capacity than Monica’s website will, but they can still be used for style ideas.
Ozganics is a nice website, with good layout and navigation. Colour is much more apparent with on this site, but I wonder if that many colours is necessary? Again I ask if blue is a wise choice for advertising food. Also, I’m not I like the font of the content. It looks a little like Times New Roman without the serifs, and I hate that font. It looks too technical.
Organic Road is a beautiful site. The colour scheme is simple but effective. Use of white space gives the impression of clarity and purity, important for all natural foods, while the green gives an organic, natural feeling. Great navigation, nice typography, this is a well made site.
OrganicFood.com.au is very similar in appearance to Organic Road. Whether this is intentional or not it sort of defines a theme for these websites. There are notable differences, like the banner and navigation. Organic Food got a little fancier with the presentation. The design of the navigation bar is inspired, a technique I may mimic for Monica’s website. The uneven appearance of the link buttons and underlining is interesting. It gives a sort of untamed nature feel, again working on that whole organic and natural angle.
Naturally Good Food (http://www.naturallygoodfood.co.uk/)
This is the only site I’ve reviewed that is from oversees. I was focusing on Australian sites mostly because they are more likely to represent views and beliefs from our culture. But Naturally Good Food is exactly what I’ve come to expect from health food sites. While a little more structured than some of the other sites, it stills runs with a predominantly white space and green colour scheme.
Before I started working on the mockups, I did a little research on the competition. Here's a summary of some of the websites I looked at and my impressions;
Grainge Jams (http://www.graingejams.com.au/index.htm)
The Exotic Jam Factory (http://www.exoticjam.com.au/jam_factory/index.html)
I was seeking out some local small businesses similar to Monica’s to see what the competition was doing. Not surprisingly, there weren’t that many out there and I only managed to locate two. I can’t say that they’ve influenced my design, but they have convinced me not to be so boring.
The Exotic Jam Factory website is dull, and does nothing to interest me and possibly anyone else. I feel it was a bare bones task to make and all that was asked of whoever designed it was the bare minimum to get his business on the web.
Grainge Jams is little has a nicer layout, a little more interactivity, and better use of colour. But I’m not sure I’d use blues and greys when talking about food. I would think that websites about food would use more vibrant colours, and invoke some hunger feelings in the viewer.
Ozganics (http://www.ozganics.com.au/index.shtml)
Organic Road (http://www.organicroad.com.au/)
Organic Food (http://www.organicfood.com.au/)
With these sites I was looking at ways that other companies advertise their all natural food products. Monica’s jams are also organic and it would be wise to emphasize that quality. These websites work for businesses with a much larger target audience and capacity than Monica’s website will, but they can still be used for style ideas.
Ozganics is a nice website, with good layout and navigation. Colour is much more apparent with on this site, but I wonder if that many colours is necessary? Again I ask if blue is a wise choice for advertising food. Also, I’m not I like the font of the content. It looks a little like Times New Roman without the serifs, and I hate that font. It looks too technical.
Organic Road is a beautiful site. The colour scheme is simple but effective. Use of white space gives the impression of clarity and purity, important for all natural foods, while the green gives an organic, natural feeling. Great navigation, nice typography, this is a well made site.
OrganicFood.com.au is very similar in appearance to Organic Road. Whether this is intentional or not it sort of defines a theme for these websites. There are notable differences, like the banner and navigation. Organic Food got a little fancier with the presentation. The design of the navigation bar is inspired, a technique I may mimic for Monica’s website. The uneven appearance of the link buttons and underlining is interesting. It gives a sort of untamed nature feel, again working on that whole organic and natural angle.
Naturally Good Food (http://www.naturallygoodfood.co.uk/)
This is the only site I’ve reviewed that is from oversees. I was focusing on Australian sites mostly because they are more likely to represent views and beliefs from our culture. But Naturally Good Food is exactly what I’ve come to expect from health food sites. While a little more structured than some of the other sites, it stills runs with a predominantly white space and green colour scheme.
Sunday, May 16, 2010
I Hate Basekit
I'm writing this entry 'cos I feel like bitching.
After labouring for hours on my website design mockups for this Basekit competiton, when it finally came time to try building with Basekit I was quite shocked to discover that the simple, easy-to-use software was not simple or easy-to-use. After repeated attempts to import my PSD file in a way that didn't completely squash my design, I spent another two hours trying to piece together the content, which usually ended with me pounding on the keyboard like an angry gorilla.
Even worse was the utter lack of support for even one of the problems I faced, wasting even more of my time as I tried to make sense of everything myself. After spending more than half the night just getting the most basic of elements set up, I decided to call it day and try to finish it tomorrow. When I came back, I discovered my login details didn't work, my email address was invalid, yet for some reason what little I had managed to publish of the website remained.
I am now left with a third of a design to submit for the competition and no way to complete it. Needless to say, I am quite frustrated with Basekit. If I had to give the experience a rating of one to ten, I would say it thoroughly sucked.
To prove my point, here's the design I wanted to make:
And here's what I accomplished on Basekit:
I don't think I'm gonna win with that for an entry, but I don't have much choice. No way I have time to go through all that again. You can check out the site here if you want, but it's not gonna get any better. Basekit sucks.
http://smp.basekit.com/
After labouring for hours on my website design mockups for this Basekit competiton, when it finally came time to try building with Basekit I was quite shocked to discover that the simple, easy-to-use software was not simple or easy-to-use. After repeated attempts to import my PSD file in a way that didn't completely squash my design, I spent another two hours trying to piece together the content, which usually ended with me pounding on the keyboard like an angry gorilla.
Even worse was the utter lack of support for even one of the problems I faced, wasting even more of my time as I tried to make sense of everything myself. After spending more than half the night just getting the most basic of elements set up, I decided to call it day and try to finish it tomorrow. When I came back, I discovered my login details didn't work, my email address was invalid, yet for some reason what little I had managed to publish of the website remained.
I am now left with a third of a design to submit for the competition and no way to complete it. Needless to say, I am quite frustrated with Basekit. If I had to give the experience a rating of one to ten, I would say it thoroughly sucked.
To prove my point, here's the design I wanted to make:
And here's what I accomplished on Basekit:
I don't think I'm gonna win with that for an entry, but I don't have much choice. No way I have time to go through all that again. You can check out the site here if you want, but it's not gonna get any better. Basekit sucks.
http://smp.basekit.com/
Monday, May 10, 2010
Basekit Website Competition
Here's a few mockups for some website layouts for Basekit's istockphoto competition.
Monday, April 12, 2010
Web Design Semester 2 Test (13.04.10)
1. What is a Dreamweaver Template?
A template in Dreamweaver is an established design layout that can be used multiple times to make pages for a website. By default, everything in the template design will be locked and uneditable, but this can changed by defining editable regions in the template file. This way, only minor things like content and images can altered on each page.
2. What are the advantages of using templates?
Creating new pages from a template is much faster than having to recreate the same design everytime you need a new page. Templates are faster, more efficient, and minimize the risk of you screwing up the design or a piece of code somewhere.
3. What are 'editable regions' and how do you set them up?
An editable region in an area on a template file that allows webpages made from the template to be edited and changed as required. To define an editable region, select an area on the template file you wish to change, then go to Insert -> Template Object -> Make Editable Region.
4. What are 'repeating regions' and how do you set them up?
Are repeating region is similar to an editable region with an added benefit. Everything within the repeating region can be duplicated down the page with a simple click. The additional regions can also be edited to change their appearance and content. To make a repeating region, select an area and go Insert -> Template Object -> Make Repeating Region.
5. What are 'optional regions' and how do you set them up?
An optional region is also like an editable region, and again with one little difference.... I assume. I'm actually not to sure what that is, because I haven't used one myself yet. But going by the name, I'll hazard the guess that an optional region is an area that you can set up, and then choose on the pages whether you want to keep them or not. I mean, it's not that far a stretch to come to that assumption., right? To make an optional region, select an area and then (guess what) go to Insert -> Template Object -> Make Optional Region.
I'd just like to add that this test was easy. I had it done in like 5 minutes. Now I'm sitting here waiting for everyone else to finish, and I'm thinking 'What the hell is taking so long?'. Did any of these guys do that tutorial? I bet they didn't.
Either that or I'm a genius.
A template in Dreamweaver is an established design layout that can be used multiple times to make pages for a website. By default, everything in the template design will be locked and uneditable, but this can changed by defining editable regions in the template file. This way, only minor things like content and images can altered on each page.
2. What are the advantages of using templates?
Creating new pages from a template is much faster than having to recreate the same design everytime you need a new page. Templates are faster, more efficient, and minimize the risk of you screwing up the design or a piece of code somewhere.
3. What are 'editable regions' and how do you set them up?
An editable region in an area on a template file that allows webpages made from the template to be edited and changed as required. To define an editable region, select an area on the template file you wish to change, then go to Insert -> Template Object -> Make Editable Region.
4. What are 'repeating regions' and how do you set them up?
Are repeating region is similar to an editable region with an added benefit. Everything within the repeating region can be duplicated down the page with a simple click. The additional regions can also be edited to change their appearance and content. To make a repeating region, select an area and go Insert -> Template Object -> Make Repeating Region.
5. What are 'optional regions' and how do you set them up?
An optional region is also like an editable region, and again with one little difference.... I assume. I'm actually not to sure what that is, because I haven't used one myself yet. But going by the name, I'll hazard the guess that an optional region is an area that you can set up, and then choose on the pages whether you want to keep them or not. I mean, it's not that far a stretch to come to that assumption., right? To make an optional region, select an area and then (guess what) go to Insert -> Template Object -> Make Optional Region.
I'd just like to add that this test was easy. I had it done in like 5 minutes. Now I'm sitting here waiting for everyone else to finish, and I'm thinking 'What the hell is taking so long?'. Did any of these guys do that tutorial? I bet they didn't.
Either that or I'm a genius.
Foxtel Banner Storyboard
I've been neglecting my blog, give me a minute to feel bad about that....
Okay, that's enough.
So here's the storyboard for my Foxtel banner.
First Frame - the Foxtel text falls in from above.
Second Frame - the digital text 'phases' in
Third Frame - the phone number appears on the stage one number at a time (like dialling)
Fourth Frame - the "Just picture it" caption fades in
Fifth Frame - the first frame of the neverending loop, the first caption 'rolls' in
Sixth Frame - the first caption rolls off stage and is replaced by the second caption
Seventh Frame - the last frame in the loop, the second caption is replaced by the third
After the last frame, it loops back to the fifth frame, and continues to loop the last three captions.
Not particularly fancy, but it gets the job done.
Okay, that's enough.
So here's the storyboard for my Foxtel banner.
First Frame - the Foxtel text falls in from above.
Second Frame - the digital text 'phases' in
Third Frame - the phone number appears on the stage one number at a time (like dialling)
Fourth Frame - the "Just picture it" caption fades in
Fifth Frame - the first frame of the neverending loop, the first caption 'rolls' in
Sixth Frame - the first caption rolls off stage and is replaced by the second caption
Seventh Frame - the last frame in the loop, the second caption is replaced by the third
After the last frame, it loops back to the fifth frame, and continues to loop the last three captions.
Not particularly fancy, but it gets the job done.
Monday, March 1, 2010
Flash Tutorials
Here's a bunch of websites with some pretty good tutorials.
Sure to help someone.
Flash Designer Zone
Flash Kit
Flash Perfection
Kirupa
Tutorialized - Flash Tutorials
Sure to help someone.
Flash Designer Zone
Flash Kit
Flash Perfection
Kirupa
Tutorialized - Flash Tutorials
Subscribe to:
Posts (Atom)
