Armature tut.

Final project: team up with chelsea

Working towards animation in blender, going to start out with a video tutorial and then show off what i did using those principles i put on the mini-tutorial. tues may 1st: have the demo mostly done, along with research and some ideas for the project formulated. thurs may 3rd: Have the deom done, the project decided on, and have it started. fri may 11: everythang done!

Webby Prezzy

I am planning on doing a presentation/demo of HTML5 and some CSS3 for the final project. I am really interested in the way the web works, and the actual code and phrasing of language to make our experience on the web what it is. In my presentation I plan on defining HTML5, and spotlighting the differences to what we have now. I'll look for writings on its effects on dreamweaver and how we will have to re-think the way we make websites a little bit. I'll scour the nerd-blogs to find thoughts on it, hopefully good and bad opinions. I want to stay up on this kind of thing, and I'd like to get a good grasp of where mark-up is going and share it with the class. The secondary element to my presentation will be a synopsis of CSS3 and how this teams up with HTML5 to make such cool things happen. The tertiary element to my prezzy will be a test-run of HTML5 with CSS3 attached, examples of what works in browsers now and what is yet to come. So, if my presentation were an action movie, judging levels of importance of actors, the hero would be HTML5, then the villian CSS3, and finally the hot babe would be the test-run. Savvy?

Wireframe black cell

So I've got my page laid out basically how I planned, but the thing is that I need to set up a line-height amount to make the cells anymore than 2 px, since they have no content in them. Once there is content, the cells will expand. Perhaps I couod have more control over them if i define the width and height of each, with small in motino response but snap-resizing to fit different screen sizes. That is one thing, for this project we are designing for different appliance screens, not someone on a huge monitor computer resizing the window to see if it is completely fluid, like what happens in crits in class. So I am willing to let some of the fluidity go if I can control the page layout a little more...If i have to, that is. No link to my page for this post obviously, and screenshots are pointless i guess. Just some brain-thoughts for ya.

Revision decision

Here are my cleaned up style tyles

Double Revision time!

Here are the revised wireframes, and also here are the Style Tyles for all to see...

One is made more for the grammas that frequent the place, and the other is geared more towards potential smoked sammich eaters and nano-brewpub drinkers.

revised moodboard and wireframes

Here is the revised moodboard. I included more web elements that I want to emulate and some pictures of the store itself and the beer labels that they are using for the "sturgis Haus" brewpub.

Also, here are wireframes for the main page and the "sturgis Haus" page. I decided to combine many of the smaller and non-existant pages together into the main page, with hours of operation, contact info, and coffee lists on the main page instead of spread across four pages. The brew "haus" has pictures of the beer labels I will be using and also pictures of delicious looking smoked pork and beef sandwiches, ooh baby.

I plan on having a mobile and desktop lightbox sizes for information about the specific beer tastes, maybe. I'll be doing some r&d on if that can happen, and I'm going to attempt to push the limits of the 1140 grid system that I used for the blueberry page.

Spill the beans, already!

For the responsive design website rebuild, I wanted to re-design my brother's site. However, that wasn't in the cards for this semester, so I guess I'll do it over the summer. So, I decided to pick a place in Lititz, where I have been spending time lately. The bakery "Dosie Dough" seemed like a good bet, but their website is not up yet, so I decided to get over there and take some pics. Upon being there and talking to the MOD, they decided the owner better approve it so I had to wait until friday. Makes no sense to me, so I change tactics and wander the streets of Lititz for inspiration. My travels lead me to "spill the beans" coffee shop and nano-brewery. Here are some pictures of their website:

...Right? There are improvements to be made, and I think the shop is cooler than the webpage by far, especially because they are making beer and selling it through the coffee shop. Here's my mood-board for the redesign, including colors of coffee and beer, and sandwiches.

john feilmeier dot com

So, for the responsive design webpage to redesign, I choose my brother's personal page, John Feilmeier. I want his webpage to be viewable on all web media. He has a lot of good work loaded to the page, but it is more like a dumping ground for gold than a well-constructed gallery. here are some embarassing screenshots of his page: ENJOY!

This site will look much better when I'm done with it!

tortoise for presentataion

BG music for presentation.

pics of site at diff sizes:

1024

767

400

Website design

Here is the finished design for the webpage, will mouseover inbteractino, but no lightboxes

bg spasebow!

Refined the ol' ground-backer there, iffn' ye' don't lahk it chye' kn' get out!

Think this will keep to the background better, and it looks a little tighter too.

bg baby

with and without page buttons and screen bg's

Wireframe, schmireschmame

Sorted out my troubles with wireframe business, took it a little more to heart, and guess what? I looked up : horizontal scrolling websites" in google and got much support! for some reason my brain had not thought to check them out. Well, got some good ideas, both on how to orient a side scroller and how to fit segmented informatino into one page with the help of scrolling boxes and lightbox effects. Presented now is the re-vamped wireframe:

Also, instead of having 3 parts, i've got 4: Main part, bands part, venues part, and News part, which will have an up-to-date twitter scrollbox with bits from the launch staff about who's playing and so on, as well as band's tweets about the conference.
The bands page will have a scrolling box in it as well, with musicians and their info, then when you click on the object that signifies the band, lightbox video opens up and ya get a taste of the tunes, as well as very short band bio and twitter fbook links. I think that's do-able anyway, we'll see.
The venues page will have a 4x4 grid of locations, and when clicked will lightbox into the venue's informatino.

There are alot of boxes in the wireframe, but they denote content, not actual clutter. from examples i've seen, there is actually plenty of room to display your information, and have some fun with your art. At the bottom of the page there will be a little comic about spacement crashing on saturn and playing a show for aliens, for people with a screen big enough to see!

Also, I'm making the bg diagonal, slanting in the direction right, hopefully subconsiously it will help people move about the page. I visited a non-conventional page today that had no nav except through their top left work>posters thing, and i was really frustrated that i had to move that way, there was no interaction navigation on the page itself, and it even looked cool and the work was awesome, the page was well layed out, type was solid, but the navigation ruined it! I hope to avoid that, keep it simple, and useable with some fun in there for kicks.

MBoard

This board is busy and distracts me in the immediacy of it's graphics, but if I blur my eyes I can start to make sense of it.

wireframes, personas, and purpose

I will be re-vamping the LAUNCH website for this project. Given constraints of design and project parameters, I will be focusing on the personas of Babs Bleueribbon and Kevin williams, the college bro and the Hip Housewife, with a link to sign-up page for Ronnie Walker. The website will be sidescrolling, with a floating nave bar that will stay in place while the information changes. Tabs will grow or shrink to show where one is at on the page throughout different navigation designs. It will be broken up into three sections, one with a mission statement of sorts, one with bands and artist bios, and one with participating locations and times.
The original website is a bit garish, with 0,0,256 blue on the page and bad photos. I want Kevin and Babs, when they hit the main part of the webpage, to think of popular-style music, so they will think of their favorite bands a little, and get excited to re-live the nostalgia that brings to heart. I'm thinking Gin Blossoms for Babs, and MGMt and Pearl Jam for Kevin. I'm not going for a 90's style design, but I want there to be a degree of a clean alt-country look melded with the outline-less cartoon monsters of modern indie-pop albums and design. (see: chutes too narrow, carbonmade.com) To have a simple aesthetic while not being childish, like a cleaned up and rocking Dr. Seuss.
Colors will be Blues, Grays, Off-white, touches of orange and red for the Launch logo and buttons to stand out, and dark dark near black for the text.
As far as textures go, the ripped paper look I like but it would be unfitting for this page, so I'm thinking, under the clean shapes and cool colors of the page, underlying textures of old stained wallpaper and ink splashes. Like the cast of a circus gypsy striptease show cleaned up for Sunday Mass. In this way we get a nice, clean professional layout with well-ordered information, with the grease and bloodstains of rock n' roll scrubbed well but not fully cleaned.

PERSONAS

Here are three personas who might look at the launch music conference and festival website...

here are some fonts
http://www.google.com/webfonts#ChoosePlace:select/Collection:IM+Fell+DW+Pica+SC|Fredericka+the+Great|Metamorphous|Asul|Sancreek|Inika
notes for the webpage design project for launch:
avoid cliche general lame-o music symbols like guitar necks, we don’t need to show the equivalent of clip art to the personas demographics.
make the page for a range of hearsay informed to those who just spaced on when to sign up or attend. ronnie and pat will be socially aware of these events, having been in or near the scene for years. kevin is a newcomer, and may have just accidentally seen a performance by accident at his fav bar in an accidental way, or picked a mysterious flyer out of his coat from god knows when.
Consider making the page a side-scroller, but it is mostly easier to view a page up/down. There is also the option of an orienteering webpage, that goes left/right and up/down.
Liking the picture change rollover, maybe a band pose then actual mid-rocking.
Keep in mind this is for musicians of many types, not just motorhead rawk black nails mowhawk eargauge, also pretty women singing pretty songs, or happy bands of happiness.
Because of the many types of performers, style must be musical without being overly dark or overly cutesy.
Because of level of performers, style must be refined to a professional, tight look, but not so rigid so as to be boring or predictable, or to lose it’s musical link.
Consider the movement to add musical rhythm to the page bro!

Continued for the event

After looking up site after site of music conferences, I noticed a trend: the websites made the conferences look shoddy. Most of them created using a blogger acct like this one, either not designed or clip arted to death. I know it's about the music, but lame website access can really make the event seem like a bunch of garage musicians coming together to drink beers and make tunes, talk about local bars to play at or how it is living in mom's basement. Not that there is anything wrong with that, the raw energy of young garage rockers and thirtysomething 90's alt hits cover players would be fun and interesting, i think. However, this is not the way to depict an event of musical professionals and semi-professionals.

My brother took a year tour in Australia and NZ last year, and he told me about a music fest called "splendour in the grass", so I decided to look to other countries to find some cool webpages for these events. Splendour's page was cool, with one scrollable page with a map of square photos of the performers and exhibitions and events, like album artists and other such musician paraphernalia: http://splendourinthegrass.com/
http://2011.xy-1.com/

All in all, not finding too many pages with interact-ability, but a few cool designs.

Hit me with music

Some more sketches and ideas to spread the wings of thought.

LAUNCH music conference and festival

For this next project, we are to redesign or make up a conference or event's main webpage, getting most of the needed information onto one webpage. I want to use a bunch of flashy screen movements and interactions and throw the design to the shite-eaters, but poor design and gaudy use of technology are no place for a classroom!
The examples Professor p. gave us in class had to do with beer, and now I am thirsty. I remember reading the blog of a man who ran the SF half marathon with a count of one beer per mile, so I look up his info, but he was just one running drunk, not a whole group or event! So, what else do I do? Besides, school( which I don't want to make a page about) and beer, what else is there?
MUSIC.
Remembering my band's aspirations to have enough material for this year's LAUNCH music conference and festival, I decided to check out their webpage...

HOLY BLUE BATMAN! No amount of round=edged rectangular divs could make that design look cool...maybe. Design aside, look at the douchebag picture they picked to represent the conference! Slimy bald stain'd wannabee taking the crucifix pose for a group of some of the most bored kids I have ever seen! That band must have sucked!
The site is set up in three main groups, info for conference goers, info for bands, and directions and such. Each group has sub-groups with information not even a paragraph long, so I think this will make it a little more simple for me to fit the important information on one page.

Here, I'll do some verbal sketching:
First, I'd like the main meat of the initial viewing of the page to be location, times, and the bare bones info you need to be there if you want to. perhaps have it as a sort of rock poster, where the date is, you click and a full list of dates pop up, or you click the band and a list of each band and their location / time is shown. So, musicians and locations/times sweep in from the sides for a pincer attack. Bringing up the rear would be Donors, holding up the conference with their cash, therefor they will thrust upwards with a page that has their logos, all links to their sites. sofar we have a folding swallow: left wing list of involved bands, right wing list of involved locations, tail list of and links to donors, with the breast being the mission statement of LAUNCH music conference. Should the swallow breathe fire?

404

here are some screen grabs of my troubles in html and dreamweaver. i almost consider mark-up as an easier alternative to Dw, but Dw helps by showing the mark-up, so using it will improve both skills hopefully.

boingboing404

Here are a few components of the 404 assignment, a quick sketch with jill on an ibeam with a thermos, and the final form of her sitting. After the conversation in class, I decided to take her off the ibeam and just have her sitting on a bench, enjoying the day. also, I took her jackhammer and placed it next to her as an interactive "home" button.

progress

As a transfer, I needed to brush up on my html / css skills, but AH! a wrench in the gears! A terrible high fever and three days bedrest squelched any chance of working through the rust in my mark-up knowledge and experimenting with dreamweaver! So, nothing for me in the crit, but thanks to the dedicated, skilled, and pretty lab monitors, I am renewed! Their help, combined with my experience with adobe cs products, defeated ignorance and championed a 404 page!
Here are some of the stages in getting divs to work together, instead of warring like petty tribes.

ERROR 404

The "Error 404:" project. I chose boingboing.net for my website. I visit it regularly, and they have no 404 page! Just a blank page, with links on it, no information pertaining to the fact that you have ended up in no-man's land!

A few ideas popped up right away. The boingboing mascot, jackhammer jill, seemed like a good jumping off point.

My first idea was to have jill repairing something, off in the distance, with sparks flying out of her welding or soldering equipment. This is a cliche of broken pages, insert mascot with toolbox and welding goggles. Also, since the site was not technically broken, just a page which did not exist, I scrapped her working on fixing something.

Another idea came from her resemblance to a lumberjack, which brought to mind john cleese's song about being a rather odd lumberjack, dressing up in womens' clothing and eating scones with tea. So I had her taking a tea break, considering the message: "ERROR 404: you have walked into a tea party, what will you drink?" with an image link back to home page, options being tea or to leave. Tea always makes me thing of the psychedelic tea party ritual of the mad hatter and the march hare, with that poor effed up little doormouse in the tea kettle, zonked out of his gourd. So, I wanted to animate a simple gif of the little guy popping out of a tea kettle occasionally. This idea was a little too much of a tangential stream of thought, so I cut back on it a bit to simplify.

I thought, Jackhammer Jill is out there, putting holes in the ground, she must be a member of a worker's union!( Especially with the left-y writings of the staff), so, keeping the break for a drink idea, I put her on some I Beams with a thermos and a mug, a classic symbol of union breaks, right after guinness. The text will read, in a digitized font in going with the style of jill's rendering: "ERROR 404: UNION BREAK: This page has not been worked on."

This design has a small kick of humor, fun to look at, and will inform the reader as to what has happened and a link to go home.