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.
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.
@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!
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.
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).
Love it!
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 :)
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.
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.
23 Responses
Pro
Jonathan Ogden
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
Pro
Jack Bingham
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.
9 months ago
@Jack Bingham I think that will unbalance the design.
@Jonathan Ogden Looks great! Perhaps make the space between the images and text slightly larger?
9 months ago
Pro
Jack Bingham
@Liam McCabe Yeah, maybe you're right. I just find my eyes flicking from left to right.
9 months ago
Pro
Jonathan Ogden
@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!
9 months ago
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.
9 months ago
Pro
Jonathan Ogden
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.
9 months ago
Pro
Sam Stratton
awesome job. I love it!
9 months ago
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).
9 months ago
Pro
Jonathan Ogden
@Ali Lane great idea! Thanks!
9 months ago
Pro
Oykun
Love it!
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.
9 months ago
Pro
Logan Dugard
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.
9 months ago
Pro
Julia Khusainova
@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? ;)
9 months ago
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.
9 months ago
Pro
Jonathan Ogden
@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.
Thanks all!
9 months ago
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!
9 months ago
Pro
James Fletcher
Very nice! Digging it.
9 months ago
Pro
Dann Petty
nice, love the subtle textures dude.
9 months ago
Looks amazing! What font did you use for "Come visit us"?
9 months ago
Pro
Jonathan Ogden
@Alexandra Zaremba - it's all FF Tisa, except 'Visit' which is Neutraface.
9 months ago
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.
9 months ago
Love it! Very clean and modern.
9 months ago
Pro
Jimmy Burbure
It's clean and i love it, well done ;)
9 months ago