Tuesday, September 14, 2010
Monday, June 21, 2010
Reflection - Client Website
I feel this has been a valuable experience for me. I hadn't worked with a client before this assessment, and it's given me some insight about the business. I'm sure this will come in handy somewhere in the future.
I can't say that I've finished working with this client, at least in the short term. She has recently come to me with more ideas for the site, which has caused me to revise my statement in my previous entry about the completion date. If this were a real job I'd be making so much money for this.
Putting all that aside I can't say that I really like designing websites. It's not my thing. I can see how it would be useful to know how, and I'd probably feel differently if I were making one for myself, but for the most part I find it extremely boring. Coding, error-checking, getting PHP forms to work, I'd rather be focusing on design than construction.
No-one made Michelangelo build the Sistine Chapel before he painted it.
Well, at least I know I have the skills to fall back on another aspect of graphic design should I not find a job in my preferred area right away. Yeah, I'll go with that.
I can't say that I've finished working with this client, at least in the short term. She has recently come to me with more ideas for the site, which has caused me to revise my statement in my previous entry about the completion date. If this were a real job I'd be making so much money for this.
Putting all that aside I can't say that I really like designing websites. It's not my thing. I can see how it would be useful to know how, and I'd probably feel differently if I were making one for myself, but for the most part I find it extremely boring. Coding, error-checking, getting PHP forms to work, I'd rather be focusing on design than construction.
No-one made Michelangelo build the Sistine Chapel before he painted it.
Well, at least I know I have the skills to fall back on another aspect of graphic design should I not find a job in my preferred area right away. Yeah, I'll go with that.
Saturday, June 19, 2010
Client Website - Almost Complete
I had the chance to show the client my progress on the website. She liked what she saw so far, we just need to nail down the content and get a few more images up there. The website should be completed this month, and for anyone who's interested I'll put a link here to it's address when it's uploaded. Or at the least, I could mirror the site on my free webspace at Dhost.
You can go there now to see some of the things I've been doing this semester if you want.
http://dhost.info/clakedesign/
You can go there now to see some of the things I've been doing this semester if you want.
http://dhost.info/clakedesign/
Monday, June 14, 2010
Client Website - Final Mockup
After showing all those mockups to the client to review, she pointed out what elements she liked best. Then, I put together this mockup;
It's near identical to the sixth early mockup, I just updated it a bit to match the planned site structure. The client liked the background colour very much, as well as how the content stood out. I'm not sure I'll be able to duplicate the scribble box effectively in a web document, so the client may have to settle for a regular box. She also liked the idea of side links to new products on the menu page. Now I just have to build the site and get some images to use.
It's near identical to the sixth early mockup, I just updated it a bit to match the planned site structure. The client liked the background colour very much, as well as how the content stood out. I'm not sure I'll be able to duplicate the scribble box effectively in a web document, so the client may have to settle for a regular box. She also liked the idea of side links to new products on the menu page. Now I just have to build the site and get some images to use.
Client Website - Mockups
Here's a bunch of mockups I made to show the client about my ideas for the site;
These are very basic, and should only be reffered to as a guide.
These are very basic, and should only be reffered to as a guide.
Client Website - Questionnaire
Almost forgot about this.
I gave this to the client about two weeks ago, and didn't get it back until recently.
I gave this to the client about two weeks ago, and didn't get it back until recently.
Client Website - Storyboard
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.
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.
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
Monday, February 22, 2010
Default Windows Fonts
You've just finished a killer page setup for your website. You're sitting back, feeling pretty damn smug with yourself, being all super creative and original and whatever. You cruise on down to TAFE to show everyone your awesomeness transferred to the web. You type in the address, and wait for jaws to hit the floor.
Wait a minute... WHAT THE HELL?
All those fancy fonts you put in there didn't show up. All that effort wasted, all your hopes - dashed to the winds. Your humiliation is intense, and you go home and cry into your pillow like a baby. If only you had checked to see if those fonts were web safe...
Well fear not wannabes, I'm here to help. Right here on Microsoft's own website should be all the information you need on Microsoft typefaces. If you don't really feel like wading through all those different web pages, here is a list of standard fonts on various Windows platforms.
I didn't bother check for fonts on other operating systems, but if you own a Mac it's really your own fault.
Wait a minute... WHAT THE HELL?
All those fancy fonts you put in there didn't show up. All that effort wasted, all your hopes - dashed to the winds. Your humiliation is intense, and you go home and cry into your pillow like a baby. If only you had checked to see if those fonts were web safe...
Well fear not wannabes, I'm here to help. Right here on Microsoft's own website should be all the information you need on Microsoft typefaces. If you don't really feel like wading through all those different web pages, here is a list of standard fonts on various Windows platforms.
I didn't bother check for fonts on other operating systems, but if you own a Mac it's really your own fault.
Some Useful Links
Here's a few links to some potentially useful sites to us fancy graphic design students.
Adobe Design Center
Here you'll find tutorials and helpful information for every product in Adobe's arsenal. If there isn't something here that interests you, you are not a graphic designer.
Australian Graphic Design Association
Your guide to everything graphic design in Australia, from events to competitions to locating a graphic designer.
CSS Zen Garden
A site to showcase the things you can accomplish by using CSS, something apparently overlooked by far too many web designers.
Lissa Explains It All
A site for children or morons, Lissa will explain everything about HTML in that sickening "Play School" kind of way.
LogoPond
Logopond features hundreds of logos to draw inspiration from, or you could just go here and buy some.
Adobe Design Center
Here you'll find tutorials and helpful information for every product in Adobe's arsenal. If there isn't something here that interests you, you are not a graphic designer.
Australian Graphic Design Association
Your guide to everything graphic design in Australia, from events to competitions to locating a graphic designer.
CSS Zen Garden
A site to showcase the things you can accomplish by using CSS, something apparently overlooked by far too many web designers.
Lissa Explains It All
A site for children or morons, Lissa will explain everything about HTML in that sickening "Play School" kind of way.
LogoPond
Logopond features hundreds of logos to draw inspiration from, or you could just go here and buy some.
Saturday, February 20, 2010
What the Hell is Em?
According to our good friends at Wikipedia;
"An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font."
Understand?
Nope? Neither did I until I had someone simplify it for me. Basically, an em is a little box of space that a font is allowed to occupy. The height of the typeface determines the size of the box... I think. So if the typeface - by default - is 16 points high, it equals 1 em for that typeface. So 2 em would be twice that height, or 32 points high. It is NOT measured by the size of the capital 'M' in the typeface, as some people think.
Anyway, I think that's how it works. Correct me if I'm wrong.
"An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font."
Understand?
Nope? Neither did I until I had someone simplify it for me. Basically, an em is a little box of space that a font is allowed to occupy. The height of the typeface determines the size of the box... I think. So if the typeface - by default - is 16 points high, it equals 1 em for that typeface. So 2 em would be twice that height, or 32 points high. It is NOT measured by the size of the capital 'M' in the typeface, as some people think.
Anyway, I think that's how it works. Correct me if I'm wrong.
Monday, February 15, 2010
Webpages that Suck! (a whole lot)
Here's a few examples of truly terrible web design.
Thanks to Web Pages that Suck.
Judging by how long this page takes to load, you must be thinking 'Damn, this must be a freakin' awesome website!'. A half hour later when it finishes, you realise... no, no it isn't. This is so awful I don't know where to begin. I'll start with the homepage, which - after literally seconds of skimming - I discover contains absolutely zero content. It's just a pit for every animated GIF on the web to fall into. I should also mention the home page has absolutely no relevance to the site.
Take one guess what the site is about after looking at the home page.
A picture gallery dedicated to the closest holiday?
WRONG!
It's about dogs, I think. I didn't actually read anything for fear my skull would collapse from all the stupid. Navigating around the site is a nightmare; links are placed at random down the side of the page for several mouse scrolls. Although you can't read them half the time, because they're hidden against the insane background. And if you click on one, don't think you'll get any reprieve from the horror of the home page. Every page on the site is just crazy as the index.
That's a mouthful. You'd think a website about such a smart and scientific program would have been smart and scientifically designed. And maybe it is, if it's designed to give a siezure.
It's hard to find a single square centimetre that isn't filled with some rainbow covered graphic. And they spin! Hope you don't have motion sickness. I'm not sure what the purpose of all those graphics on the side are for, certainly not for navigation. No, that honour is reserved for the unpsychedlic and utterly boring text links on the top page.
Luckily, most of the other pages won't send you crashing to the floor in convulsions. They are, however, pages that scroll for hours with countless links to God knows what. Kudos DPGraph, for proving even smart people are idiots.
Well, this is a change, just not a welcome one. Says right there on the home page it was established in 1983, and it looks like it hasn't been updated since. This is single most un-entertaining website I've ever visited. Watching "Murder, She Wrote" is more exciting than this.
It takes skill to make a website as boring as the game itself, but it's somehow worse because there's no competition. There are no winners, everyone who comes to this site is a loser. Navigation is simple enough, but who cares? Each page is just as boring as the next. And the only graphics are links to pictures of chessboards.
I'm so tired, I think this site has sapped all my energy. It's a void where life and vigour get sucked into a black hole of boredom. Better make sure your keyboard has drool resistance.
Logo development
Here's a screen capture of a logo I've been working on. Not finished yet, but getting there.It supposed to simple and memorable, and who can forget a what a Redback looks like?
Online!
Alright, so I just created this blog for my graphic design course. It really wasn't that hard, I just procrastinate like a politician enacting the Kyoto Protocol. Anyway, will get around to updates soon.
Subscribe to:
Posts (Atom)
