Research Day- Web Design

When I start learning about something I’ve never approached before, it helps to take notes. The issue with this though, is that often I end up with notebooks full of great (but messy/clutted) notes that I rarely look at again. Time to try a different tactic!

Since this site is a tool for me as well as a history of my learning process, I’m going to put these notes here for quick reference.

Notes and Quotes for solid web design:

Daan Weijers “A lot of people argue that grid systems limit your creativity, because you’re limiting your freedom with a grid system. I don’t think this is true, as book called Vormator taught me that limitations actually boost your creativity. This is because you will think of solutions with these limits in mind, whereas these ideas would never have been thought of if you don’t have these restrictions.

Brandon Jones So what makes a pixel perfect comp? Essentially, it’s designing a mockup (esp. a web mockup, but it can be anything) as if you were styling it by code in the first place. If you’ve worked at all with CSS/HTML you’ll know what I mean. It includes: Perfect margins, Perfect padding, Perfect and consistent font usage , Perfect borders & backgrounds, Consistent color usage, Intelligent and justifiable deviations from the first 5 rules.

There really shouldn’t be more than 3 or 4 font styles on any single page unless you have a damned good reason to do it. If you are using a specific color of red as a highlight color on the site, make sure that it’s that exact color of red in every single place (unless you’ve got a reason for it to be different).

Ahmed Hussam                                                         

Before going to your client in your first “requirements gathering” meeting, you should do some homework by preparing a competitor analysis report.(…) this is basically a table listing all features and components of your client’s competitor websites and a screenshot of each. (…)such a report will greatly minimize revisions later on due to forgotten components that need to be squeezed into your design. (Prepare even just a simple comparison chart)

One of the first and most important questions you should ask your client is which sites they like and which sites they dislike. (…)You should be particularly interested in knowing exactly what points they like or dislike in each example that they provide; As in one case they may just like the colors and in another a specific component, and in a third the fonts, …etc. Doing a quick analysis of such list will help you create a general idea of which direction to move in and what to avoid.

W5 (Who, what, when, where, why)

Skype Brand Book

Oh wow- This is amazing. Review often! Good general rules, good references of what they DO to consider what to do Differently.

Mark Boulton– (re: Aesthetic Usability Effect)  This theory suggests that things which are designed to be beautiful are inherently more usable as a result.

Helen Walters   10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. (…) They’ll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.

Paired Design Meetings
One in which to brainstorm, to forget about constraints and think freely. (…) to “go crazy”. Then a production meeting, Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work.

Mark Boulton ‘Aesthetic Usability Effect’ –  This theory suggests that things which are designed to be beautiful are inherently more usable as a result.

Advertisements

Using the 960 Grid System as a Design Framework | Webdesigntuts+

Using the 960 Grid System as a Design Framework | Webdesigntuts+.

As a resource, I’d highly recommend this article if you’re learning about web page design. Using this and a tutorial from PDStuts+ I’ll be posting my first cookie-cutter webpage soon. Hopefully followed shortly by a first draft of my soon-to-be portfolio page and then by my (at this point rather empty) MTG card archive.

What I’m working on at this point, though it looks like a bunch of random skills, is developing the range of skills I need to fill out a rather wide, entry-level portfolio. Web pages are next on the agenda. As you can see with my previous posts, Photoshop skills have been my focus for a while. I will continue to use Photoshop to design the web pages then move on to Illustrator (again following Adobe’s classroom in a book for CS5.5) and then on to photography skills as well as developing Brand Identities for some real and imaginary companies. Throughout this, I’ll continue to work on aesthetic sensitivity, color sensitivity, and an awareness of the design around me.

Old Photos- Edits

As I organize my rather large collection of photos I’m finding some worth playing with.

image

image

image

image

image

^ after                                               ^ before

image

image

image

Personal Photography- Playing with HDR

First- the original Photos. These were taken through my studio window of my backyard. It was right after I got my new nikon and they are not staged or well composed, just snapshots. Mostly I was just playing with settings. While organizing some files I realized they’d make a great set to experiment with HDR.

Nature & Textures_010712_0003Nature & Textures_010712_0001Nature & Textures_010712_0002

And here is the Combined image after using Photoshop’s HDR Merge and adjusting the settings.

Fountain HDR

And here it is after cropping and some more edits.

Fountain HDR Edit ColorFountain HDR edit BnW

 

Given a little more time I could have eliminated the “shadows” of my healing on the fountain. I did all these in less than an hour though, and played with a few more options which I didn’t show here. (partial B&W, graded saturation) but they were too gimmicky.

Business Card Practice

These won’t (I don’t think) become my actual business cards. For that I’m thinking mostly white, simple clean logo, dark grey shadow text… something super ME. These aren’t very me. They are, however, great practice.

 

biz card 1 sampleBiz Card sample 2

 

I’m having some issues with converting RGB/CMYK. I keep seeming to do things in the wrong order and losing colors or getting different effects. Sometimes what I get is awesome and I go with it, but mostly I’m just getting frustrated. I think this is an area I need to do a bit more research.

I also need to (as mentioned before) get better about savings states. On another project I got confused and thought that layer comps did mostly the same thing… they TOTALLY don’t. >.< It’s just so easy to get carried away working, then realize you’re totally off base and want to go back… Even having set my history to 100 states I am still sometimes screwed. 100 brushstrokes if you’re manually editing a mask really isn’t that many. This is what learning is for!

HDR Toning Practice

I don’t spend a lot of time taking photographs because I don’t feel I have the skills yet. A catch 22, I know. The fact is I USED to spend a lot of time taking pictures and didn’t learn anything pushing buttons. So I’ve decided that I’ll arm myself with knowledge, then play a bit, repeat, and learn that way.

In the meantime, I see no reason not to practice some awesome HDR techniques. This is done using photopshop and a single image. It’s not as detailed as it would be with multiple exposures, but the basics of how to use the technique are the same. The original photo (on the left) is by pinholepirate and can be found here. The edit on the right is mine.

HRD Tone Practice

Personally, in this case I think the original is better. HDR can produce some beautiful results, but working with a 72 ppi image creates some stair-stepping. Also, yellow is not my favorite color. I could have gone desaturated, but that pulls some of the punch from the HDR. I really do like the increased contrast, but the additional detail on the water is a bit distracting. Over all…. I’d say they both have their merits but it’s not art, just practice.

Shōgun Poster/Book Cover

My favorite book is Shōgun by James Clavell. I really should read it again, it’s been probably 10 years. (that makes me feel old.)

Inspired by a tutorial, and intending on following the tutorial but with my own images, I have proceeded to ignore the tutorial and do my own thing… which is a photo composite Poster. Once again I have ruthlessly stolen the images from others and will reference my sources below. This is portfolio work, so no copyright infringement is intended.

This is a series because I wanted to show some of my production process and the options I had. So- the first composites-

All Black and White. Simple- Ship and Japanese War Flag only. ShoGun book cover sample

Spot Color
ShoGun Cover Sample 3

Spot Color w/ VingetteShoGun Cover Sample 3 vingette

Messy Ink (or blood?) type. Slight emboss. ShoGun Cover Sample Ink Type

Asian-ish Script Type. This one feels a bit weak to me, even with the emboss. The title competes with the sun too much. Perhaps bolder, perhaps different placement…. this is what composites are for!

ShoGun Poster Japanscript Type

Working on these I’m learning a valuable lesson.. a few actually.

1- when I make a good change to something- like a vector mask or gettitng blending layers right- name, save, and copy that “good” layer to all other documents that might use it instead of messing around with it again.

2- Mock-ups are my friend. Throw together sketches and narrow down to one or two options before doing all the finicky stuff. I have thrown out so much work simply because I changed my mind. >.<

That’s it for the simple composites. More to come with other elements incorporated.

 

Stock-

Special Thanks to the artists for these images:

japan-war-flag

http://browse.deviantart.com/customization/wallpaper/objects/?order=13&q=japan#/d2yywhg

Kalmar_Nyckel2_by_pinholepirate

http://browse.deviantart.com/?qh=&section=&global=1&q=pinholepirate#/dn53xs

More Experiments with layers and vectors

I’m learning a lot creating some mood art using stock images and lots of layering. The skills I’m working on I’d think will contribute well later to photo composites.

 

Dark TundraTundra Background

 

The above images are made entirely of the below stock images. Because I don’t plan on selling these, I was not particularly thorough about making sure none of the images are licensed. For that reason, I’d like to say no copyright infringement is intended and no profits will be made on these images.

1920_Broken Tree In The Snowy TundraGrunge_Texture_20_by_amptone_stockSnowy Owl in FlightSnowy Tundrablossomed-cherry-branch-600