Submitted for your approval – Birkhead Editorial
It is springtime, so I have been busy busy busy, but it isn’t all yard work.
Below you will find screen shots of a project I am working on for Birkhead Editorial. The client and I are very pleased with the results of our hard work, but we would like to ask for feedback from the infinite peanut gallery that is the internet.
Some background:
Birkhead Editorial is a Hi Definition editorial service helmed by Andrew Birkhead. Andrew is a seasoned story teller who’s mantra is to “Add Value” and his mission to “Make people, places, and projects better with my storytelling, compassion and passion.”
Please sound off in the comments. Does this site extend Birkhead Editorial’s brand? Does it portray Andrew’s mantra or mission? Does it entice you to explore? Can you find what you are looking for?
Some technical information:
This site will be built with WordPress, and we will be using Vimeo to host all of the video work with a plus account so each piece can be viewed in Hi Definition.
I am looking forward to feedback. I will be starting the the build next week and will update with links when the site is live. Thanks for checking it out!
Excellent clean looking site. I really like the way the page is in two parts, with the circular shape on the right. I imagine that the left column shrinks to fit.
Very nice layout. I love the home page, very simple and clean. I would take another look at the navigation, I’m not sure it’s clear enough.
“perhaps not literally” – spell check before presenting it to your client.
The design is very clean and pleasing. Will the blue ellipse stay in place as the reader scrolls down?
@9swords: I have been imaging the site in a fixed width.
@Angie: in regards to the navigation, are you referring to the look of the nav, or the way we have named the areas, or both?
Great to see feedback already!
@Dawn – thanks for the typo – I added that copy after the client review for this review actually. I will fix that. That is what I get for adding that in at the last minute.
The blue oval is unique (being right-aligned) – probably because its difficult to pull-off with the CSS…
Will the right/left elements float to fill the browser or will the site be center aligned with a set width? If its a set width, will the background extending to the right be blue?
@Daniel – I am envisioning it as a fixed width with the content centered and the blue extending. I will be extending the curve as far as I can. The more I am thinking about it though, right aligning the site may be the way to go.
@Dawn – typo fixed – thanks again!
Hi Brian,
Looks good overall. It’s always satisfying when both you and the client are happy with the results. My only minor criticism would be the spacing of the perimeter elements on each of the subpages. On the home page there is a wonderful horizontal line and grid-like symmetry. Within the subpages where you have the logo, navigation, submenu/content, and blog it seems to lose good visual lines, as items are pushed to the corners. I would just suggest if you’re going to push elements to their perimeters, you may consider tightening the alignment for maximizing focal intent.
At least, that’s my quick take. You know the drill, take or leave it.
As for the oval and CSS, the issue you may have is the gradient. That is if you try doing a fixed with with blue oval extending.
Again, good design, and break a leg tomorrow night. We’ll miss you down here in Bloomington.
Brian, I’m with you on the fixed width. Looking at the two screenshots on the rights, I wouldn’t make the copy much wider than that. The blue might be difficult to extend (what with the radial gradient in the oval) without making the oval image even larger or the gradient itself smaller.
Of course, you might want to verify that a reasonably wide viewport doesn’t make the right side of the page exceptionally heavy if the copy stays the same width.
Another idea for the oval (and for all I know this is how you’ve implemented this already), instead of a blue oval image, you could create an image of the whitespace as a cutout and lay it in place, then use a light-blue to blue gradiated png (and maybe -webkit-gradient for webkit?) on a blue background behind the cutout. That will make resizing the oval very fluid. Not sure if I explained it well. Hit me up on twitter if that doesn’t make sense.
clean, classy and cobalt… just like “the crow.”
@Ryan – Great feedback as always – thanks!
@Pete – Thanks – I may have to hit you up on twitter on that
@Mike Thanks for the feedback!
I didn’t read the other comments, but I would…
* Add some padding between the blog post titles and their stamps.
* Add an active state to the main menu items… Maybe a square background or something simple?
Another idea I had, since you’re using a circle in the background is rather than the gradient, maybe somehow incorporate a watermark version of the logo back there since it is also a circle. Just an idea, might look crappy once implemented.
If you want that circle to scale with the browser, do this…
Align it to the top right w/o scrolling or repeating. Whatever the height of the browser window is, is how much of the circle will show. You knew that though.
@damon I like the active state idea… I will play with that – good feedback on padding.
@Damon I don’t know about the watermarked logo – I went down a similar path earlier, and ended up with the circle.
Apologies, by the way about one of the links not working.