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.

HTML: basics/CSS: formatting design

Since HTML can only do so much when it comes to code. It creates the base of what you're site functions like; how and where things are placed. Designating spacing, divisions, sizes of the spaces, and what specific text is to be added into the site decided by the HTML coding you use. Which is where "marking up" your designs can come in real handy; so you know what goes where, and what division tags hold what.

When it comes to CSS, it's used to create the "fun stuff" that coding deals with; the "look" and "aesthetic" of your webpage/website. Colours, font choices, rounding of edges, and anything you can find (with the help of the internet, of course) can be added and manipulated to suit your design needs.

The coding rules are different when it comes to HTML and CSS-- and the easiest thing to think about when it comes to knowing the difference; HTML is your tech nut, CSS is your artsy brother who is kind of an ass. Both are finicky, both can be broken easily-- so you have to take special notice of both, so they BOTH work together to make an amazing webpage/website.

Mark Up Structure for HTML

Using colour coded sections, I put the different divisions of "RedBubble".