Roy's research assignment.

I am very pleased with how i went on the recent website research assignment. I gained an overall HD for this one and received solid, detailed feedback - you beauty!

This web design class is enjoyable and Roy is a could dude to have as a lecturer.. not just because of the mark he gave me :P

Looking forward to more.

D.

SITE MAP.

Okay, below is something i feel is very important to develop before you start to design and develop your website is a SITE MAP.

Here is my very simplified site map.



D.

It's all coming along nicely :]

Okay so after spending a bit more time on developing my website's look-n-feel as well as functionality i now have something to show for all that time spent researching, thinking, planning and developing.

You will hopefully notice a variety of clickable menu options available to navigate through the site and how they display (colour wise) once selected as a way of understanding where you can go, and then where you are within the site every step of the way. Something of great importance!

My next step is to now add some interactivity to the images by way of making them automatically change to a new image after a few seconds or by way of developing clickable arrow buttons that allow the user to click through the images at their own pace (similar to that used on Facebook). 

The "<" and ">" characters (positioned middle-left and middle-right of the image) are that i feel i need to use for buttons, i just need to work out the best way to write them into the html code. I have some code that will help make this work, i'm still just getting my head around it :]

All-inall though, i am happy with my progress and Roy (my lecturer) has informed me that i'm miles ahead of everyone else and have no need to stress about things.

So i will stick at it in order have it all completed and ready to upload to my hosting mod so that it can be "live" on the internet for all the world to see!! quite exciting!



D.

About section: will include details relating to who i
am, what my business is all about and list the
clients i have worked with.

It will also give details on any current or up-n-coming
news and events linked to a personal blog format.

photografic images section: will include some of
my best photographs from each specified genre.
Any portrait (vertical) images may be displayed in a
side-by-side arrangement so the centre area is filled.

Contact section: will include all of my need-to-know
details in order to contact me.

I like the idea of including a enquiry/comments form.
This requires a little setting-up, in order for it to function
correctly (i'm told), but is nothing difficult.

I will also include clickable icons to any online social
networking sites i might have established accounts with.
(eg LinkedIn, Facebook, 500pixels, model-mayhem)

MY CURRENT WEB-PAGE.

Just thought i would add a quick blog entry showing my current web-page that is live on the world wide web.

It is simply a JPEG graphic that i created in Photoshop displayed on the index.html file. There is no real functionality to it, but it does display my contact details and give a reasonable spread of my style of photography for any potential clients.


D.

My current webpage - soon to be replaced :]
www.dphotografic.com

Website design #2.

Okay so after a few weeks of trial and error over my original design and how i would then slice it all up to be able to configure it in Dreamweaver with the use of CSS (Cascading Style Sheets) and HTML code i started to re-think and then modify the design somewhat.

This took a good week and a bit to decide upon and get looking right whilst still maintaining functionality within simplicity, but i now have a working result to show Roy.

My focus is on simplicity overall with a clean collection of photographs and minimal text - just the facts really.

Below are a collection of screen-grabs from my laptop as i was creating the interface design in Adobe Photoshop CS6.

I have created a managed site within dreamweaver that allows me to preview what i have developed in Safari as a "dummie website" so that i can check for any issues related to functionality and how it displays within a browser-based software.


Hope you like it,



D.

Website Desgin #1

Okay, so from my research into all of this, i spent time over the weekend using elements from that which i liked to start designing my own website template.

I managed to show Roy this and ask for his feedback/thoughts regarding whether or not it could be incorporated to suit development within Dreamweaver (HTML and CSS) and he was very positive, which was great.

One thing i must remember to add is my location - as in Canberra Australia so that my potential clients know where i actually reside or need to travel from.

Here is an example of what i created.

D.

WEBSITE DESIGN - research.

Okay after yet another informative class last night, i finally had time today (last week was crazy-busy) to chill at CIT and research some websites to stir some ideas in my own mind and help me create something that is - appealing, practical, functional and professional.

This whole website design and development important to me, because i have been wanting to design a functional website for myself to tie in with my promotional plans to market myself with a complete package (business card, website, signage, posters etc) and start getting some real work and start earn a living as a photographer :]

Anyway, each of the screen captures found below have a brief statement underneath them that helps explain why i found the website (as a whole or parts thereof) appealing.

I will then end this post with a worded summary of what i might try do - followed by a visual representation in the form of a rough draft of what i mean (once i get time to create it in photoshop).

I REALLY like this design. It is SIMPLE and CLEAN,
yet IT WORKS a treat both visually & functionally.
I reckon it will be easy to develop and maintain

I also REALLY like this design for all the same
reasons I liked the previous example.

www.mike-butler.com
The impact of this image is unbeatable. The header is
good too, but i reckon the menu options / links should
be visible at all times rather than having to click the
little arrow off to the side in order to display them.

www.steveback.com.au
Put simply, it is simple, but that's also why it works.
To me this is very classy, no fuss, no fluff just the 
facts you need and want. The design displays the 
common centred layout which resizes to any screen.
I'm in two mind about it all being so dominated by the
colour WHITE, perhaps a subtle lines or drop shadow
might allow the negative space.

www.adamfirthphotography.com
In a similar way to the previous example, the simplicity
of this site works well to give you what you want to
know without all the additional extras.

www.lime.net.au
I through this one in to demonstrate that as much as
i believe an image should be the main focus of each
web page, it is important to do it cleverly / stylishly
instead of going a bit too far like in this example.

www.marklobo.com.au
Another solid example of the centralised design that
allows for resizing. I do like the leading lines from the
top down to each link / menu option. I think lines can
be such an effective way to lead the viewer's eye to
where you want them to go/look.The overall design
is uncluttered and makes for easy navigating.

www.timgriffith.com
A photographer i would like to meet one day. A true
professional with a professional website. Very similar
to the previous example yet with its own appeal. Only
worry for me is the large amount of negative space
between the browser menu bar and the start of Tim's
title and image. Otherwise good.

www.jannides.com

Someone i have had the pleasure of meeting. He is a

good photographer and runs a good business. He has

a lot to offer within his business and i think that is 

why this works because it allows his client to choose

where to go initially. The use of this introductory 

splash page is an older way of website design, but 

can obviously still prove relevant.

www.jannides.com
The scrolling filmstrip (so to say) is a nice addition to 
the normal static display. Like other examples above,
this works well thanks to the fact is isn't too 'busy'.

www.samnoonan.com.au
With white being replaced by a deep grey tone this
design and layout is once again very similar to a few
of the previous examples where information options
are kept clean and simple so as not to distract from
the central image and name of photographer etc.

www.chameleonphotography.com.au
An interesting and clever use of plain colour throughout
the design to break up and/or frame areas of interest.
Simple roll-over effects match the overall design.

www.brisbanecorporatephotographer.com.au
Very Similar to Stefann Jannides's site in that it uses
a scrolling filmstrip surrounded by clean, organised
text information, photographer's identity and links.

www.architecturephotographer.com.au
Another simplified central design, however i feel this
particular example is more cramped together than some
of the previous examples - it needs to breath a bit.

www.andrewkrucko.com.au
This is yet another stylish design that works well in my 
opinion thanks to its simplicity. Everything is centred
which appears to be the way to go. Like a previous 
example though i do question whether a subtle bit of
line work or a border would help break up the empty
feeling i'm getting from this.

www.troyhansen.com.au
Again, simple, crisp, legible and image focused, but
with a different placement of the link options. A subtle
attempt to frame the picture with a boarder is evident,
but it doesn't look quite right to me. Otherwise nice.

www.cathyschuler.com
I added this mainly to remind me that having a link
to a blog, or section to add personal thoughts and/or
upcoming projects etc can be a nice thing to have
available to give your client more insight into the type
of person/photographer you really are.

www.thearchitecturalphotographer.com
I added this to demonstrate that having a solid BLACK
background can occasionally dull-down an image of
similar tonal range (low-key). I'm slo not sure the
navigational links off to the right are such a great idea.
I still think it is best to keep everything contained
more to the centre of the page.

www.silverstone.net.au
An interesting and clever use of plain colour throughout
the design to break up and/or frame areas of interest.
However i find the choice of colours less pleasing
then in an example just a few images ago.

www.ursbuhlman.com
Similar to a previous example where the full page
image of a flight attendant, i find this just a bit too
much to take in and am not sure it will prove to be
affective/usable on multiple screen displays.
Brilliant photographer though.

www.ursbuhlman.com
Once you get past the dominant splash page things
improve, but i feel this would look a whole lot better if
everything was centred.

www.lik.com
Nothing much to say here other than - simple & sexy!
Some things to consider here for sure.

www.murrayfredericks.com.au
Again, simple, crisp, legible and image focused, even
if it is at a smaller display size than some. A clever
use of negative space to create other visual effects
that almost appear to frame the central image.
Not bad at all - some things to consider here i think.

www.andrewrichardsonphotography.com
Parhaps a little too simple...

www.broncolor.com
A stylish, professional website design for a stylish
professional business and their products. This has
actually given me number of important things to 
remember and consider with regards to my very own
website design. I feel this will be the sort of thing
to aim for with dphotografic.com

www.clouds365.com
Something way different to anything else so far.
The rollover image effect is nice, but how 'heavy' is
this site overall i wonder.. a lot of images. In a way
it is kind of distracting now i take a second look.

www.alexander-henderson.com
Again, simple, crisp, legible and image focused, even
if it is at a smaller display size than some. A clever
use of negative space to create other visual effects
that almost appear to frame the central image.
Not bad at all - some things to consider here i think.

Information yet to be added...

www.erikborst.com
A slightly quirky decision of alignment and placement
of the graphics in relation to the text links.
Not something I will use in my own design.

www.garrodkirkwood.com
Works with the black negative space, but is far too 
negative and empty in my opinion. It does allow plenty
of space for large images and things though.

www.zhangjinggna.com
Font is too fine and the grey letters become lost. It
all feels a little too empty to me.

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Information yet to be added...

Summary:With regards to capturing people's attention and interest when finding my website - I want it to be a 10minute website, not a 10seconds website.

I feel it is more important to focus the viewer's attention on my images rather than bore them with all my particulars, that can be shared at a later date with them directly on an individual, need-to-know basis.

Things like a GREETING, PORTFOLIO, AWARDS, CONTACT INFORMATION etc should be easily identifiable, yet at the same time not distract my viewer/customer away from the stuff that sells - if i may be so blunt.