site development - full screen button

I tried using a simple arrow but didn't like it (above)

so i found some simple icons online instead 

i searched for high quality ones which i could edit in photoshop and found the ones above.

I used photoshop to select just the main shape content (see below)

and tried adding text (below) however decided this would be so small it would be barely visible and wasn't needed

site development and changes

trying out different icons for the hide menu option at the end of my navigation menu 

menu header colours

here is another screen capture which shows all the hovers and selection code colours for each page together, Note that all colours will never be seen at the same time

website development - further pages PUBLISHED

As with the books page - as of yet all spaces aren't required. so the coloured shapes (shown below) would appear upon rollover/hover and the two with content behind are permanently visible (image above)

The next image shows appearance of icons with further content upon rollover. As with all other thumbnails on the site a colour overlay corresponding with the menu header selection colour appears along with text

Unfortunately I wasn't able to find a high resolution version of photo monitor's logo so I had to use their's as a template to recreate it as closely as possible (see next image) 

left = official

Right = copy

As at present I only have written work published I am unable to include images. However if I had published images which I was showing the thumbnail preview would be a tight crop of a section of that image as with other examples on the site. again with the same hover functionality and the text saying where it was published.

The image above shows how these wrttien reviews are shown in lightbox. With text (top right) that upon click opens link to the work in a new tab/window.
The same would happen with images which had been published also.
Again, note the X the link text (top right) and arrows which appear on hover all correspond with the code colour for that page.

website development - further pages BOOKS

When on a page such as this one (books) where all shapes aren't required. The empt ones will be filled with colours from my custom design swatch and will only appear on hover.

The space required will be a central one (organised appropriately according to space required)
The image above shows how the page will look and the above image shows each other shape which will only be visible one at a time if the user rolls over them.

Upon hover of the image thumbnail in use the user will be a colour overfill corresponding to the colour tab of the page as with all other pages. (see below)

The next images show how this (a book) will then be viewed in light box (same format as with pictures) 

All pages will be in order so user can flick through as they would an E-Book. 

Again the arrows and exit X button sync with the colour tab of the page they are on.

website development - further pages

When viewing nay image in lightbox there will eb text in the top right corner that reads "see me famed" the colour of this font will also correspond with the site location just like the X exit and the arrows.
Upon click of the 'See me framed' A new interactive overlay will appear (see below)

as above - the user will first see the image alone on a plain background. on the top right there are three frame options. the next three images show what happens upon selection of each.

The icon - bottom right is a link to a site (opens in new tab/window) where user will be able to purchase prints, both framed and unframed with a selection of choices.

the above image is simply to show the use of margins in my design

website - design development

I have been perfecting my site and some changes I have made to pages which I have already posted will be detailed in this post.

above is my landing page - I have previously posted this, however i have since made some minor changes to letters which needed re-scalling as they were slightly distorted. This post also shows all the selection colour fills of each menu tab at once. (however only one is visible at a time indicating to user their location on the site)

 I have added some colour to my splash page as you can see above. These colours are the same as the ones used in the site for consistency. The letters are not permanently this colour. they are black as in the image above but upon hover of each letter they change colour. Again all colours will never be seen together. upon click any where on the page you enter site and see landing page (above)

As you can see from the two images above I have made some slight changes to the text when it is being viewed in Lightbox. I used the character menu to alter the space between letters and also the space between lines.

As you can see from the two images above (bottom one revealing all hovers together)

I have made some changes regarding the font. Although I haven't changed the font I have altered the properties of it as well and the spacing between letters and lines. Additionally the PT. sizes and most noticeably the appearance of the clock widget. 

further page development

above is an example of the projects page which again has it's own colour. This page will showcase a varied selection of images I feel are strongest and show the extent of variation in my photographic skill and interest. These two will open in lightbox and can be scrolled through in the same way however a colour overfill and title is not required here. Despite that the next page arrow sill corresponds with the menu tab colour.

the above images shows my about page and how it looks upon arrival. each shape has different functions. For example upon click of the CV option you will get a full screen colour coded overlay that indicates it is downloading with a stop download option in the top left corner.

the blog, shopping basket, tweets and facebook thumbs up are external links to those sites. (they will open in separate tabs/windows so the user doesn't loose there location on the site)
The contact and about me shapes will also have full page colour overfills containing the stated information which close upon click anywhere on the page.
The testimonials will open in lightbox and user will be able to scroll through images containing reviews written by customers much like with images - i chose to do this in such a way so that I can add more as I receive them.
The star simply allows user to add my site to their computer favourites/bookmarks.
The picture of me would open up full screen also.

Each of these do things upon hover to give the user a better indication of what to expect upon click. The hover states can be seen in the following image, again these would never all be seen at one time.
Some of the icons I:E the cat that appears on the about me and the umbrella that is where my location appears are relevant either to the content behind or to me, revealing a little bit about myself in a subtle and playful way.

I have screen printed some of the full screen overlays which appear upon click, The two examples below show what the user will see upon click of the CV download option and the contact page link also.

chosen font

Helvetica

Helvetica is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with Eduard Hoffmann. 

Sites I have found that look like/ function like mine

Sites I have found that look like/ function like mine.

http://spielmagazine.com

this site has a three main features alike my site.
Firstly a click on the logo/site name at the top always takes the user back to the home page

secondly the navigation menu dissapears leaving only the logo/ site name visible and the sub menu options re-appear upon rollover/hover of that general area. With my site my menu will be static unless the user chooses to select the hide menu option at the side of the navigation bar. Then it will function in the same way as this example.

another thing I found similar between my site and this one was that the naviagtion arrows are rounded in circles and again only appear on rollover. As do mine.

Some screen captures of these functions below:

another site which operates in a similar way to mine is this one

http://www.iamyuna.com/

this site uses shapes as thumbnails that work in a kind of opposite way to mine. they are of solid colour and upon hover a taster image of what it contains is revealed whereas with mine the image is there to create intrigue and upon hover a semi transparent fill appear with text titles.

the screen captures below show two examples of what the shapes look like upon hover/rollover

The next example below shows a clock widget on a site which gave me the idea to include it on my about me page to give it a little something fun and unique.

This next example showcases another unique way of using thumbnails that upon rollover animate to reveal the title/summary of what the user should expect to see more of upon click. Similar idea to the example above and to my site however in a different way.

http://www.swinton.co/

http://itsashapechristmas.co.uk uses a font much like the one i am using on mine. it's menu tabs inside boxes is also very similar, although there is more space around the text in this example and the boxes only appear upon selection.

about me tips

Are You Making These 7 Mistakes with Your About Page?

Does thinking about it make you stumble and sweat?

Have you put it off, because you’re worried it will suck?

You’re not alone — lots of website owners have an easier time proposing marriage than they do writing a solid About Page.

If that’s you, you’re probably over complicating things. A good About Page is simple, straightforward, and it communicates just a few key things.

But just because they’re simple doesn’t mean people don’t screw them up.

There are certain mistakes that I see again and again, on sites that deserve better. These mistakes are easy to fix and they’re pushing away the people you want to bring closer: your wonderful website readers.

Your About Page is typically one of the most-visited pages on your site. So let’s make it easy for you to have a stunningly helpful, user-friendly About Page.

Take a look to see if you’re making one of these common mistakes:

Mistake 1. You don’t have an About Page

You might have some interesting content, a nice custom-designed header, a sweet-looking premium WordPress theme.

What you don’t have is an About page.

It might be completely missing because you think “About Pages are a cliché.”

Or because you’re freaked out about creating an About Page, so you’re just hoping no one will notice it’s missing.

Or you might have called it something clever like “Experience” or “The Scoop” or “But Wait, There’s More!”

When it comes to the interface on your website or blog, never forget the words of usability expert Steve Krug: Don’t Make Me Think.

I don’t want to look at your “Resonate” page and wonder if that’s where I find out who you are, what you do, and why I should read your site.

Every site needs an About Page. Don’t be clever. Call it About.

Mistake 2. I can’t find your name

Let’s say I want to link to you, or tweet something cool on your blog.

I would really like to know who you are. That means I need your name.

Not a spammy name like “The Real Estate King.” (Please don’t comment under those either. You can’t believe how bad this makes you look.)

Your name. As in, “What I say when I am introducing you?”

Unless you are Madonna, you need a last name, too.

(Incidentally, if your name is Dave Smith or Cathy Johnson, try including your middle name to make yourself more memorable and to give you a decent chance to rank for your own name in search engines. It works for David Meerman Scott and Carole Sevilla Brown, and it can work for you. If your middle name is common too, find a family name to put in there.)

Please note that this does not have to be your real name. Some people would rather keep some distance from readers, for security reasons or just to have a little privacy. There’s nothing wrong with that.

Johnny Truant, James Chartrand, and Terry Starbucker all work and write under professional pseudonyms. You can, too.

Mistake 3. I don’t know what you look like

If I want to hire you, refer you, recommend you, or even pass you some readers, I’ll feel more comfortable if I have some sense of who you are.

I get that from two things — your writing voice and your photo.

Again, make this a real photo and not a drawing or an avatar. Yes, there have been successful bloggers who have used cartoons instead of photos, but they’re the exception.

When you’re trying to make your site successful, why work against yourself? Give yourself every advantage you can.

When I have a face to put with your name, you become much easier for me to remember. That, combined with some well-written content, starts to help me feel like I know you.

And I’m much more likely to link to you or otherwise help you reach your content goals if I feel like I know you.

Mistake 4. The writing is boring

This one hurts, I know. Let’s get it over with so we can move on to more pleasant topics of conversation.

For some reason, when people sit down to write an About Page, everything they know about creating interesting content suddenly flies out the window. Their usually great writing style starts to suck.

To fix this unfortunate problem:

• Use your own writing voice.
• Be ruthless about pruning out any corporate-speak or hypey jargon.
• Don’t be afraid to be a little funny, if you can pull it off.
• Don’t be afraid to be a bit of a dork, either, if that’s part of who you are.

Remember, along with your photo, this is where I go to figure out who you are and whether or not I like you.

Mistake 5. Using video alone

Video is a great way to create quick rapport on your About page … for site visitors who like video.

But visitors who are coming to your site from work may not want your voice, however melodious, blasting from the speakers in their cube.

They also may not have 6:23 minutes to spend figuring out who you are.

Lots of web users love video — and some hate it.

If you use video on your About Page, keep it short, make it interesting, and include some text for the readers in your audience.

Mistake 6. You go on (and on and on)

I’m a fan of storytelling. It pulls the reader in, it engages like nothing else, and it’s one of the few techniques that actually sometimes changes people’s minds.

Stories are awesome.

Long, boring stories aren’t so awesome.

If you’re going to tell me the story of how you came to be here, please for the love of Pete make it interesting.

What do your readers find interesting? Themselves, and things that benefit them. Those are two good places to start.

Mistake 7. I bet you think your About Page is about you

This is perfectly natural, even if you aren’t so vain.

What most site owners miss is that your About Page is actually about the person who clicks the link to see it.

Talk to that person about why they should bother reading your site.

Talk about the problems you solve.

Talk about how you can help.

Talk about what they’re interested in.

To quote Brian Clark,

What do you need to know? You need to know whom they admire, and what they aspire to, despise, fear, and cherish.
How to Craft a Marketing Story that People Embrace and Share

Yes, it’s a spot for you to talk about yourself — but only in the context of how you serve your readers.

If you absolutely can’t resist self-absorbtion, create a personal blog or social media account and throw in a link to that. You can put all the tedious details there, and warn people that’s where you talk about your struggles with your cat’s gluten sensitivity.

For your About Page, keep it about the reader — and how you help that reader.

(http://www.copyblogger.com/how-to-write-an-about-page/)

design changes

Over the past weeks I have made many changes to my design and eventually settled for the one I feel is most effective and excited me most.

I noted some issues and have gone about rectifying these.
The first change I made was to eliminate the double navigation panels as I felt the vertical one was taking vital space away from my main site content which should be for images.
I experimented with Lightbox and found it to be the most visually effective way of showcasing my images.

As previously explained (my splash page at present) May potentially make some subtle changes to this however the general structure and function remains (tree from logo appears on hover of any letter and click anywhere on screen to enter site)

LANDING PAGE / HOME

To keep with the splash yet introduce some images to indicate that images will later fill the same area.

 As you can see a lot of changes have been made to the navigation bar which I am now really pleased with. Each box has it's own colour coding that when selected remains in colour and other colour page elements such as the transparent fills which will appear over thumbnails upon hover and next page arrows ect will all correspond meaning user is always aware of their location within the site.

The logo - when clicked always takes user back to this home page.

I have included a footer which remains on screen permanently and shows contact information.

If you look to the right of the navigation panel you can see a small arrow which when clicked puts the navigation tabs into hiding mode. like the functionality of the menu on (http://spielmagazine.com)

This home/landing page is purely for aesthetics and the letters do not link to any further content. This I feel introduces the user to the navigation menu and how to get around the site on first content. 

In the next example above you can see what happens when the user clicks the projects tab. It is highlighted in it's given colour code and the thumbnails are filled with images. Each of which is a kind of taster to the project that exists behind it. The arrow > which is also colour coded would appear should there be another page - if for example there was a further 3/4/5/6 projects to be seen, a click of the arrow would mean the first 3/4/5/6 or however many spaces needed to show the next projects not visible on the first screen would roll away and the others would join on the end rows.

The next image will show what these then look like upon hover, however bare in mind they will never all be seen together - this is just to show what they look like.

The following image will show what happens when the user then selects one of the given projects. (in this example 'the dogs home, a picture story'. has been selected.

As you can see the final image is the title in a colour coded box. This is the explanatory text that supports any given project and will be viewed in light box like the images. this means it is optional reading and can be skipped as easily as an image. additionally should the user want to read it prior to viewing the images. they can. 

If a project consisted of more than 14 images and one slide of text the same mechanism with an arrow > would apply as explained previously. Although all images contained could be viewed in Lightbox on a continuous stream starting with which ever one the user clicked first.

The next two images will show lightbox pop up with an image and one showing how text would look also.

Please note the arrows in lightbox, and the title above the main body of supportive text would all correspond if we were on say for example. the books or exhibitions page (as each section has it's own colour coding.) yet they would be displayed in the same way. thumbnails with corresponding colour overlay and viewed in lightbox as images.