ZoomConcept Reviews
Minor Problem on http://www.advocatedesign.co.uk 1 something needs to be done about the navigation. It feels crowded with the logo. Might be as simple as moving it over a bit. I would suggest moving it to the right side of the window, adding a "home" link and putting it as white text on a teal bar. 2 The captions would do better at the bottom of the images. Maybe do a semi-transparent black back to them as well. Using a sans-serif font here would look better as well. -
Mark Epton commented:Interesting idea. The semi-transparent black at the bottom of the image, with the title over it, is a very popular and "on-trend" at the moment. I'll have a think about this.
New Idea on http://www.advocatedesign.co.uk 1 Make this smaller, use a sans-serif font and the color of the logo. 2 Repeat your navigation in the footer somewhere. I suggest the right side if you move the navigation there as well. -
Mark Epton commented:
Another good comment. Because some of the pages are very long, having the navigation in the footer would aid usability. Again, I'll have a play and see what it looks like.
Summary:
You certainly achieve a minimalistic design, but it's too minimal. You are missing two things.
1) Typography: Aside from the logo, it's all black Times New Roman (or something similar). From the navigation to the headlines to the image labels to the footer. There's little to draw attention in any direction and makes the site feel stale.
2) Call-to-action: You say that you want people to contact you more, but you don't really push it at all on the site. It seems as a showcase more than a business-earning site. It might be as simple as making the navigation (with contact link) stand out more. Would be worth considering adding some sort of CTA button (i.e. "Let us champion for you") as well.
See my thoughts/ideas in the notes
-
Mark Epton commented:
Hi Patrick
Thank you for your advice. My response is:
1) The site does use the same font (Georgia - voted the best web font by .Net magazine) throughout. And the headings on each page are much bigger than the body text. This contrast helps them to stand out. My initial reaction is that I feel comfortable with the typography.
2) Yes you're right. I guess I don't want to do any hard sale, in-your-face 'phone me now' thing. My hunch is that this would back-fire with the types of people who might hire me. I'll give what you say some consideration. Thanks
-
Patrick Niebrzydowski commented:As far as avoiding the in-your-face hard sell, perhaps putting a more prominent CTA on the contact page would help in both matters. It requires them to look for it so they don't feel as threatened, but also pushes them a bit more. Contact info is good, but there's no reason the page can't be a bit more pushy.
For typography, see Emma's comments for a bit more detail. It's really the hierarchy of things more than anything. You basically have two sizes: headline and body. The text needs to be broken up better to become more web readable. The headers on the about page are a good example. They are the same size, and have very little color difference. A font-size, weight, variant, style, etc change would be logical to separate the content better.
Looking at the about page, I think it could use a bit more liveliness. Improved hierarchy of the typography would help but I don't think an image or two would hurt either.
-
Mark Epton commented:
Hi Patrick
I think you are right. I intend to do the following:
The first line of my headings (About, Contact and the clients name) will be in grey, to differentiate it from the second line of heading (project title).
The about page is arguably too minimal, with the sub heads just black body text. I can make these sub heads bigger to help differentiate them from the body text.
Thank you for your time, insight and pleasant tone of voice.
-
Minor Problem on http://www.advocatedesign.co.uk 1 Navigation could do with a Home/Portfolio addition. It's daft to reduce a site to its minimum when it impairs usability. -
Mark Epton commented:
Yes I understand what you're saying. I'm just a bit loath to put 'home' in the navigation when the logo acts as the link to the home page. But if you think that enough people don't know this, then I'll have to consider it.
-
Emma Simpson commented:I totally understand where you're coming from. It's always nice to get things down to only the absolutely necessary. Unfortunately for most people I think it's better to have a word link to get back to the start - even I found myself pausing for a moment to think about how to get back to the start page. It's nice to make a design so usable and intuitive that there is no pause in use so all the focus is on the content. You don't have to put the word 'home' the word 'portfolio' could work as well and is more semantic - it's just that your home page is the portfolio. You could always highlight the word Portfolio when you're in Portfolio to make it even more clear where exactly you are in the site at any one time.
2 padding from top larger than padding from left. Within these square shapes, this feels disproportional and unbalanced -
Mark Epton commented:
Should be better now.
3 I would look at putting these in a small bold serif so there is some contrast in your typography and also it will read better on the image helping the image to gain impact whilst not losing the legibility of the font. -
Mark Epton commented:
Thanks. I've done this. I think it looks better.
New Idea on http://www.advocatedesign.co.uk 1 Hierarchies not clearly defined. It impairs the way this head reads. The ethical design agency should be treated differently to the line beneath it. It doesn't read well otherwise On your inner pages, this is even more of a problem as you have the heading About or Contact and then directly beneath as if it is running copy the next line. One the word alone when it looks like running copy looks like an orphan so it creates an ugly stepped shape in the text. Much better to separate out your heads in a nice minimal clean way so your heads read better and consequently the subheads below. -
Mark Epton commented:
Yes I think you right. I did distinguish between the two lines of the heading (using grey then black) but somehow this got lost in one of the iterations. I'll give it a go now and see what it looks like. Thank you.
-
Emma Simpson commented:
A colour change could work to distinguish although logically the one lower down the hierarchy should be paler but this would create a top heavy balance so you may need to introduce a colour into the design to make this one work - too subtle a colour change and it will still read as running copy. I think some subtle change of size and positioning will do the trick and keep it minimal
Summary:
Overall there is a lot which is nice and clean about this site. I love minimalism and your design for Oxford University uses elements from The Guardian for who I was an art editor. The design elements are lovely but so tied in with The Guardian in terms of brand, it means the other projects don't feel to have their own distinct identity.
For your site though the typography could do with some tweaking - there are not clear hierarchies set up through the type and on your inner content pages, it results in ugly typography. Please see my notes for further notes on this. Hope it helps.
-
Mark Epton commented:
Hi Emma
Many thanks for taking the time to give me your thoughts.
The Guardian's identity hangs on the Guardian Egyptian font and the dark blue masthead and complimentary light blue. Oxford University, not unsurprisingly, uses Oxford Blue and a complimentary light blue. The colours are similar, but the font is different, the logo is totally different and the project uses an image of dandelion seeds (to express migration). I would argue strongly that it is nothing like The Guardian's visual identity.
I'll take a look at your further notes tomorrow.
Once again thanks for your help.
-
Emma Simpson commented:
I wasn't talking about print. We're talking web design here. Your web project for the Oxford University Press borrows heavily from The Guardian web design as do many sites but because of the blue links too (not the same blue but this is the web and monitors vary so widely) for me it's not something I would have done but each to their own.
It's not really important just something I picked up on as I was looking through your work.
The Guardian website creates identity even without Guardian Egyptian although it will be nice when @font-face can be incorporated into newspaper sites since their identities are so strongly carried through their own custom designed fonts.
-
Emma Simpson commented:
Also your lack of social media links suggests someone who isn't passionate about web design and someone who isn't clued up on SEO which is obviously important for every company. Social media connectivity within a site are a vitally important piece of the SEO puzzle. Even if you don't want to join in yourself, it would be good to let others share or tweet about stories within a site if they want to. Those links into a site drive a site up Google. Your comments on another page about Google only reading the first 100 words???? Bonkers stuff. Sites these days are so dynamic - no more static info for people to read - it's all about sharing of information and pointing people to that information. Most people do this through twitter, facebook, digg or another social media platform and it's good to provide quick links to save them time to do this.
-
Mark Epton commented:
Hi Emma
That is quite an accusation to throw.
I don't think The Guardian or any site can claim a monopoly on a two column layout, with space for a heading and blue links.
In fact, having just visited the Guardian site, it is wider, has three columns and uses a multitude of colours.
If I could attach a file of the two sites home pages, next to each other (not different page and not misleadingly cropped) it is plain for anyone to see they are substantially different.
-
Mark Epton commented:
Hi Emma
You are right. I'm not up to speed with social media and to be honest not that interested in it. But guess I need to get into it at some point.
I have read, but can't find the link to it, that Google gives greater weight to words towards the top of the page compared to words at the bottom of the page. This makes sense - if it is important it will be towards the top of the page.
If this is true, this may effect SEO of one page sites, with important content towards the bottom of long pages.
Perhaps you'd like to Google around and see what you can uncover about this.
-
Emma Simpson commented:
Agreed on not being able to claim monopoly on two column layout - I had already attached an image below so you can see the two designs side by side so you can see what I meant - it's strikingly similar. I'm just very familiar with the site so it stuck out to me straight away - other people are probably not though.
-
Emma Simpson commented:
Google does give greater weight to words towards the top of a page and to h1s etc - it's why it's important to do semantic mark up on pages. But these single page sites have very little content within them. The home page of the BBC or any newspaper site has more content than a seven page 'portfolio' type site so it makes no difference putting that content into one page in terms of SEO.
Also Google's robots have no idea the physical spaces between elements since these are kicking in on CSS etc - it reads markup.
So for example the BBC home page has 2269 lines of code. The single site of Michael's has 251 lines of code. That's a pretty small page even though it's physical size in terms of scrolling is large. A robot is not aware of the scrolling, it just reads code.
Social media is an essential part of the puzzle for a web designer if you want to do the best possible job for the client and help them use the internet to the best of their advantage for their business needs.
-
Mark Epton commented:
Hi Emma
I guess my question is: if a site consists of 1,000 words, does it make any difference, in terms of SEO, if all 1,000 words go on one page, or are split over 5 pages?
I've just done a very quick search and found this, which I think suggests that Google will only search the first 100 lines of code (give of take)?
"In the HTML code for the page, the text should be as close to the beginning of the page as possible, because there is a limit to how far down into a page a search engine spider will go to try to find text. It is generally agreed that this is 3kb. That's only about 80-100 lines of code! So make sure your text comes before some really long JavaScript menu in the code for the page, or else the search engine won't make it far enough into the page to index the text. They'll never see the text if it is buried way down at the end of the code."
Have I misunderstood this? Once Google has found the text, will it then go on to index all the text?
-
Mark Epton commented:
Hello Emma
I've put the Oxford Uni home page next to the Guardian home page. I've also put the BBC and Guardian websites next to each other. See: http://www.advocatedesign.co.uk/untitled1.html
-
Mark Epton commented:
Hi Emma
just wanted to say thanks for your feedback and time. I've finalised my site now (I can't bear to think about it for a while!) so I've removed the above screen grabs. Nothing that important.
Cheers Mark
-
Emma Simpson commented:
No worries - the design of the Oxford Uni site wasn't what you asked for feedback on. I just happened to notice as going through your site the similarities and I put the images below so you could see what I meant.
It's just my feedback - you can disregard what you don't agree with and take on board the things you find helpful. I won't take offence either way.
I give some feedback to try to help as I find it so helpful having so many extra design eyes on my own work. It pretty much always throws up something I hadn't thought of or noticed. And even non design eyes are good to have on a site and impartial feedback as every person is a user of the internet and however annoying and stupid some comments can seem, they actually sometimes have a point because it gives you user feedback from someone who has never seen the site or been involved in its development.
I tend to balance the comments against our own user testing which is carried out and client feedback and sometimes it throws things up which I chew over or discuss more with colleagues to arrive at our final conclusion. For me it's an invaluable part of polishing a design.
-
Emma Simpson commented:
I'm v confused about where you get your info on 3kb and 100 words etc.
In 2007 the reported Google cache size was 977kb. The two thousand odd lines of code of something like the BBC home page is only going to be about 135kb.
In terms of SEO, it makes little difference having a portfolio site over five pages or one - the relatively little content makes it fairly irrelevant. A large site is one with thousands of pages in - anything under 100 pages is a small site. More important than page length is the PageRank assigned by the volume of links into a site so who else on the web is linking into the content of your site. These links should be thematic links in from other sites related to the content of your site rather than random links.
In terms of javascript, most people don't put css or js directly in page but they're separate files in href links on the page - there is a case of putting js at the bottom of a page if you are putting some in page because yes stuff at the top of a page is ranked higher than stuff at the bottom but it's not that the bot won't get to the bottom of the page.
The bot is a bot and crawls everything and caches the data it finds on each page. It's also why sitemaps are so important.
There are things it won't see such as data called in dynamically by Ajax - you need to provide such data in a google friendly format too and also flash of course.
I'd be careful of where you're getting your information from and just apply logic to what you find - it soon sorts out the correct information to the disinformation out there.
-
Mark Epton commented:
I did a quick search and found the info on this site: http://www.wordsinarow.com/seo.html
Attached Files:
-
Minor Problem on http://www.advocatedesign.co.uk 1 Although each block represents a certain product / service offering. I still do not know what to do or where you want to lead me with this website. -
Mark Epton commented:
If you've been to my site, you'll see that each 'block' is a case study of work done for a particular client. This is probably the most important thing potential clients are looking for from my site.
Each link does not represent a certain product / service.
-
Dawid Roux commented:Ah I understand.
2 The top navigation does not have any impact neither compliemnts with the rest of the website. I like the simplicity and clean look, but you still need t do something that breaks that top white space. -
Mark Epton commented:
I'm comfortable with how this is.
-
Dawid Roux commented:
On the other hand it is nice to keep the navigation clean and simple. I notice that there is no 'Home' button - unless the 'Advocate' serves as a home button?!
New Idea on http://www.advocatedesign.co.uk 1 May I suggest that when a web user hovers over each block more detail appears or even a 'Find out more' or 'contact us for more' button. -
Mark Epton commented:
Yup, I agree. Perhaps the 'block' changes to an arrow saying something like click hear to view project". I guess I've been a bit lazy in not doing this.
Thanks once again, for you help
-
Dawid Roux commented:
That is good idea :-)
Summary:
The block for each product / service looks intriguing, but your potential client will lose interest the moment he/she does not know what to do next. You need to lead your potential client/s to take the next action step (contact, fill out the form, what do you suggest poll, etc.) anything that will make them participate or want what you have to offer.
-
Mark Epton commented:
Hi Dawid
Thanks for taking the time to give me feedback.
The first thing potential clients will want to see is examples of my work. This is why I have put links to my case-studies on the home page in a very direct way.
-
Positive Feature on http://www.advocatedesign.co.uk 1 I love it how these different images are creating a versatile effect in here. 2 I think if you arrange the logo and menu on the right side may improve you visual balance. -
Mark Epton commented:
Do you mean place the navigation under the logo (both left aligned)?
-
Rajesh Sharma commented:I think you should just change the left css property of logo and navigation to 65% and 85% respectively, the reason I said so is in my opinion the big text block and logo are making the page look unbalanced due to left alignment.
New Idea on http://www.advocatedesign.co.uk 1 These text have big difference in terms of color and font, may be if you will match the texts font(typeface) to the logos, this may improve your branding. Summary:
Beautiful Professional Design.
-
Mark Epton commented:
Thank you for your comments. I'll consider them carefully.
-
I'll give this some thought. Might just move it away from the logo by 20px. Probably do the trick