Navigation Inspiration

 

I am quite clear in my mind as what sort of navigation will look like, it will go down the left hand side of the page, here are some examples of other websites I have found that have inspired me and show what I like:navigation bar design logo branding web design font typeface This navigation is from http://www.matthias-heiderich.de

He is a photographer and the navigation, although the list is long is just many different projects of his work, then at the very bottom of the list under a gap is ‘home’ and ‘contact’, which I feel is too far down out of the way. I also think the choice of colours, gray on gray is not clear enough to read, especially with such a small size font. Although there are a few things that don’t work well in my opinion I like the list of different projects that can be clicked on easily from any where you are on the website.

 

 

 

 

 

 

 

 

 

navigation bar design logo branding web design font typefaceThis is from http://www.timwalkerphotography.com

Again like before this navigation has used a grey colour for the text but this time it has been divided up with lines, also it is all in capitols which I think works well as its easy to read. Another thing is that when you have clicked on what you want to go to, the text goes black, here I have chosen ‘portraits’. In this example the choice of the photographers projects (recent work, portraits and archive images’ then below that is news, biography, contact etc. I like this a lot more than the gap between them shown above as the viewer looks down the navigation and its all there and easy to see and choose where they want to go on the website. The two fonts chosen here between the logo at the top and the navigation are similar, but not the same, this has some consistency in the website.

 

 

 

 

 

navigation bar design logo branding web design font typefaceThis is from http://www.johannalaskey.com

Although you can’t see it all, after the logo of her name there is her occupation separated with //. As for the navigation she has used a black and white like I plan to so not murky grey’s, but she has used different size fonts and bold to show the different areas of navigation broken up. You cannot click on the ‘work’ or ‘about’ headings they are just headings, I find it strange she does not have a ‘about’ page as there is no information about her at all, just the blog and contact details. I like the way the navigation has headings to separate the areas of the website and also that everything is in capitols, I find this easier to read and think I will do the same.

I am going to try some different looks for mine with and without headings and depending on what font I decide on will determine if I do it all in capitals or not. Now I just need to find a font that works well with my logo!

Advertisements

Typeface Moodboard

I have been researching different typeface’s and fonts online to find what kind of style I like, this is going to get me starting to think about my logo.

I have made a mood board of a selection of some of the most inspiring ones I have found, to view it click here.

What I find more interesting it graphic design that includes more than one font but that works well and compliments each other, for example this wedding invitation below has used 4 different fonts, but also each one has been used in a different size. When this is done well the text all works with each other and your eye reads because it flows. I think this invitation is beautiful as far as how they have incorporated the different fonts.

graphic design hand written web design logo font typefaceI have brought some of my favourite examples together here, below:typeface font design logo graphic web

typeface font design logo website graphic

So from looking at these two selections ‘party’ and ‘romantic’ fonts I have found lots that I like, but I am looking for one that will work well for my logo so I don’t want anything decorative or fancy or joined up like ‘burgess’ or ‘jelly’ as they are unreadable unless used for something that is meant to be hand written. I must prefer ‘swis 721’ and ‘frykas light’ as they are simple, not curvey or joined up and they are both easy to read because they are in capitals which is how I will be writing my name for my logo.

Making Image Galleries in Dreamweaver

There are a few different ways to make image galleries using Dreamweaver. The options are a gallery that scrolls either down (verticle) or across (horizontal), or a overlay & lightbox.

Horizontal

To make a horizontal image gallery I need to make a long image in Photoshop which I can place my images into and then this will be able to be scrolled through horizontally. So I have made a blank white document in Photoshop that is 400 pixels in height (a good size to work with) and to give myself plenty of space to work in I have made it 3000 pixels wide. I have chosen a body of my work which is of abandonded shallets to put in this gallery. So I open them all in Photoshop, but they all need to be made the roght size as they are currently 100MB each in size. So I go to Image>Image size> then go to width/height and put in 400 pixels. As these images are all square I know they don’t need cropping. So the two screen shots below show the ‘before’ and ‘after’ image resizing:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex

alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaver

Although the new smaller size looks tiny, I know it will be the size I want as I made it 400 pixels, I am now going to move it into my blank document. So I do CMD + A, CMD + C then go into my blank docuemnt and CMD + V (paste). Now I need to reposition the image. So I press CMD + T (free transform), now I can move the image and resize it if I need to. I do this process to all 3 images and display them how I want them to look in my final gallery, see below:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex

So now that my 3 images are in place I can see my white background is too big, so I go to Image>image size, this allows me to crop off all the white area I do not need. See the screen shot below:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex
So I use the Anchor to choose that I am taking the right hand side of the canvas off, so change the Width from 3000 pixels to 1300 pixels and press OK. Now I need to save this image for the web by going to File>save for web and going through the SEO procedures to make the image a jpeg the right size for the web. I put the jpeg in a folder that I will open into Dreamweaver.

So I now have my image ready for Dreamweaver, so go to Site>new site and choose this folder holding my image for the gallery. I need two pages to make a horizontal gallery, the first page is my actual ‘gallery’ page, this must have the usual header and footer. The second page I open is completly blank, I put my jpeg into the completly blank page. Then in the other page I place the cursor where I want the gallery to go, and I need to make a Iframe. The code is:

iFrame code:

So I place the cursor and go to ‘code’ and paste the iframe code into it.Going back to ‘design’ my page now looks like this:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaver

Now I need to alter the code to fit my image exactly. So in the iframe code I put the name of my page that holds the image where it says “src=”gallery.html” as src=”……..html” then I adjust the width and height accordingly, in the example below I have changed the width to 1400 and height to 400 as this is my image size.

alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaverSo now I am going to check that this all works in Safari, here is a screen show to show the gallery:alice volk av photo photographer web design image gallery gallerys abandoned challets camber sands holidays derelict vignette black white contemporary photography photographer east sussex dreamweaverYEY it works!

Vertical

To make a vertical image gallery is a lot easier and quicker than horizontal. To start off with make sure all the images have been correctly sized and saved for web, all saved into one folder. In Dreamweaver do site>new site and then in a new gallery page just drag and drop each image to where the cursor is. This allows space for some text as well. DONE.

Slimbox (pop up)

For this image gallery, it is viewed on the webpage as thumbnails, then if you click on one a ‘lightbox’ comes up on the screen blacking out the screen and leaving just the image to be viewed, this is nice as there no other distractions around the image bring viewed, also text can be added.

To start off, I make sure I have all my images saved as a large file and a thumb nail, sized accordingly. So in Dreamweaver I go through the process of opening a new site and localising the appropriate folder of images etc.

In a page I place the cursor where I want the thumb nails to be and then insert a table, choosing the number of cells I want, then the empty table appears and I drag each thumb nail into a cell. Then using the ‘link’ I link each thumbnail with its large image in the localised box.

Image Optimisation

Optimisation means that what ever it is you are optimising is looking and working in the best possible way. Image optimisation is using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.

So why is image optimisation needed?

There are two immediately prevalent reasons for image optimization: download time and bandwidth used. These may seem interrelated, but they are important for different reasons. Hardware storage space is a third reason that many only really apply in some cases.

Download time, though not as important as it was in the days of the 14.4k or 28.8k modem, is still a major factor in a sites success. A user made to wait is a user more likely to hit the back button on the website, or click on content that’s loads first instead of waiting for the entire page to load. Losing customers to a page that take 10 seconds to load is unacceptable. Though you may have a fast internet connection, others do not necessarily have these pleasantries, and there are certainly a significant number of dial up users on the internet and these users actually make up the majority in many developing countries.

Bandwidth is the hidden killer of the high traffic site. Plain and simple, bandwidth costs money, and not optimizing images wastes precious bandwidth that will end up costing you money, customers, or both. Most mainstream hosting plans have bandwidth caps that require extra payment for additional bandwidth if you go over your allotted bandwidth. The problem is that you may not be reachable when this happens and your site could be down until you pay additional funds or the bandwidth accrual period starts over again.

Now consider a large site that uses images primarily as its content. What if all the images on Flickr.com were not optimized. What if they were twice the file size compared to what they could be? For a site this large, not optimizing images has a serious impact on the infrastructure of the site. You need twice the data center storage capacity, electricity, data center engineers, part supply, and twice as much floor space to house your servers. Not optimizing images on a scale this large could mean thousands or millions of dollars of unnecessary costs. You better believe Flickr.com has thought about it, and probably has some very advanced image resizing scripts in place.

This definition was taken from this useful website.

So now I know the reason for image optimisation I am going to do this to one of my own images.

  1. 1) I start a new folder, titled with the name of my website, then inside that I start a folder called ‘images’. When titling files and folders it is important to not use capitols, spaces, numbers (at the beginning) or any other grammar. Only use lowercase and dash (-).
  2. I open my image in Photoshop, it is currently 60MB, so I am going to resize it so that it is exactly the right size for my website. which I have worked out as 376 x 376 pixels. So I go to Image> Image Size, and I change the image to 72dpi, then I can put the dimensions (in pixels) I want my image to become into the ‘height’ and ‘width’ boxes, like below. Now my image is not 60MB but 414K. image optimisation optimization website design optimizaton workshop
  3. Then view the image at 100% as this will show me the exact size the image will be viewed at.
  4. Then I go to the Image> Adjustments>Levels, so now I can alter the shadow and highlight depth and the luminosity of the colours which will enhance the colours to make a brighter image, if I feel that it needs it.

Now I am going to optimise the image. In short this means that I am getting it ready to out online by making the file size as small as possible but without loosing the detail or quality. So once I am happy with the image I go to File> Save for Web.

To view the image as a before and after view I choose the ‘two up’ choice see below:

image optimisation optimization website design optimizaton workshopSo the ‘save for web’ box has other options to choose from, see below:ation optimization website design optimizaton workshop

This is where I can start to alter the size of the image for optimisation. So from the top I choose JPEG and tick the box ‘optimised’. Starting with ‘very high’ in the box below I then choose the lower option one at a time until I see a difference. So for this image when it was on ‘high’ I could see a difference so I left it on ‘very high’. The quality is how many different colours the image contains, this is another way to decrease the images size. In the boxes below each image I shows the images size, before on the left and after on the right. So I can see that my current image size is 61K which is an ideal size for my webpage. Then I press save, and I must name the image with the alt text that is relevant to the particular image, so for the image I used the words: shalet-camber-sands-park-resorts-brighton-abandoned-deretict-holiday-alice-volk-photography. Remembering to separate the words with a dash (-). Having the alt text words here is a vital way to get ‘text’ into the page that cannot be seen to the viewer so that my website comes up in search engines.

Research – Inspiritational Websites

Now I am going to get the ball rolling by looking at websites that I like. I am going to focus on photographers who use their website for showcasing their portfolio as the main agenda for the website. For me this website is very important because it will be there first (and only at the moment) website people will go to to see my work. I think its really important to look professional, and different to a blog. A blog involves a lot of scrolling down and down and also is about updating, with my website it will not have text accompanying the images, or if it does it will be just the title, date, and possibly location. This means that the website will be 99% built around the images, I feel this is important because as a photographer your photographs speak a lot about you and also your interests as a creative person.

I am going to start with 3 pages for my website. No 1, the most important is the ‘home page’, No 2 will be the ‘gallery’ and No 3 could be a ‘profile’ or ‘contact’. When designing I will firstly design a template for the 3 pages. This template will include my branding, colour scheme and navigation. It is important that the theme for my website is designed so that there is some coherence in the website and this makes it easy to use and a pleasure to look at. I will also use the social media that I am using to help to promote myself, such as: Facebook, Pinterest, WordPress, Flickr, LinkedIn.

To be honest I don’t like most photography websites. Not many that I look at strike me at all as good or even mediocre. So whilst I am researching other photography websites for inspiration I am finding it hard to find anything that I actually like!

Here are some that i do like:

contemporary online portfolio photography photographers website design interface research good professional

http://www.timwalkerphotography.com  This is a particular favourite photographer of mine, also I love browsing through his work online because he has such a great website. This kind of simple layout is what I would call a online portfolio. There is nothing fancy, there is nothing that diverts your eye away from the photography, and there are no bright colours, I feel that this allows the photos to ‘speak’ and it is sophisticated. The hero image is the largest part of the website and there is no header which makes more room for the hero image this is great in my opinion because the photograph is the most important part of a photographers website and it is horrid when viewing someones work online when the images are only small. Another reason this is a favourite of mine is because of the scrolling area below the hero image, so that the viewer can highlight which thumbnail they want to view. This is my preferred way of viewing images on websites as I don’t like it when the image is ‘playing’ (not sure of correct name for this yet…) and plays through a selection of images, I like to browse the images one by one in my own time for as long as I want.

contemporary online portfolio photography photographers website design interface research good professional

http://www.jessicahilltout.com this is a website for a photographer called Jessica Hilltout, I find her photography work very inspirational and also her website as its not like one I have ever seen before. For the home page instead of using a hero image she has used the main space to show 3 images which all lead to different photography projects. I like the way she has used the effect of ‘tape’ to ‘pin’ up her images, its very informal way of designing a website and reminds me of how someone might stick photos onto their fridge or something its very simple and casual way to display photos. Apart from this the only thing I feel doesn’t work (for me) in the design is the navigation bar, it is along the bottom of the page and for ages when I was on the website I couldn’t even find it and thought it didn’t have one! I feel that it is obvious that anything at the top of a page is going to be seen first as we read a page  like we read a book of text, starting top left to right, and a website without any obvious navigation made me feel lost, I wanted to find out more about her as I had browed the three projects but couldn’t find the navigation bar for a few minutes. I feel that the navigation would work better for this website if it was in between her name/logo and the three projects so that it was easily found.

contemporary online portfolio photography photographers website design interface research good professional

http://www.matthias-heiderich.de This is a screen shot from German photographer Matthias Heiderich’s home page. I have gone to his website because his work is a favourite of mine so I thought I’d asses his website. He has used a simple approach with a non decorative font for logo (which is just his initials) & for the navigation bar. Personally I think that the lack of colour he has used is too faded and hard to read, a gray background and gray text. The navigation bar lists all his different project titles which then show a image from the title as the hero image. He has a lovely large hero image, although instead of having thumbnails to click on to change the image you scroll down and down and down, this layout for me  doesn’t work as well as Tim Walkers way of presenting the hero image and thumbnails below as scrolling down is tedious. I am not drawn to this website as much as the other two I have looked at so far, I feel it lacks any kind of character as there is nothing regarding a logo which could have been used for his branding. Searching for him on google I found his Tumblr account which works much better visually, it is less formally laid out than this website and suits his colourful abstract style a lot more with lots of his images on each page, see it here.

contemporary online portfolio photography photographers website design interface research good professional

http://www.johannalaskey.com This is the website for a interiors stylist, so to show her work she shows the photographs that she styles for, so the website is presented similar to a photographers. I am very interested in her work so decided to look at her website for inspiration. She has used the main page to use medium sized images with the title of the project below, each leads to a new page showing all the images for that project. The same projects are also listed in the top of the navigation bar, which means you can go through the different projects without needing to go back to the home page. It uses a simple way of showing her contact information along the top of the page, with her name and ‘//’ two forward slashes to separate this from her job title ‘lifestyle stylist’ and her email and phone number. I like this because it shows that she wants you to contact her and you don’t have to even click on the ‘contact’ page to get the information. To me it makes her very approachable. The only thing that I don’t like is that you have to scroll down slightly to see  the last 3 projects in the 3×3 block, I feel she could have put them closer together so that there is no need to scroll at all! Overall I like the website, it is simple which is a important part for me, nothing fancy at all so it is easy to navigate around all of her work systematically.

Conclusion

From looking at some different kinds of photographers websites I can see how they have all approached the appearance of their websites differently. For me the most important thing is that my website is a online portfolio so I can direct people to see my work online and feel confident about how my website looks and how my work is presented. It is clear in 2013 (now) it is vital for majority of businesses to have a website as this gives potential viewers (and there for buyers) a place to see what you do and how to contact you, this will (hopefully) generate business. I feel that for my own website I am going to build my website around me, as a photographer generally as although in the future I would like to have one that is dedicated to the genre of photography that I want to specialise in, at the moment in my second year in my degree I don’t have enough work in any one genre to build a website gallery from. So I am going to make my first website about me and all the work I do, this does have benefits as it will show that I can work across many genres. I feel that the two websites I have shown above that have got more than one image on the homepage is not what I want, I feel that having all the different boxes (Johanna Laskey) for each project is too confusing for the eye and that having the navigation down the left side which includes the same projects is sufficient. I will have one hero image on my home page, and this can be updated as often as I want for which ever image/project I have finished most recently or am most proud of. I will then have a simple navigation down the left side listing my personal work (with drop down of different project titles), portfolio, genres such as landscape, portrait, and a contact page. I will also include social media as I feel I am part of a few online communities that show my creativity such as Flickr, Pinterest, WordPress blogs, as these are important to link me online, but also show some diversity, for example the images I put onto Flickr are much more about me than me as a professional photographer. Also my Pinterest shows my interests in interior design, architecture and interests I have that do not evolve around photography.

SEO Workshop – Understanding Search Engine Optimisation

Understanding the Importance of SEO (Search Engine Optimisation)

A brief definition from Wikipedia:

Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine‘s “natural” or un-paid “organic” search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine’s users. SEO may target different kinds of search, including image searchlocal searchvideo searchacademic search, news search and industry-specific vertical searchengines.

As an Internet marketing strategy, SEO considers how search engines work, what people search for, the actual search terms or keywords typed into search engines and which search engines are preferred by their targeted audience. Optimizing a website may involve editing its content, HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines. Promoting a site to increase the number of backlinks, or inbound links, is another SEO tactic.”

Each website needs direction and links to other blogs and social media so that the more you use them the higher you’ll be in the search engine ranking.

Alt tags (alternative text) = adding invisible text to images so search engines find you.

To see the current state of a website go to: http://website.grader.com or http://www.ranks.nl

Onsite SEO

Onsite SEO is the invisible text that is added by the website maker as alt text to a website, this is also in images.

Onsite Optimisation Optimize your page content

One of the most important things in SEO is the page content. Here we will give you a few tips on how you can optimize your page content.

1. Optimise your page title

• Make sure your page title is 9 words and no more and describes what the page is about • For your homepage make sure it describes what the whole site is about

2. Optimize your text content

If you are going to succeed in the search engines your website has to contain unique text content. Do not duplicate any text content from other web pages! If you do that your website will not be indexed by the search engines.

Each page:

• Make sure the first 9 words contain your keywords and describe exactly what your site is about • Make sure to use keywords in the text. Also use multi keywords and synonyms. It is a good idea to put the keywords somewhere in the beginning of the specific sentences and paragraphs.

• Aim for about 5-7% keywords in your text (5-7 words per 100 or 2-3 per 50 words etc)

The text content should be least 250 words per page.

3. Optimize your headlines

You should always use headline tags for your headings in the page content. Use <h1> for level 1, <h2> for level 2 etc. Put your most important keywords in the headlines!

4. Emphasize keywords

Emphasize your keywords by using the strong or italic tags.

15. Optimize your images

Search engines cannot read images. You should therefore never put important text content in an image. You can optimize your images in two ways:

1. Name the image file using an important keyword. 2. Use an important keyword in the alt tag.

Optimize Meta and Title tags

When you are going to search engine optimize your webpage you should always optimize the Meta and Title tags for each individual page. Here you should always use the most important keywords from the page content on the specific page.

Optimize the Title tag

The Title tag is one of the most important parts in today’s SEO. Always put the most important keywords in the title tag. We recommend you to put your company name in the end of the tag and that you use a maximum of 10 words and 80 characters.

Optimize Meta Description

Meta Description is in most cases the description of a webpage shown in the search engine result. Here you should try to write a nice description of the specific page containing the most important keywords. Do not use more than 130 characters in the Meta Description.

Optimize Meta Keywords

In Meta Keywords you can put 20-25 keywords separated by a comma. You should use a maximum of 500 characters for the keywords. The Meta Keywords are not that important for the search engines anymore, but you should still use them. You can never know what will happen in the future.

Offsite SEO

Offsite Optimisation

Off-Site SEO refers to search engine optimization techniques that are not performed on your own website or page, and are therefore termed “off- site.”

These days, optimizing the content on your pages is not enough. For effective SEO you need help from other websites in the form of incoming links, commonly referred to as backlinks.

Backlinks

That’s basically what off-site SEO is all about – getting quality links relevant to your topic to assist the search engines in establishing what your web page focuses on. You can think of each backlink as a vote for your page. This is what Google’s PageRank measures, albeit in a complex way, taking many factors into consideration.

There are many ways to get backlinks; unfortunately, few of them are quick and easy. Here are some options:

• Creating content that makes people link to it • Doing link exchanges • Getting directory listings • Writing and syndicating articles

• Making forum postings • Posting comments to theme related blogs • Buying links (be wary of this)

One link from a high quality site is worth tens from a poor site. And linking to bad sites can negatively effect your own website’s rankings.

One-way links into your website from another are of greater value than reciprocal links from carrying out link exchanges.

Links to your pages should use the relevant keywords in the anchor text. Use several variations on this text if you plan to create a high number of backlinks to a page. You’ll get better results and it looks more natural to the search engines, keeping you below the radar.

It’s generally best to avoid organized link exchanges or link farms. In the vast majority of cases they will harm, not help you. This is because the search engines see it as manipulation of the SERPS (Search Engine Results Page) and punish linked websites when they discover the network.

So now that I have good understanding of the two types of SEO I am now going to design a wire frame with spaces to include all the onsite SEO information for a mock website for myself as a photographer. I am a interior and architecture photographer who works in and around Brighton and Sussex. So to research the best SEO words to use to suit MYSELF as a photographer in this area and genre I am going to use Google to search for the same “interior photographer brighton”, then looking at the first page of results and only the ‘organic’ results I can go onto each website and find out what words they have used to get themself to high up in Googles results page.

The different areas that I will need to include are:

  1. Page title incorporating keywords
  2. Main H1 and H2 text
  3. A series of 20 keywords for the site
  4. A 20 word description for the site
  5. Text for the first main paragraph
  6. Basic images with suggested alt tag text

To find out what a website has used as its onsite SEO words I right click on the homepage a website then click ‘view source’. This brings up a new window of text that looks like this:SEO search engine optimisation understanding workshop web design website google offsite onsite

 

So although this image is hard to read, the new text box that is here shows me all the words that are used for this website such as the description, title, keywords etc etc, all the information I am trying to find out. I then started a Word document so that I could compile all of this information from similar photographers websites to help me to look at what words they are using and I can then make my own list of strong words to use.SEO search engine optimisation understanding workshop web design website google offsite onsiteSo in the screen shot above you can see I have started making my word list for my title, description, keywords etc. Once I had got enough information from other photographers who came up HIGH in googles list of ‘interior photographer brighton’ search (not ads or pay per click) I had got enough words to start my own wire frame of my website. One area I could not find in any photographers websites was the ‘h1’ or ‘h2’, so I  went onto a non-photographers website and then right clicked on the heading, see screen shot below, this helped me to understand what words were used in this particular h1:SEO search engine optimisation understanding workshop web design website google offsite onsiteAlthough its hard to see but right clicking choose ‘show information’ has darkened the whole website except the header which is highlighted and a blue box above it showing me ‘h1’.

I have made a wire frame in Photoshop and started adding words into each area:SEO search engine optimisation understanding workshop web design website google offsite onsiteThis is quite hard to read so here is my final version which is easier to read:SEO search engine optimisation understanding workshop web design website google offsite onsite