I showed my site to Ed Crossan, whom I happen to volunteer for, in his graphic design and video classes at Thomas Jefferson High. He is a veteran graphic designer and teacher of the art.
His feedback pertained to obvious gaps, namely font discrepancies (addressed in class this week), and rollover colors that, as is and once activated, mesh too well with the background. (grey) This latter issue was explained in week 8 lecture, I have just not gotten to it yet, as it is undoable in my version of iWeb (without coding it from an external editor, which I do not have the time to do).
He liked my design rubric, lending to texture and color but staying simple, relying on my work to take center stage. I showed him an alternate page design, more trimmed down with white background, but he liked the original more.
Slideshows were (are) still in process, but the skeleton of the site is in place. I did show him my assets, which he thought were worthy, yet wished would include more descriptive text. I assured him that was underway.
So overall he liked the design, but there was more to come...
Thursday, June 2, 2011
Thursday, May 26, 2011
Thursday, April 28, 2011
Thursday, April 21, 2011
Week 2 Concept Statement Assignment
1. Create a list of all users that may visit your site (not from the WWW but those you’d invite).
· Potential clients in need of: logo and brand identity, photo illustration, conceptual illustration, storyboarding, mural design/execution, print advertising design, photography or video; fine art.
· People: via Inbound links from my blog, LinkedIn, resume, other
· Friends, friends of friends, family
· Engine Spiders
2. What will each of those users want to see in order to enjoy their visit to your site?
I would think a good representation of my work, both fine and professional, presented by a memorable, easy-to-use website would make for the best visit. But, I have heard from people in the industry that a portfolio site should only display professional graphic design or “proposed” project work. Therefore, I’m not exactly sure how to proceed, because I do sell fine art. Do I need two separate sites? Or can there be a hybrid, balancing all of the above?
3. Name your intended audience (the person(s) you need to persuade.)
Intended audience (i.e., most valued) is the potential client or customer, or networker to bring in aforementioned.
4. Describe what you need to inform and persuade them of:
· Promote my: Professional work, art for sale, and other talents that may lead to work. Also act as a conduit for networking, contacts, and blog.
· Goals of the site are: To be an easy place to see my work, my work and education history, and get in touch with me.
· My ultimate message/philosophy (about who you are): I see myself as a visual translator, turning other peoples visions into reality, and offering my interpretations as improvisation along the way.
· What is the story you are telling? Artist returning to his roots, seeking creative, hands-on work after a long stint in the non-profit sector.
5. Write a 200 word concept statement based on the user, your persuasion, navigation and the assets. See below
6. List the assets you need to persuade the user: Which 7 (minimum) projects? scans of what?, photos of what objects? images from what computer graphics program? what descriptive text? list them.
· The Scartlets – photos of product: CD artwork, CD cover/jacket design, poster design
· EBS – Jpegs: brand Identity graphics, logo, print ad (newspaper ad)
· Boldfish.com – 3 logos: pen & ink, scanned
· Sun Path Energy – Jpeg: Promotional Card
· Where To Turn – Photo: Resource Guide Book for Volunteers of America
· Proposed – PDF: iPhone App presentation, “iSpyArt”
· Clocks – Photos: sales items, handmade
· Fine Art – Pending answer re website (If so: Murals, Illustration, Multimedia/built)
7. For the purpose of structuring your website portfolio pages, list the categories of work you will show. (for a Photographer, for example, it may be portrait, product, sports photography categories).
· Graphic Design: logo and brand identity, photo illustration, conceptual illustration/storyboarding, print/advertising design
· Fine Art: Murals, Illustration, Multimedia/built
8. Concept Statement:
I want this website to be many things, but not seem like too many things. I want this site to display the breadth of my core skills, both in past work that I’ve done for clients, and work I’ve done for myself. Both are potential money-makers, and although this is a portfolio –a culmination of my best work to show for hire, I don’t want the site to give off a desperate air that demands that You hire Me Now. My user will know whether or not they want to hire me based of my site –a well developed, simple to use, stimulating user experience that invites everyone to return, without bombarding anyone with flashy bells and whistles, sales pitches or wannabe-clever hooks. My work should speak for itself, and where it cannot, I want a brief, modest explanation. This is not a mountaintop for my ego, but a display case for my prize trophies. The navigation will be intuitive, basic, trimmed down, and obvious –just like my content and assets. In only a few clicks, I want the user to be able to see whatever specific type of example of work they want, understand it based on a clear, articulate description, and be able to find their way back, to my blog, or contact me within a single click.
PERSONAL LOGO BRAINSTORM
I think I like....none of them. But I do like the random pattern left by the transparency over black background. Click for white background/full image.
Thursday, April 14, 2011
GOOD & BAD
Summary of a good site…
A good website should immediately tell the viewer/user what its purpose is and how to use it. It should use visual hierarchy to prioritize functionality and maintain consistent, intuitive navigability in all directions of the site, so that the user always understands where s/he is and does not therefore get lost. It should avoid flashiness, too many bells and whistles, and the tendency use of too many graphic or visually distracting elements. Above all, it should be easy to understand -in purpose and how to use it- and ultimately be memorable and thus make the user more inclined to return.
1. Example of a Poorly Designed Site
URL of a Poorly Designed Site:
Sorry Jeff…
Design features:
Text: Summarize the qualities of the use of type that make this site unsuccessful.
Primary navigation uses all-caps and serif font. You almost can’t see it. 8 fonts adorn the main page (which means every other page as well –as primary, secondary and tertiary (footer) are static). Use of color value in type works with black background, although you don’t get a sense of visual hierarchy via said colors.
Navigation: Summarize the qualities of the navigation that make this site unsuccessful.
Again, primary navigation uses all-caps and serif font. There is really, technically only primary navigation, (aside from the footer) but all other links confuse this system. There is also a search bar next to primary nav. What might we search for? Where would we begin? Whether the site is a portfolio or a blog is unclear, therefore we know not what all to find. Maybe a site map could be in order.
Links: Summarize the qualities of the links, and their behavior that make this site unsuccessful.
I count 63 links on the home page, mostly external…that’s not including internal tags and archive links! Main image is a failed link. There are no visual aids to existing elements to tell the user where one is. There are extra signs (e.g., “Press”, listed under “Press”) that mimic breadcrumbs, as a single word persists, where it might just be easier to change the color of the word of that section.
Graphics: Summarize the use of Graphics, both vector and raster, which make this site unsuccessful.
Outside of the webpage template, there really aren’t many graphic elements to speak of. It’s mostly content: words and images. Normally, this might be a good rule, but not all in the same place, on the same page, crammed over to the left while the main column doesn’t even travel as far. The various image borders (white) work well to establish boundaries for main elements, but many sections are only divided by a very thin floating line. There are no placeholders. There is no texture outside of the use of similarly thin, single-stroke, beveled lines.
General Design: Summarize the aspects of the overall design that make this site unsuccessful.
Visually, colors work okay against dark background. That said, there is too much clutter and inconsistency in the left hand navigation/column, which kills any real sense of visual hierarchy…on every page. These elements should drop out of view when professional work is being displayed. With 2 big mug shots and 2 separate things telling me to hire him, I’m simultaneously bombarded with links to random images and events and tweets and….stop. What should I look at and why should I hire him? You can’t bring your whole room to show-n-tell…
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
I was originally going to use this as a “good” site, until I started trying to answer these questions. Then alarm bells started ringing. It ‘s not a horrible site, it just needs a lot of work, using a scalpel and a large garbage bin.
The main problem is the bombardment of imagery and sections on the home page. I see this a lot these days, I would assume because of blogs and wordpress templates and such. But wouldn’t a good designer realize that listing your tweets and totally awesome fffound images (!) and every tag repeated to your posts, and 8 posts per-page, and a hot event (!!) and a giant footer with, like, 4 more sections in it (!!!) be too much for the viewer? Not to mention 2 typos in as little as 2 paragraphs, preceding a gooey paragraph about his marriage and love life…. Can we blame the Art Institute of Pittsburg, where he graduated recently, for this habit of oversight??
This site could work as a blog, (not their company blog –that’s elsewhere!) but not very well as doubling up as a portfolio site. I think Mr. Finley should have this crazy blog, with all of his, like, favorite stuff -crammed, canned, hammed in together, by itself. But then, also, he could (should) have a kick-ass, streamlined, easy-to-find-ones-way-through-quickly-and-yet-also-really-fun-and-stimulating-like-the-line-of-a-ride-at-Disneyland-on-a-non-summer-day site for his professional work, with NO TYPOS.
2. Examples of a Well Designed Site #1
URL of site #1:
Design features:
Text: Summarize the qualities of the use of type that make this site successful.
Moderate, legible, consistent use of fonts and no all-caps or use of serifs. When you click on a link/section, there is a text box that animates key words in the lower left-hand-side of the site grid. This acts as a constant go-to for each section, a where-to-look for the important stuff. (e.g., There you find a web address for the “contact” page.)
Navigation: Summarize the qualities of the navigation that make this site successful.
Navigation is very trimmed, with only 3 links (not including home link) in primary nav bar. Progress bar, brighter colors, and corner text bar show you where you are at all times.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
All links have rollover characteristics that are basic and easy to get. Pretty hard to get lost in multiple clicks.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
They’ve created a nice sleek Flash interface with consistent matted color and mild texture that make the site look like something of real substance. A progress bar and loading animation gives the eye something to look at while the site loads, and lets you know where you are, both in space and in time. Loading takes a little longer than most, but it is a Flash site, and “slow” is thus relative. (It’s not really that slow, to me.) The site is situated on a small grid with large blocks, and sticks to it, respectively. Large rollovers help you to see what a click will give you so you can preview a section relatively easily. One click brings you to that section, while another click on the image preview will bring up a full screen sized image. Click again, and it goes away, and you’re back at the preview/summary page. Simple, elegant.
General Design: Summarize the aspects of the overall design that make this site successful.
I think their graphic interface and simple, consistent navigation is their strongest suit, making you think less about shortcomings and more about design and seeing what they do. A proper distraction perhaps, but it works.
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
The purpose of the site is a personal portfolio for two designers. Their description (“who we are”) is a little vague, a little abstract, but this seems common with designers. (no formal background in writing or grammar could be the cause…just ask Mr. Finley!) Their site is bold and stylish and simple. Their show of their work, employing a simple step-by-step slideshow lets you see a lot of work, with several ways to navigate within the examples. I only have minor criticism/suggestions about it:
· Portfolio could benefit from organization into sub-sections.
· Fonts a little small, as well as images in some parts of the slideshow. I’d like to be able to see large images of their work in each section, as an option.
· Contact info is clear, simple, but they could benefit from explanation of their professional process from beginning to end, as well as more (they link to behance.net) social networking for more accessibility.
· Highlights in purple (in their body copy, same color as progress bar) are a little confusing, as they would seem to be links but are not. They did this because of the muted text color, to emphasize what they consider important or key terms throughout the site, such as “architecture”, being one of the things they specialize in.
· They could benefit from more description re their projects.
· If you click the down arrow in their preview page, you can get stuck with a semi-large image that covers the entire site, the only way to return view is to click on a separate little arrow on the other side of the image. I would make the image not cover the primary navigation, so one always has the chance to go back to any other section of the site.
3. Examples of a Well Designed Site #2
URL of site #2:
Design features:
Text: Summarize the qualities of the use of type that make this site successful.
Simple large font makes for legibility and easy navigational rules. Colors are a perfect (and rare, ahem) example of RAINBOW WITHOUT THE NIGHTMARE…or more specifically, the use of softer primary tones to accent a full-spectrum of color employed in their backgrounds.
Navigation: Summarize the qualities of the navigation that make this site successful.
Another very basic use of nav buttons, there are only 3. (Note: home button oddly, but effectively, at the top of the page by itself.) They each have their own roll-over color, and they are very large, and always stay in their rightful place.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
Color scheme (as mentioned above) very basic, and uses rules of consistency –each link a different rollover color, staying highlight color when in that section. For the preview page, they use a reversal of color, an all-faded method for the image links, so that the roll-over is a normal, full-color image. This is nice because it lets you see what you’re over instead of muting the image as some sites do.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
The background of the home page hosts a slideshow that shows in between a grid/line system. This is visually stunning, with the only detraction being somewhat ambiguous, and loading slowly. Logo is sharp and recognizable. (Reminds me of the band JFA…) Other basic element colors are few and intentional. This allows the background slideshow to not clash with other colors in the site. Said slideshow disappears in the other sections of the site, so as not to distract from the most important stuff on display. Visual hierarchy and prioritization!
General Design: Summarize the aspects of the overall design that make this site successful.
Elegant design, good use of color. All unnecessary fat trimmed and omitted.
Good contact page, with a small form that demands little of the user. Primary (only) navigation stays with you and tells you where you are, including social network links allow you to sign up, and to share. Visual display of their work is well layed-out and not overly wordy. The work speaks for itself. Buttons tell you where you are, and back buttons allow you to escape slideshows.
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
Goal of the site is to display a design studio’s work, as a portfolio. About page description is short enough, and succinct, with a clear mission statement. A user can get a good idea of the full picture in 2 clicks of a mouse.
One interesting element is a section under the primary nav that shows you how much of a particular type of work that they do (e.g., print, identity) is in their portfolio section. You can click on an individual type of work and it will filter the section for that subject. Default is “all,” displaying all the work in a 3 columned grid.
Friday, April 8, 2011
Week 1 Skills inventory
Week 1 Skills inventory.
Name: Quinn Avery Davis
Department/Program: Digital Design (Diploma)
Are you graduating this Quarter? Nope.
If not, current graduation date by Quarter/Year: End of this summer or Fall
Online Social and Professional networks: LinkedIn, Facebook, Blogger, Vimeo
Website URL (if already developed): www.quinnaverydavis.com
What software experience do you have? (explain all that apply)
Photoshop: Top skill, most familiar
Illustrator: Getting there...still rusty, much more to learn.
Dreamweaver: Used it to build current site. Would like to avoid.
HTML: I know what that is! I can manipulate it via instructions, otherwise a layman.
InDesign: Pretty familiar, used it to publish county-wide guide books for several employers.
Other: Basic Mac staples (iPhoto, iMovie HD, Garage Band, etc. -maybe these don't apply...); Microsoft Office; Once knew Flash decently but am now rusty.
Explain your objective for the class to the best of your knowledge: This class represents a pivotal point in my degree, as these days an online portfolio is more accessible to the public and potential employers, and thus more powerful, than a hard copy portfolio of the (my) days of old, however still relevant. I've been looking forward to re-doing my current site to right way, with the right balance of material that represents my skills, for a while now.
Learn iWeb? Looking forward to it.
Publish web site? Yes.
Revise and update current site? I used to update it, including the resume, but haven't in a while.
Begin the process of a professional web presence? Yes. See previous.
Subscribe to:
Posts (Atom)