I'd almost finished designing the new website for my church (see previous shot in this project) but last night I suddenly got an idea that I thought would work loads better, so I started sketching things out and stayed up pretty late last night mocking this up. I'm much happier with this one now. This is the visit page, not the home page, but the home page is fairly similar.
All the images will be replaced with shots that I'm going to take at church soon, but these are just nice placeholders for now!
I'd appreciate your feedback on this, particularly the navigation area as I'm not sure about that yet. The footer is a work in progress, I just copied that from the site I was already working on and might change it.
Full size attached!
9 months ago
I'm in love. I think the page might flow better if the map is in the same column as the camera image on the right. Might make it easier to read the text downwards.
@Jack Bingham I think that will unbalance the design.
@Jonathan Ogden Looks great! Perhaps make the space between the images and text slightly larger?
@Liam McCabe Yeah, maybe you're right. I just find my eyes flicking from left to right.
@Liam McCabe @Jack Bingham - thanks guys! I was going for a zig-zag style layout, I think it's ok that it breaks up the reading because they're each different sections. I think as this page is a kind of brochure-style page it's probably ok that it's broken up. For longer text-based ones like the About page I'll probably keep it all left aligned to make it flow better as you say!
Looks great! Only comment I would have is that although I really like the texture, it jars a bit with the clean lines everywhere else.
Thanks @Ali - I agree. I had it all with clean lines originally but I wanted to bring in the paint-style somehow because that's the style of the logo, I wanted to keep it on brand, and kinda works with what I've got with the holding page.
awesome job. I love it!
Cool. Maybe bring that feel more into the main content so that it feels a bit more cohesive? Like the wee arrow you have. Without pushing it too far. The question mark for example could possibly benefit from that kind of treatment, and the search bar in the footer (I know this is a WIP).
@Ali Lane great idea! Thanks!
The only thing irking me is small spacing in footer and super sharp search input border. I would give more margin to footer and get rid of border from input and give more contrast bg.
One word. Gorgeous. The navigation is very well done. Look forward to the actual site. I agree with @Liam McCabe about the spacing. I really like the subtle texture transition from image to white space. It's not too overbearing, but shows nice detail. All around well done. Can't wait to see the finish product.
@Jonathan I think this is one of the most beautiful church websites I have ever seen. Great work! I really like the clean approach.
In regards to the navigation I would suggest to increase the font size - currently it's a bit hard to read and I'm even not a mature lady that is going to visit the church site :)
P.S. Sketching always helps, right? ;)
Things I'd try :
• Increase font-size in navigation
• Give footer content some more space
• Color in titles ("Come and visit us!" and "Where we are") and maybe, slightly increase font-size
• Use arrow's handmade style more (like for the big "?" of "any questions")
• Remove the whole "Come and visit us!" section and move its text on top of the big picture (the road) leaving the "Where we are" section being the only main white-background content, embed a google map, maybe full width. The Olympus camera goes, so does "visit" (you can use "Come and visit us!" instead).
Big emphasize on time and location : that's what we're looking for when viewing a "visit us" page.
Anyway, I think it's much better than first version.
@Oykun @Logan @Julia @Adrien - thanks everyone for the great feedback! Super helpful :) I'll definitely space out the footer a bit more and scrap the border on the search. I've bumped up the navigation font size, looks better thanks! And I'll be incorporating the painted style more, both in the arrow and icons like the question mark (there's a couple of other icons like that on the homepage).
With regards to layout, I'll be keeping it as is for now. Each page has one of these mega headers, which are a bit over the top but I like them. Though in smaller sizes like iPad and below, I might shuffle a paragraph up into the image and use full width maps as you suggest Adrien.
Nice work Jonathan. Keeping an eye on this because I am in the very slow progress of redesigning my Church website and it is flipping difficult!
Very nice! Digging it.
nice, love the subtle textures dude.
Looks amazing! What font did you use for "Come visit us"?
@Alexandra Zaremba - it's all FF Tisa, except 'Visit' which is Neutraface.
Sexy! Love the layout man. This may have been mentioned previously, but I think it's just some padding changes in the header and footer. I think the main nav looks a little squished on the right with the padding on top and bottom, and much less on the right of it. Also in the footer I think just some more padding overall and maybe a little more separation/definition between the section headers and their content. Maybe all they need is some subtle rules below the titles?
Again, great work man.
Love it! Very clean and modern.
It's clean and i love it, well done ;)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter