Wednesday, 12 December 2012
Use Of Guides/ Rulers
Through the use of guides and rulers I am able to place information/ images into place so that the items will be in line throughout each page of the website, this helps for consistency and flow.
These also help when aligning anything within the design, for example i used them a lot to make sure the categories were inline with each other and had the correct spacing, as well as being on a suitable level with the logo.
Text For Info Page
The correct information in the about section of my website is imperative, I want to put across enough information inorder for the viewer to form an opinion of me. I also want to put across my own personality into the text so that the viewer can relate and feel comfortable working for me.
Below is the information that I chose to use...
------------------ ---------------------- ---------------------- --------------------------- ----------------
// Currently studying photography at Salford University, I am a Manchester based portrait photographer who enjoys travelling and fashion.
Below is the information that I chose to use...
------------------ ---------------------- ---------------------- --------------------------- ----------------
// Currently studying photography at Salford University, I am a Manchester based portrait photographer who enjoys travelling and fashion.
I primarily photograph people, with a
unique style that incorporates both documentary and fashion as the key elements.
Through using both digital and analogue techniques, my work has a sophisticated
yet vintage look.
Traveled:
// Milan
// Florence
// Pisa
// Rome
// Brindisi
//
Bari
// Corfu
// Lefkimi
//
Dubrovnik
// Split
// Barcelona
// Malaga
//
Tolox
// Madrid
Contact:
Tel: 07854054725
Email: ben-stokesy@hotmail.com
Additional Info:
From studying photography at college, I went on to enroll on a
university course that would test my photographic skills.
Mock Journal Page
Above is a screenshot from my design for my jornal page, I actually really like it. I have designed it so that you can see what text would look like on the journal as well as images.
The layout is in the same grid/ rulers as the other content pages, apart from the home page which is full bleed. There is use of the slash sign inorder to show the different posts.
Visual Diary Page/ Journal
I have been looking into and researching the idea of putting in a visual diary page, this will work as a blog would and I will constantly add photographs, text and other information. This would give the viewer possible future client a look into my thought processes and influences. All work would be my own however I may use quotes if relevant.
Through looking into other practitioners blog, it is apparent that some use just images and others choose to include text when posting on their blogs. Below are screenshots and examples. I think that I will use both text and images however I imagine I will use mostly images. I will also make sure that most of the images are mine, if not all.
Michael Mayren has chosen to simply use images without any text for his blog, again saying something about his personality and style.
Through looking into other practitioners blog, it is apparent that some use just images and others choose to include text when posting on their blogs. Below are screenshots and examples. I think that I will use both text and images however I imagine I will use mostly images. I will also make sure that most of the images are mine, if not all.
The below blog shows an image then when clicked on, some information about the person in the photograph, very interesting!
Michael Mayren has chosen to simply use images without any text for his blog, again saying something about his personality and style.
The Way People Read A Website Page
The following post looks into how the human eye looks at and reads a webpage.
The above image was found on the internet and shows how the human eye initially looks at a website page. This is very interesting and has helped me throughout the design process in terms of were to place certain things and how to catch the viewers attention. For example, I chose to put my logo in the top left hand side so that the viewer will remember my name. the viewer then will look at the images/ information below the logo.
Clients/ Features/ Commisions
Due to only not having that many well known clients as of yet, I may decide not to have a section of my info page for people that I have done work for.
This will be something that I will revisit when I have left university and have worked for more clients.
This will be something that I will revisit when I have left university and have worked for more clients.
Info Page
The about page of any website is essential, especially for photographers who show their online presence in order to get more clients.
I have always imagined my about page/ info page/ contact page to be straight to the point, telling the potential client briefly yet descriptively about my capabilities and style. I also want the page to put across my own personality, this is due to the first impressions that the viewer will see. As it is in the photography world, first impressions count!
Below is a screenshot from photographers India Hobson, her layout is simple yet informative and the navigation is easy and again very simple, great for user interaction. Although she does not speak a great deal about herself and her style, the viewer is able to get all the information that is need through the images on her site. She has chosen to show her location and provide a phone number and email contact details.
NOTE: Dont use a HOTMAIL account, this looks unprofessional.
Below is another screenshot from a clothing brands website, they decided to use an extended quote as their information, this long quote being relevant to the brand.
Below is yet another example of about pages. This page has been written in second hand, as if someone is talking about the artist. I also used bestaboutpages.com inorder to gather a greater understanding of the content for my info page. http://bestaboutpages.com/
Saturday, 8 December 2012
Text Layout Idea
http://haydnrydings.co.uk/about
Whilst researching about what to include in my 'About Us'/ Info page, I came across a text layout and style that would work really well for my own website. This style was that there was a use of two slashes "//" instead of the conventional bullet points used when listing information.
This would work well for my website because I have the continuous use of the 'slash' throughout my design, in order to keep some sort of fluidity and flow.
Whilst researching about what to include in my 'About Us'/ Info page, I came across a text layout and style that would work really well for my own website. This style was that there was a use of two slashes "//" instead of the conventional bullet points used when listing information.
This would work well for my website because I have the continuous use of the 'slash' throughout my design, in order to keep some sort of fluidity and flow.
Tuesday, 4 December 2012
Research
The below screenshot shows my website in the very first stages of the design process! My idea has changed from how I initial thought it would look after help from tutors.
The below 10 screenshots show Andy Golpys website.
I like how American Apparel have used the same spacing between their photographs, it give for a nice finish.
The below screenshots are from Alex Flueras photography website, I chose to showcase this due to the horizontal scrolling design, this is where some of my inspiration came from. It was helpful to navigate around a horizontal scrolling website so that I was able to imagine how my own would feel and look when laid out similar.
The final screenshots are from a website that whilst researching, a certain element really caught my eye. I liked how they had chosen to use a large bold black slash inorder to separate their work genre/ ideas. I have decided to use this. My website is really somewhat of mixture of different websites put together to give something that I like and also something that suits my own style of photography.
Tuesday, 20 November 2012
Idea
The below idea is an initial one, I may choose to go down this route or not.
I want to create a page of my website which is somewhat different to the rest of the layout, this will be in the form of an interactive world map. I imagine a flat outline of the world map which has each area that I have visited in a different colour so that the viewer can distinguish between them. When the viewer selects a particular part of the map, they will be taken to the photographs that I took in that particular part fo the world. Below are some rough ideas that I have found whilst researching in the Web Design Index book by The Pepin Press.
http://www.oqueeufiznasferias.com.br/
I want to create a page of my website which is somewhat different to the rest of the layout, this will be in the form of an interactive world map. I imagine a flat outline of the world map which has each area that I have visited in a different colour so that the viewer can distinguish between them. When the viewer selects a particular part of the map, they will be taken to the photographs that I took in that particular part fo the world. Below are some rough ideas that I have found whilst researching in the Web Design Index book by The Pepin Press.
http://www.oqueeufiznasferias.com.br/
Wednesday, 14 November 2012
Not Well Designed Web Page
Below are links and photographs of websites that I think are not so well designed and designs that I dont like.
http://www.exactitudes.com/index.php?/series/all/139/5
The above link is from a website, there are several things that I dislike about the navigation and style of it. The first one of these dislikes is that there is no obvious way of seeing the next image in the horizontal scrolling screen. This website is similar to how my own will be designed because of the horizontal layout. Also, when hovering my mouse over the next image in the series, the cursor disappears/ goes out of vision. This issue is very annoying and really put me off the website, although I did love the work!
The website could do with some re-designing in order to create a more user friendly interaction, the navigation that I talked about above especially. Below are some screen shots of the website.
http://www.exactitudes.com/index.php?/series/all/139/5
The above link is from a website, there are several things that I dislike about the navigation and style of it. The first one of these dislikes is that there is no obvious way of seeing the next image in the horizontal scrolling screen. This website is similar to how my own will be designed because of the horizontal layout. Also, when hovering my mouse over the next image in the series, the cursor disappears/ goes out of vision. This issue is very annoying and really put me off the website, although I did love the work!
The website could do with some re-designing in order to create a more user friendly interaction, the navigation that I talked about above especially. Below are some screen shots of the website.
Well Designed Web Page
Below are links and photographs of websites that I think are well designed and designs that I like and have enjoyed interacting with.
- http://www.y-oh.co.uk/
The above link is very similar to that which my own website will look like...
- http://www.y-oh.co.uk/
The above link is very similar to that which my own website will look like...
Proposal/ Research
I intend to design a self-promotion website which showcases my different photographic styles and which outlines what I am able to do for clients. I will create a website which is easy to use and one that reflects my own personality whilst most importantly being different to any other in order to capture the viewers attention.
I will use the website to attract a wide audience of potential future ecommerce clients. The clients that I am aiming to appeal to include fashion/design magazines, travel magazines, advertising companies, independent brands and art exhibitors. My work is spread across many areas of the photograph industry and will appeal to many different audiences, which will have to be considered throughout the design process.
My online presence will assist and help me to promote myself as an up and coming photographer and will play a large part throughout my career by attracting and informing clients.
Aims & Objectives:
· To create a website that will showcase my work to future clients/ employees
· To create an easily updateable online portfolio
· To show my online presence in a unique website
· To successfully achieve an effective balance between corporate and art
I have a wide target audience for the website due to having vast photographic interests, styles and skills.
Rationale: I intend to design a unique website that immediately appeals to my previously stated wide target audience due to the fact that there are a huge amount of competitors on the web. I want my website to look considered so that the audience will feel a sense of professionalism. Aesthetically I want to create a minimal website because my primary target audience will be of a commercial background. Through research I have come to see that most commercial web pages seem to be slick and basic in terms of composition whilst still be very informative and functional. I intend to create a consistent style/ fold that allows the viewer to gather information from my web site without being distracted by changes which could cause the individual to use another website, other than my own. I want to have a part of the website grid that shows information about myself as well as contact information so that if the viewer wanted to contact me or find out about my work, the information is available on each page.
Web References:
This website is similar to that I intend to produce for myself due to the minimal basic look. I was initially drawn to the website due to the thumbnail that I saw on the website ‘site inspire’, the white background successfully made the index page image stand out.
The webpage is easy to navigate around and the minimal layout causes you to focus on the image, this is the second thing that I looked at after the name of the practitioner. The focus stays on the image for the most part of the interaction with the website, this is what I am interested in because it is one of the most important aspects of the website.
The navigation of the website is simple and it uses ‘next’ and ‘previous’ buttons when going to the next image in the series. A separate menu appears below the usual options when you click ‘work’ this works however I would prefer a menu to drop down from below the ‘work’ button.
![]() |
Overall the website is very clean and minimal, it is effective in putting across examples of the practitioners work and looks professional enough to attract a wide target audience.
Again I clicked on this website because it looked to have all of the characteristics that I was looking for, from the thumbnail. When I entered navigated to the index page of the website I realized that there was a massive thing which let the layout down, there was only a very small gap between the top of the information and the search bar on my web browser. I subconsciously started to scroll up the page that was when I realized that there was no more white space. It looked wrong to me because I wasn’t used to it and I felt myself looking the photograph and wondering if there was more of the photograph above. Overall, I dislike the layout of this and will take it into consideration with the design of my website.
![]() |

This website was really eye-catching for myself, this is because it uses a similar layout/ style as one of my most used websites, American Apparel Clothing Company. The below image shows a screenshot from the ‘designbyface’ website, whereas the above image shows a screenshot from one of my most used sites which incorporates a similar look to the below website.

American apparels website is similar to the ‘designbyface’ website because of the font used and the minimal look that is apparent.
The ‘designbyface’ website uses bold well thought about single words which the user has to click on in order to see what the work means, this gives a sense of mystery or causes one to question what the next page could show.
The above website is different to many that I have looked at whilst researching, it is primarily a photographers website which showcases each of his separate series of photographs. The thing that initial drew me to the website is that instead of having to choose from an index page where to go next, the design takes you straight to a page with different thumbnails for the user to click which will show each series of photographs. This design is straight to the point and I can imagine this layout appeals to the viewers.
![]() |
There is an interesting loading icon that appears when an image is loading or when you change page, this indicates to the user that something is loading and if the information arrives in time, the user will continue to be interested in the website.
As with other website that have interested me, the use of a white background is something that this design uses well. The contrast between the color in the photographs and the plain background make the image stand out and demand the viewer’s attention.
One thing that I dislike about the website or something that I would change about the design is the fact that the photographers name is not prominent enough, I believe it would be more appealing if the viewer could clearly see the practitioners name without scanning for it.
Overall the design is practical and slick which twinned with the easy orientation around the website makes a successful self-promotion photographers website that I would happily revisit.
Key Words:
Navigation, Ease, Different, Unique, Considered, Quality, Updateable, Fun, Informative, Consistent, Initial Impressions, Professional, Promotional, Clean, Aesthetically Pleasing, Focus, To The Point, Appropriate, Current, Theme, Reoccurring, Logical, Interesting, Positive, Contrasting, Minimal, Corporate, Art, Balance, Innovative, Eye Catching, Ecommerce.
BBC/ Neilsen Top 100 Websites
About This Data
The data used to generate the interactive treemap visualisation were collected by the Nielsen company and covers the UK, France, Germany, Italy, Spain, Switzerland, Brazil, US and Australia. The figures represent unique users for the month of January 2010.
The categories - such as retail, social networks, search/portal - were defined by the BBC. Because some websites have more than one use, they could fall within more than one category (e.g. Yahoo). However, the treemap only classifies them once.
The maps were produced using the Prefuse Flare software, developed by the University of California Berkeley.
New Brief- Initial Thoughts
So, yesterday I was given a new brief which in summary is to produce a website for my own self promotion. It will help me to show potential clients my work on a broad scale as I intend to show each style of my photography practice on the site.
During the briefing/ presentation I wrote down notes about everything that came into my mind, be it a design feature or something not to do, these are listen below from my notes.
During the briefing/ presentation I wrote down notes about everything that came into my mind, be it a design feature or something not to do, these are listen below from my notes.
- Keep the flow seamless
- Use of fading
- Site should be easy for the user to use
- Contact details up all of the time (at the bottom of the page)
- Keep no information below the "fold"
- Keep the layout simple/ minimalistic
- Gather inspiration from my favourite photographers/ practitioners web-pages
- Dont have an opening page, that you have to click to enter
- Have a brief 'ethos' about myself and my work at the bottom of each page
- Make sure that the user knows which pages they have clicked/ visited during the interaction with the web-page
- I DONT want sound!
- Use grids effectively
- Check the difference between serif and san-serif fonts
- Possibly a page with my CV on
- Maybe have a photograph of mine as the background for the whole site (would have to be fairly minimal/ plain?)
- Got to be able to add on other projects to the web-site for later in my career
- For my Travelling photographs I could have a world map where the user has to interact with with the page to view the set of images from that particular part of the world
- Need a good sub navigation system
- Make sure I produce a series of mock flow charts, these will help me to gather inspiration/ ideas
- Remember photographic websites can be some of the easiest websites to make
- Remember, nothing should be more than 2 clicks away
Subscribe to:
Posts (Atom)









































