WEB DESIGN: Slicing/Image Optimization

A technique we used in class, after designing the webpage, is slicing the images directly through illustrator.

This method of cutting what we need helped in the organization and direction to go when it came to coding. Instead of just starting to place the bits and pieces, I'm going to code from the top down (though, I would be starting with the background). Starting with the header, and the image I decided to go with (instead of coding in the text and all it's attributes).

Now that the section is laid up, I go on to optimize the image in the way we're shown.

I decide to keep the transparency of the "text image" I've chosen, so I ungroup my other elements of the design, and keep just the title. With that in mind, I use the transparent "PNG" option to export my section.

And that's it. For the rest of my design, I'll be making decisions on what needs to be optimized and sliced in what ways to have a design that is easier for me to code up later.

WEB DESIGN: interface design and visual design

Making sure your design is user friendly is a huge thing for a successful website/webpage. If your consumer can't find what they're looking for easily, they're going to find another source to get their information/help.

To make sure that they stick around, there's a few things to consider when designing a website/webpage; starting with the target market. Who's your content for? Children? Adults? People requiring your expertise? Or even just to send awareness about a topic? It's huge to ensure you use the right layouts, other functionality techniques, and even the aesthetic choices.

Here's an example:

http://pbskids.org/

http://www.pbs.org/

Two websites, made by the same company, but both are extremely different. The first, bright colours and even moving images (when clicked into the site), and one that's more about sharing the information and navigation. Both fit their target markets; young kids, looking for something fun to do, and adults, getting information quickly. The colour choices, imagery, and even the fonts chosen help distinguish and engage their audiences. Even if the designs were swapped, and the information the same, they just wouldn't work.

Colours and look aren't the only thing that'll keep a consumer on your site, being able to switch easily between sections with buttons that are easy to find are key. Even if they don't "look conventional"; the target market can determine how they even look, based on the general psychology of someone in that group.

Using the previous examples; easy to understand language with large font styles would work for younger audiences, where older audiences wouldn't need such extreme obvious indications of where to click-- something a little more subtle and elegant can be enough.