my site - design development

After realising my previous designs didn't function to my liking when it came to introducing the sub menu's i looked at different layout designs. This is the one I most liked and although I was aware there was something that wasn't quite right about it. I felt it had move potential to be developed and felt excited about it more than I had with previous ideas which was clearly a good sign.

Above shows the initial structure I came up with as explained above. 

the next two images show my splash page which is made up of a shape structure that will continue into the site. The shapes will become my thumbnail spaces where I can reveal a small tight crop of the image that is behind it.

upon hover the shape will have a colour over lay (semi transparent) that contains text letting the viewer know the title of the project they are clicking to view.

These colour overlay's will correspond to the menu tab selection highlight colour so the viewer constantly knows where they are.

As you can see with the splash the circle in the middle that is empty will have the tree from my logo appear upon hover of any of the letters (see next image)

a click anywhere on the page will enter the site.

I decided to look at how images would look in this format. I tired setting an area that would always be used regardless of if i was showing one landscape. two portraits or one portrait format.

I instantly discovered a problem with the thumbnails and wasn't sure about the images being viewed against such a complicated (although uncluttered) back ground.

I plan to see what lightbox would look like and to re-think the need for thumbnails also.

The Ten Biggest Website Mistakes by Photographers

I found a site that offers (a very opinionated) list of mistakes often made on photography sites. I thought it was worthwhile reading and some points were quite useful in. I have highlighted some of the more relevant points for myself.
(http://www.mcpactions.com/blog/2011/02/17/the-ten-biggest-website-mistakes-by-photographers/)

The Ten Biggest Website Mistakes by Photographers (Tough Love for Some Photographers) 

1. About me page.Who are you and why should I give you my hard earned cash?One of the biggest mistakes that I see photographers making is creating a Pollyanna style About Me page without a lot of relevant information that a consumer would want to know.  About Me pages that proclaim, “I love taking pictures” or “My passion for photography began with the birth of my child”  tells me absolutely nothing about your skills and qualifications as a photographer.  Would you go to a dentist whose website states that they “Have always loved brushing their teeth and enjoy scraping plaque out of children’s mouths?”  Not me.  How about a builder whose only qualification is that he is “passionate about hammering nails into wood.”  I don’t think I’d hire that guy to build my house, how about you?  So why should someone trust you to take professional photos of their family just because you “…love chasing children through cornfields and capturing those precious moments.”  At the very minimum, include your qualifications as a photographer.  Don’t call into question your sincerity and professionalism by insulting your audience’s intelligence.  It’s wonderful to tell the world that you are passionate and love what you do, but if you want someone to respect you as a professional, give them something tangible to use to make an informed decision.  You’ll likely find that people will take you more seriously as a photographer, and the quality of your clientele will improve.

2. Out of focus, badly exposed images or images not sized correctly for site.Did you mean to do that?This should be a given yet so many photographers continue do this. And no, adding a little Gaussian blur or a texture over the image isn’t going to fool anyone. That shot may have been beautifully composed, but if you missed focus it has no place on your website.  In addition, be sure to size your images appropriately for the space on your site.  Nothing screams “I have no technical knowledge” like a 400×600 pixel image stretched to fit a 500 x 875 pixel space.

3.  No real clients.Little Joey in fall…Little Joey in the spring…Little Joey appears on everything…All of the images on your site are of the same child (sorry, but most people are keen enough to realize that the pretty toddler in the fall leaves is also the girl on the beach and again in the snow.)  This is not to say don’t include photos of your own children or friend’s children on your website.  The very first image that pops up on my site is a picture I took of my three children.  I include it because I think it is a powerful image and a good example of my work and what I have to offer. I have a few other images of my kids here and there for that same reason. But if the only photography work you have done thus far is of your own children or your friends’ children, then you really have no business calling  yourself a business.

4.  Illegal music.Just don’t do it.I happen to be one of those people who enjoys beautiful music on photography websites.  But if you don’t have permission to use a musicians’ song on your site, then you are violating their copyright.  Period.  You wouldn’t stand for a musician copying your image for free and using it on their CD cover, so why would you take their music and use it on your site?   There is plenty of royalty free music available for a reasonable cost as well as up-and-coming musicians who would love to give you a license to promote their music on your website.  Meanwhile, try to resist the temptation to “borrow” that perfect Lisa Loeb or Sarah McLaughlin song for your online portfolio. If you do, I hope you have a good lawyer because that the song’s owner may find out about it eventually and they will have more money to fight you in court than you have.  Even if they don’t, it’s tacky and it’s a violation of Copyright Law and just plain wrong.

5.  Not revealing a little bit about your pricing.What the heck do I have to pay ya anyway?Let’s face it, many of us (including yours truly) are afraid to publicly disclose our complete price list for fear that the person next door is going to take our well-thought out packages and prices and undercut them.  But at the very least, you should always give people a starting point.  What is your lowest session fee, your lowest print price?  Do you have a minimum purchase requirement? That is enough for anyone to know whether or not they want to know more or if you are out of their budget. Offering absolutely nothing about price on your site gives the impression that you are going to be too expensive, and people will move on.  Think about those real estate listings that read: “Call for price.”  Everyone knows that’s code for “You can’t afford it” and that is exactly what people will think if you don’t provide at least something in terms of cost.

6.  Where are you?Location, location, location.So many times I’ve come across a really good photographer’s website, only to hunt and search endlessly to try and determine WHERE they are located?  What state?  What city?  Are they on planet earth?  Wow, that’s a lot of work to put into a website, only to fall into a black hole.  If a potential client has to hunt for basic information such as how far you are from their home or if you service their area, they are going to give up and move on.  Just a mention of your city on your splash page is enough to say “HEY! Yoo Hoo! I’m over here!”

7.  Copying verbiage from other photographer’s websites.What’s mine is not yours.Sadly, this has happened to me and other photographers I know.  I have had the unfortunate experience of coming across a site where someone has stolen carefully worded text from my site to use on theirs.  Writing for your site not rocket science.  If you are not a good writer, ask someone who is to create some good material for you.  If you have nothing original to say about yourself or photography, then don’t say anything.  And by the way, Google doesn’t look kindly on that sort of thing either, so you could be setting yourself up for a drop in your SEO results in addition to a call from an angry photographer if you lift text from another person’s site.

8.  What makes you different?The clone photographer.This is what I feel is the most important part of your site as well as your reputation and identity as a photographer.  If you randomly Google “child photographer,” you easily come up with five or more websites that virtually offer the same poses, ideas and trends that are virtually indistinguishable from one another.  We all have photographers we admire and follow, but jumping onto the latest fad bandwagon to try and get your images to look like Photographer X is going to do nothing to get you noticed.  All photographic genres overlap and there is always going to be someone doing something similar to what you are doing.  But what makes YOU unique?  What is your niche?  Is it that you like to photograph newborns in bowls?  Zzzzz… We all do that.  What else you got?  You like putting babies in cute hats and resting their heads on their arms?  Next.  Every photographer right now, including myself, is doing those things.  Instead of showcasing the latest trends on your website,  figure out what is special about you and your work.  You’re an artist and you should have your own unique point of view.  If you don’t, you need to ask yourself why that is.  But hopefully you do have a perspective all  your own.  Whatever that special thing is, your gestalt if you will, that should be the focus of your site (either in words or in images.)  If there is nothing special to distinguish you from the lady in the next town over, then no one will have any reason to choose you over her other than price (and you don’t want that…ever!)  There is nothing that is going to kill  your business quicker than being generic and providing generic examples of your work.

9.  Using other photographer’s images to pad your site.The thief photographer.Self explanatory.  What goes around comes around.  And the fact that I even need to bring this up is very sad.

10.  Blog.
Work or play?I am still somewhat squeamish about blogging.  I’m never exactly sure how much to write, how much of my work to showcase, etc.  When looking at other photographer’s blogs, one of the things that turns me off as a reader is too much personal blogging mixed in with their professional work.  I love seeing glimpses into other photographer’s lives, but when it becomes a big mish-mash of client images interspersed with grandmother’s famous pumpkin pie recipe or the big move to the new house, I lose interest fast.  My preference, as a reader, would be to have one blog for business and one for personal use, then offer links to one another. It also makes me suspicious that any photographer who has the time to document all of the details of their personal life, might not really have much of a business going on.

site that shows shapes falling away

site that shows shapes falling away similar to how I want my site to operate

http://www.cappen.com/

leading tracking and kerning

Leading determines the amount of space between lines in a paragraph.

Tracking is the spacing between characters in a line of text.

Kerning increases or decreases the spacing between certain pairs of
letters, like AV, which look better if their boxes overlap slightly.

Fonts (text vs image) Safe fonts for web

Text vs. images

The first thing you need to know is that you can safely use any font on a website provided that it is part of an image. How can you tell the difference? Easy: if you can use your mouse to select individual words or even letters of the text your see on a website, then what you have is pure text. Below is an example:

You can easily select this text.

But below is an image that contains text. You can’t select individual words or letters because they are part of an image:





The font used in the image above is called “Moderna” — and you probably don’t have it on your computer. But since it’s used in an image, you can see it just as I do.
Which brings me to the next point:

If they ain’t got it, they won’t see it

So, you just downloaded the coolest grunge font from your favorite free site. You then decided to make all of the main headings (<h1> </h1> tags) on your website this font. Awesome! But when showing your masterpiece of website creativity to your friend at his house, your eyes widen in shock. “Where is my font?!” 

Common fonts for websites

Since not everyone is using the same operating system, it’s actually a little challenging to prepare a list of web safe fonts that you can use as pure text on your websites. Some people use Windows Vista or Mac OS X. Others use Linux. And others are still using older versions like Windows 98 or Mac OS 8! So to keep things safe, here is a list of the most common, standard fonts for websites that even people using ancient operating systems can see:

• Arial
• Courier New
• Georgia
• Helvetica
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings
• 
  

Here’s an image of what they look like:



I realize that this is a pretty short list, but remember that these fonts are to be used as pure text and not as logos or other fancy website design elements.
If you’re sure that most of your website visitors are using more recent operating systems, then you can also add these common website fonts to the list:

• Andale Mono
• Arial Black
• Century Gothic
• Comic Sans MS
• Impact
• Tahoma
• Zapf Dingbats

Here’s an image of what they look like:

(There are a few more, but I’m the kind of website designer who prefers to use fonts that everyone can see.)

Final thoughts

In answer to the question “What are the best fonts for web design?” I would recommend for pure text that you stick with the most common fonts in the first list above. This will ensure that everyone visiting your site can see it the way you intend it to be seen. For your website logo, navigation, and other website design elements, you can use any font you want as long as it’s part of an image.

(http://www.newbiewebsitedesign.com/best-fonts-for-websites-web-safe-fonts)

research

i have included the tow screen captures above as the display a series of thumbnails that, upon hover is covered with a semitransparent fill and a title. (what I intend to do with my thumbnails)

The image above also shows how transparent fills can be used to bring out text ontop of an image. additionally I like how the geometry has been continued with the buttons which are arrows inside round circle's.

nice website

This site is useful for observation in the way that the selection link is highlighted upon hover (smiler as to what I intend to do on my site)

I like the way that when you go back to the main page where you can select another option, links already visited are marked out with a simple cross. I could link of some way of indicating to the user after each link has been viewed so they don't get confused as to which they have already seen.