Category Archives: Design Concept/Ideas

logo design. gecko style .
I finally got to putting the “limber” gecko into my existing gecko mathematics logo. I wanted to appeal to kids by making it look like it’s crawling around… a sense of movement in a still image.


I started out by rastorizing the ‘o’ in gecko
and cutting parts of it out to get the feel of the
gecko crawling through it.


I then did something totally different,

because it’s good try different things.
I used the gecko as an icon. I don’t like this one,
but I can’t say I didn’t try it.


My favorite. Only because the logo will be on the left
of the website so the gecko is crawling into
the webpage, rather than off the page.

“what the heck’s with geck?” continued…

I received valuable feedback on my first try at a gecko. These are my changes, I reversed the color to be dark on the edges and lighter at the center, made the eyes less scary, and made the gecko skinnier with smaller back legs.

On a technical note, I also changed the outline to the pen tool which gave me a consistent line weight and nicer curves (notice the tail)

I was playing with different layers and noticed that the gecko doesn’t look to bad when I just use the outline with the body color layer turned off. Also I liked the solid body color.


original first try


revised, skinnier, cleaner lines, more constrast


outline of gecko


solid color gecko

On the (Photoshop) Drawing Board

gecKo mathematics

  • I’m working to complete all the secondary pages for this website, then I need to brainstorm ideas for how to present a math workbook online so that parents and teachers can see the teacher manuals and student workbook all on the same webpage. For all you teachers out there… I’m trying to create the online equivalent to a teacher edition book. The solution will be and should be much different than the typical wrap-around column with teacher notes on the outer edge and bottom of the page. Webpages aren’t print documents and can’t handle a very wide layout.
  • A gecko illustration is also needed for use on the website.

Worship Concert 2007 @ Meadow Heights

I get to create everything from website ads to the bulletin to the powerpoint slides. I still have the bulletin and powerpoint slides left to create. Here is a sneak peak:


website ad


front of the bulletin (8 1/2 x 11 turned on its side with the fold on the top)

Agricultural Science
I’m currently templating and programming the tertiary pages of the current website. I basically copy and paste the content from the current pages and put them in a blank webpages, then view the code to delete all the extra formatting that I’m using stylesheets for.


A screenshot sneak peak

See them live!
Homepage, Secondary, Tertiary

Korean Math Redux
I mentioned in the last post that I would be redesigning the Korean Mathematics website for a professor. I have previously done illustration for this project. First let’s see the current website design:

I wanted to make the navigation easier to… you guessed it, NAVIGATE. The wording of the links were also very ambiguous. “Help American Education”… ok but how and “what will happen when I click on this?”

Also there is a faux logo. It looks like a logo but it’s really not, its just some clipart paired with a title.

Text as images: See those quotes below the photo? that’s one big image. This website’s largest image contains quotes that don’t even need to be images.

Use a grid: as my viscom professor, Rusty would say… “let me see what grid you used to lay out that page.” This one doesn’t have a grid. I don’t always use a grid, mostly because I automatically use one without thinking about it. Sometimes it’s VERY necessary especially when figuring out hierarchy. To view the grid in Photoshop use Ctrl + ‘

Redux:

Here it is with my grid turned on:

I clearly defined the logo, even if it is just text. Simple is better. I think I read this on Seth Godin’s website: “Let your products/content give meaning to your logo”

I made the navigation stand out and moved it to the top. I also made the titles of each navigational link shorter in length and larger in size

The most important part of the website is highlighted below the logo, which happens to be where the viewer looks first.

Thoughts?

What I’ve learned in regards to graphic design.

1. You should stab yourself in the hand if you feel the urge to use a drop shadow, stroke or gradiant.
A direct quote from my Professor. I believe that drop shadow can be used, but very faintly and only to achieve better readability

2. Large blocks of text should be no larger than 14 and should be a serif font.

3. The client is always right, but that doesn’t mean they decide upon the specifics of the design. It’s the designers job to make great design and please the client at the same time. The client should give the designer what they want the result to be but they should not dictate the means (specifics) to getting those result.

4. Pixelation… not good

5. Obtain your graphics and photos legally. Nothing, when it comes to photos online is free, and if it is, the quantity of photos isn’t very large or the photo probably isn’t that great (quality or conceptually).- Check out http://www.sxc.hu/ for some top-notch, free stock photography… they don’t have a large variety though.

6. Use pencil and paper to sketch your design before using the computer. The computer is a tool, but you’re the designer.

7. Website design: HTML tables were meant for tables of data, not for designing a website. That’s what CSS is for.

8. Website Design: Using an image map is cheating, and your grandma who is using dial-up at about 5kbps will not have the patience to wait for the page to load.
I’ve learned these things in the past 3 years here at Truman, and I know I will learn a million other things in the next year and a half that I should avoid when it comes to designing.