Michael G's Blog

Site Mock-Up >> Vixen Productions

Posted in Intermediate Scripting by michaelg1980 on December 2, 2009

Here’s the site mock-up version 1.  And, here’s the feedback I got from my clients:

The mock up looks good.  We love the background design and really think you captured the essence of Vixens….we have some changes that we would like to see depending on your time frame.  We were not sure how detailed you wanted us to get but we tried to review it with changes and ideas that we had to integrate with what you had done already….I also wanted to let you know that Deanna is leaving tomorrow morning for Paris but you can reach me if you have any questions – just shoot me an email …Deanna returns about the 8th.  Thanks for everything!!  It looks good.

So these are the things we would like to see changed or altered:

  • Verbage next to Vixen Productions: change to “Vixen Productions maximizing the scene for your partying pleasure”
  • Do the lines move like an equalizer or stand still – we would love it to move to the music….
  • We like the background – can we tint it a bit to bring more liveliness without overpowering verbage and pics…right now it is a bit flat can we add a gold tint or something to make it no so flat
  • Love to have the pictures – 3 on left more artistic in placement or do not even have to be a perfect square – they could have a border/flash/rotate – get more creative with placement…..but captured good images from bands to crowds – if we wanted to change pics would this be possible after mock up?  In final we have a crowd shot we would love to pick one and maybe change one more of the bar staff picture of guy and girl…did not know how hard this would
  • Layout of Vixen productions with pic on right we like a lot – may tweak verbage a bit but for now looking good…need to follow us on Facebook – but love clickables and the follow us on myspace button
  • Need to change verbage on Vixen productions on Page two after Vixen Productions/also need to add clickable to follow on facebook like page one
  • Remove “The Owners”, “Remove the Points of Contact” keep “The Original Vixens” in red.  Then Miss Deanna and Miss Kim are the ladies that…….remove “Kim Vixen and make it Miss Kim and take out “these”
  • Remove “to the right add Explanation Point.
  • Make the pictures of Vixens two on top two on bottom for pictures

I’m in the process of making these revisions and plan on showing it to the client one more time, getting them to sign off, then moving onto coding.

Advertisements

Site Architecture Updated >> Vixen Productions

Posted in Intermediate Scripting by michaelg1980 on December 2, 2009

This is the new site architecture.  Scaled back quite a bit, but I was able to keep the calendar thanks to free Google Calendar.

Week 5 >> Site Architecture

Posted in Intermediate Scripting by michaelg1980 on November 10, 2009

Site Architecture >> Vixen Productions

Site-Architecture_1.1

I imagine, I’ll probably end up scaling back the blog on the homepage to make it a news section that my clients Deanna and Kim can update using Adobe/Macromedia Contribute.  Not sure at this point.  I’ll be checking out options.

Week 4 – User Personas & Creative Brief. Yay!

Posted in Intermediate Scripting by michaelg1980 on November 4, 2009

User Persona 1

user persona 1


“…i insist on always having fun, and will accept nothing less … I’m also no longer human … I’m a bear.”

Jason:

  • 34 years old
  • College graduate
  • Software engineer at a well paying firm ($100,000+)
  • Lives near downtown Austin
  • In a relationship
  • Doesn’t want kids
  • Loves to drink Lone Star and party at bars off Red River
  • Favorite band is Motley Crew

Jason loves to party downtown and has the money to do it.  Friends, girlfriends, random folks at bars, Jason wants ‘em all to have a good time when he’s out.  Open with his money all in pursuit of a good time for him and all involved.  He’s a character. Someone you know you’re going to get trashed with and probably do some crazy shit you’ll remember for the rest of your life.

Jason uses the web to network, meet new people and find out what’s hot and going on around town. He doesn’t surf for fun.  He likes to quickly find what he’s looking for and then head out the door.  The only things he does at home besides planning where to go, and with who, is to eat, sleep, and fuck.  He doesn’t watch a lot of TV or see many movies.  His focus is out and about with people.

User Persona 2

user persona 1

“I’ll decide where my time is spent and you can bet there’ll be a smile on my face.”

Katy:

  • 26 years old
  • College graduate
  • Works for an environmental non-profit org
  • Lives in South Austin
  • Likes punk and some rap (digs Gorilla Biscuits and Dead Prez)
  • Likes to party at cool bars like the Jackelope and wherever there’s something hot and memorable going down
  • In a relationship

Katy’s super cool.  Smart, solid, decisive.  She’ll tell you if you’re wrong.  You want her at your party, you want her at your show.  She works hard, she plays hard. She’ll buy you a beer and a shot if she sees you’re down, but you better buck up.  She likes Great Whites and hopes to meet one some day.  Little patience for drama or whining.

Katy uses the internet for networking and finding more info on the things she’s interested in (punk, rap, shows she wants to see, environmental initiatives, sharks, etc.).  She wants to find what she’s looking for quickly and with little fuss.  If it’s what she’s looking for, she’ll indulge, but if the site is half-assed or poorly organized she’s gone.

Creative Brief >> Vixen Productions

Project Summary:
Vixen Productions (VP) is a relatively new company on the move up.  They’re developing a reputation for being “the ladies you want to party with (taunting, tantalizing, classy),” and would like a customized website to further build their reputation for throwing fun, organized, memorable parties to promote bands and DJs.

The single purpose of the site is to get visitors excited about what Vixen Productions does: throw wicked themed parties, all with the intent of getting people to come to the events and/or hire VP for future ones.

Audience Profile:

The main audience is hip, cool people, ages 21 to 40, looking for something fun and memorable to do on the weekend.  They love all types of live music (punk, to metal, to rap…), drink alcohol and go to downtown Austin clubs and bars.

They’re social and love to have a good time with friends out and about.  Not too many couch potatoes here.  They live life now.

Perception/Tone/Guidelines:
VP and Troupe Vixen are seen as fun, hot, and up-beat.  They are known for creating a unique energetic atmosphere that showcases the band or DJ and keeps the party rolling.

Online, the website needs to carryover this same atmosphere and energy, as well as convey a feeling of professionalism and confidence that your in good hands (if you decide to hire VP or go to an event).

Communication Strategy:

Pictures, pictures, pictures.  Nothing sells a party like photos.  And, that is essentially what VP is selling.  A good time, organized and managed, for a fee.  Photos, selling the fun, are the main focus, but upcoming event info, music, contact numbers and e-mail, info about the specific services VP offers, are a close second.

The pictures will show what makes VP different.  Deanna, Kim, and Troupe Vixen.  The communication strategy involves riding the line between taunting/tantalizing and smart/classy, as well as between “we’re here to party” and “we’re responsible.”  It’ll be tricky.

Competitive Positioning:
The main difference between Vixen Productions and other event and party planners are the ladies themselves.  Deanna, Kim, and the Vixen Troupe.  Hot, connected, social, fun, and organized, these are the women that set VP apart.  The main thrust of the communication strategy is to sell the party, the good time, so the people that make up the VP experience can be positioned as the “Qeens” of the events.  Something along the lines of “ring leaders.”

Targeted message:
To the point phrase that will describe the site once it’s launched: Wicked fun.

Week 2 – Article Review >>”The Site Development Process”

Posted in Intermediate Scripting by michaelg1980 on October 20, 2009

Article Review >>
“The Site Development Process”

Link to article "The Site Development Process"

Web Style Guide's article "The Site Development Process"

In a Perfect World.

Woman Web Style Guide’s extremely thorough article on how to develop, design, deploy, and maintain a “large website.”  In a perfect world, this is the way all websites would be made, and I believe to some extent each of the stages touched in the article should be discussed and worked through (from site definition and planning to information architecture, site design, site construction, site marketing, all the way to tracking/evaluation and maintenance).  But, realistically, I think the process of making and maintaining websites for 90% of the population is a much more organic and “back and forth” process; make something, see what works, see what doesn’t and make adjustments.  Sure, steps and procedures should be taken to avoid obvious problems and create obvious bonuses before launch, but beyond that, I think a large degree of flexibility and uncertainty should be embraced, if possible, in designing, deploying, and maintaining websites.  Not unlike starting a business, or making friends, or any other endeavor for that matter.

Plan Loose.

Hang LoosePlan loose I say.  Do your best to plan using what you know and have at your disposal, but try to accept that, more than likely, there’s a whole lot you can’t plan for and understand until after the fact; after deployment, after making changes.  Like how users are going to respond to (not care) whether the navigation is on the side or on top.  Especially, if you’re a small to medium sized company developing a website.  I mean, the extent of checklists and processes described in the Web Style Guide’s article, time-wise, not to mention, resource wise, are exhausting and, well, pretty boring.  Plan loose. Know what you want to do with your website, and a basic idea of how you want to do it, test out a few ideas, then go for it. If you planned loosely, there should be room to move around, make adjustments and respond to how users are using/not using your site.  Next time, you’ll do it better. (Most of the time)

Time is Short.  Do it now.

Long processes, like the one described in this article, take a lot of time, and in the present, and definitely in the future, time between change is shrinking.  So the impetus is to be flexible and changeable.  To make changes, make mistakes, but, to please, make them now.  While you’re planning, others are making, falling down, and learning.  Loads more than you can ever hope to plan for.  Have a good idea of what you want, but be willing to let it go for a better one that your users present you with.  Be flexible, plan loose, do it now.

nike-just-do-it

Week 1 – Website Evaluation >>Dropular.net

Posted in Intermediate Scripting by michaelg1980 on October 14, 2009

Website Evaluation >>Dropular.net

My favorite website.  Lately.

My favorite website lately.

Message and Communication:

Characteristics of effective communication in general

  1. Speak clearly and to the point.
    • “There’s really no text, save for a brief description in the title that says “Dropular – Media Bookmarking,” and if you count link names as text.  I’d never heard of “media bookmarking,” but I kinda got the idea.  A place with lots of bookmarks to stuff.  So, while I had an initial idea what the site was about and got an even clearer picture once I started digging around, to start, the intent of the site is a little fuzzy.  After digging though, the value of the site becomes pretty apparent.  A huge, searchable, visual database to some of the latest in design, photography, and culture.”
  2. Be consistent in how you present information.
    • “The feel of the site is consistent and visually appealing.  There are two different layouts that the visitor encounters.  One for viewing the visual bookmarks as a list or gird, and one , after you click a “bookmark”, that displays what you clicked and has recommendations of similar things you might like.  Besides these two, there are about 12 different ways to view the site. The different views are temporal (i.e. recent bookmarks, today’s, this weeks, etc.) All feel the same.”
  3. Say something interesting.
    • “The site itself doesn’t post any blog text, but if it speaks through its “bookmarks”,  Holy fuck, what a statement.  Incredibly interesting and provocative.  I spend at least an hour each day combing through the various visual “bookmarks.”
  4. Speak in the same language as your audience.
    • “Again the site doesn’t verbally “say” anything, but as someone in its prime audience, I can say it definitely “speaks” my language. It’s a visual language of what’s cool.”

Guidelines for effective communication specific to web sites

  1. Web pages need to indicate their connection to a website and to the internet in the way they organize and present information.  Primarily through brevity and links.
    • “Well, the site definitely has brevity down, and the content is essentially all links so, the website clearly has connections between it’s own pages as well as connection to the sites elsewhere.”
  2. Each web page needs to present self-contained ideas that don’t rely on other pages for a point to be made.
    • “The intent of the the site seems to be to show inspiring images that link to either other pages within the site or to other websites, so in this regard, each page of the site is easily self contained…as well as inherently linked to the ‘whole.’ “
  3. Web sites need to rely on a “rugged” organizational structure that can withstand the minor or major tweaks that occur due to different browsers, settings, monitors and the like.
    • “Here too this site particularly well made in its ability to adapt to different size screens, browsers, and settings.  As long as you have flash that is.”
  4. Web pages need to communicate things as simply as they can.  No simpler.
    • “Can’t get much simpler than titles, pictures and links.”

Navigation and site organization

  1. Use conventions.  Headers, navigation, links, grids, etc.
    • “This is where the site loses a few points.  The navigation is small and all the way up in the upper left and in the upper right hand corner of the browser window.  As well there are three separate links on each visual ‘bookmark’ to navigate to different pages. The upper left navigation’s function isn’t clear until you click all that’s clickable.  And, although the functions of the other navigation is clearer, I initially missed it entirely. I would have grouped all the elements together.  As for the three different links on each bookmark, you have to click ’em first to understand how the site works.  Not very clear here.”
  2. Make it obvious where visitors are in a site and make it easy to move around.
    • “Sadly, here again, the site loses points.  The only part of the website that could be considered a homepage is the “Recent” category which you arrive at when you enter in the url which lists/girds the most recent items to be bookmarked. And, while there is a title for each page in the upper left, it’s easy to miss considering the noise of the picture links.  However, after perusing the site a bit, it seems that orientation is not the intent. Inspiration is.”
  3. If a website is more than a few pages, incorporate a search function, that is available on every page.
    • “Yup it’s got it, and lord knows it needs it.”

Characteristics of good content and content presentation

  1. Good content says something interesting or valuable in a clear and unique way.
    • “If pictures speak a thousand words, Dropular.net says a bazillion.  Loads upon loads of illustrations, designs, photography.  Lots of stuff.  And, it “says” it quite minimally which works incredibly well, allowing the bookmark content to be the real star.”
  2. Speaks with a human voice.
    • “This website is like the voice of your coolest friend’s older brother.”
  3. Scannable pages that appreciate the varied interest levels of visitors by making use of titles, headers, topic sentences, and minor point callouts.
    • “Not really.  The title is pretty small and easy to miss, but in terms of spreading out content to allow what interests you to pop out, this site is a star.”

Visual Design:

Design principles that promote visual clarity and simplicity

  1. White space gives emphasis as well as allows breathing room in a design.
    • “Depending on what view your looking at the site with, there are various amounts of white space to break up or highlight the content, which works pretty well to highlight the content and give a clean feel.”
  2. A clear visual hierarchy helps viewers decode a page or design.
    • “The visual hierarchy is pretty simple.  The content alone is king on this site.  Save for tiny titles, spilt navigation, and small text url links.”
  3. Unity groups things that are similar in content, appearance, or function.
    • “The navigation, like I said earlier is split, so that’s not good.  But aside from that, the unity derives from the list or gridded display of delicious visual bookmarks.”

Page layout principles that help users visually negotiate page and site organization.

  1. Alignment helps create order, groups items together and makes the page easier to read.
    • “This site uses pretty clean alignment in the top navigation sections as well as how the content aligns with left and right borders of the browser window.  Alignment in between items in “grid” view looks kinda choppy though.”
  2. Contrast whether in color, shape, size, or orientation help viewers distinguish different sections of a site.
    • “The main contrast of the site is between the white background and visual bookmark content, which I’m sure is the point.”
  3. Use of the principle of Action, such as an shape, or color, directs the viewers to certain elements on a page.
    • “I didn’t see any elements on the page that suggest specific action.  Deciding what to do once you get to the site is a matter of simply clicking around.”

Design fundamentals most critical to good web design.

  1. Use conventions (ex: placement of navigation, look of links, headers).
    • “The placement of the horizontal navigation and miniscule title at the top of the page seems to be the only noticeable convention.  Oh, and it uses a sloppy grid in grid mode.”
  2. Alignment helps create order and groupings to make a page easier to read (ex: columns)
    • “This site uses pretty clean alignment in the top navigation sections as well as how the content aligns with left and right borders of the browser window.  Alignment in between items in “grid” view looks kinda choppy though.”
  3. A clear visual hierarchy lets viewers know what’s most important and least important.
    • “The visual hierarchy is pretty simple.  Visual bookmark content #1.  Everything else is like #10.  But, of course as I’ve said and will probably continue to say in this “Evaluation Framework,” that’s the point.  It’s all about the inspiration.”

Color Design:

Guidelines for how/why to select a color palette

  1. Colors can trigger different emotions, especially depending on what country you’re from.  Primary colors, red, yellow, and blue, evoke an innocence and childlike feeling, while more subtle hues and shades, like lavender, gray, and rose, impart a more sophisticated attitude.
    • “The color palette for Dropular is pretty muted, using grays and blacks and white, but it suits well what the site is shooting for I think. Sophisticated underground artist, fashion/graphic designer, architect.”
  2. Harmonious combinations can be found using complementary colors, two colors found opposite each other on the color wheel, as well as tertiary colors, colors that form a triangle on the color wheel.
    • “Like I just said, it’s pretty basic. No frills.  Like an art gallery really.”
  3. Use of color and color combinations should be informed by the intent of what you’re designing.
    • “Being that the purpose of the site is to act as a repository of various types of inspiration for creatives, yeah I think the minimal black, white, and gray, color combo works.”

Principles of color use specifically helpful for effective web page design

  1. Color should be used as a secondary element to bolster and emphasize the organization of a site.
    • “Color is definitely not a primary feature of the site.  It makes the navigation and title fall quietly in the background like a butler.  Which is kinda of annoying when you first get to the site, but if you’re the target audience, you get over it really quick.”
  2. Colors should be used in coordination with the intent of the site (i.e to sell appliances vs. to teach soothing meditation).
    • “Yup, muted colors suit the intent.”
  3. It’s important to take into account how different colors interact with each other and how this interaction works or doesn’t work with the intent of your site.
    • “Very little interaction and noise between colors.”