Digital Web Magazine

The web professional's online magazine of choice.

Stonebriar Community Church Redesign : Comments

By Chris Merritt

July 23, 2007

Comments

Jester

July 23, 2007 11:29 PM

Nice work, but I noticed it has a few simple validation errors in both the html and css.

David Horn

July 24, 2007 1:16 AM

That’s a really nice looking site – and a great write up. Thank you! Loving that main navigation!

Tom Maton

July 24, 2007 2:19 AM

The site is looking fantastic. Thanks for the great write up, its good see the point of view from fellow designers & developers when they start out on new projects. Keep up the good work!

Fabrice

July 24, 2007 2:42 AM

Very nice design.
the email to a friend function throw an error about malform or missing URL, also i feel it very hard to read the CAPTCHA (it’s the aim, but now it’s very hard ;-)

Chip Cullen

July 24, 2007 4:09 AM

The design looks fantastic, and thank you for the informative write up on your process!

The one thing that was slightly disturbing, though, was that you essentially did the comps on spec. Am I understanding the situation correctly? I’m sure it was a great opportunity to work with a dream client. I just wonder if doing the original comps essentially for free was a good thing. Were there any other designers trying out for the job? If so, did they at least get some compensation for any comps submitted?

Either way, the end product is outstanding.

Chris Merritt

July 24, 2007 5:49 AM

Chip, I’m sorry if I wasn’t clear but Stonebriar did pay me very handsomely to design my initial 3 comps. They also hired another designer to design 3 comps as well.

Lee Naidu

July 24, 2007 6:10 AM

I love your design – it’s artistic and clean!

As a designer myself, I would say it is very important to collaborate with an excellent programmer. I’m still searching for this person. Lucky you!

Again, congratulation on your brilliant work, and thanks for sharing your story!

Phil from Loreauville

July 24, 2007 6:46 AM

Would hardly consider myself a “web professional”, but I thought I’d leave a comment or two.
First and foremost, congratulations on getting the job and putting out such an awesome looking site. Not only does it look good, but, in my opinion, the site effectively displays what is going on at this church. Hey, I want to go to Frisco Texas and check out the church now! Far too many church sites are severely lacking in this respect. All they have is a picture of the building, a bible verse and some pics from last year’s vacation bible school. You did a good job.
Secondly, thank you for the detailed process you shared with us on how you actually did the design. As a designer-wanabee, I can effeminately draw a lot some inspiration from your experience.
And lastly, please keep up the good work. I personally find it very encouraging and refreshing to see talented web designers putting out decent content on the web.

Travis Isaacs

July 24, 2007 6:52 AM

Thanks for sharing Chris. Being a design geek, I love reading about the process that other designers use. The journey can be as exciting as the destination!

It also reminds me of the first job I ever had when I first moved to TX. I was working for a small (now defunct) web design sweat shop in Euless. Anyway, for every project, I had to do 3 distinct comps no matter what.

I don’t know about you, I but when I nail a design, I put all my effort and mojo into. I think their can be variations, but to have two other distinct interpretations is hard.

Andy Matthews

July 24, 2007 7:10 AM

Hey there…

I’d just like to compliment you on a beautiful site, and a well written article on your thoughts and processes during the whole project.

I’d like to make a few constructive comments though. I realize that you’re a Mac user, and that’s fine, but I find it a little cloying to hear Mac users go on and on about the superiority of their platform: my monitor is better, the Mac interface is more intuitive, etc.. That might be true for you, but I feel you could have left it out of your article and still gotten the point across by saying “color differences”, and leaving out the subtle digs “common” monitors.

I also think it’s a little surprising that you don’t have easy access to a PC for use in testing. Whether Macs are better is up to debate, but please remember that they’re in the GROSS minority. There will always be more people surfing your client sites on a PC, many times by an order of magnitude. On a professional level you’re doing yourself, your client, and the end user a disservice by relying on other PC users to preview your work.

This is coming from a PC user who recently broke down and purchased a Mac so that my sites looked and worked their best.

Anyway, I just wanted to make those comments and reiterate the fantastic job you did on this site. It’s probably one of the best looking church sites I’ve ever seen.

Chris Merritt

July 24, 2007 7:32 AM

Andy, thanks for the compliments.

It wasn’t my intention to make any “digs” at PCs, but to simply say that PC’s are, in fact, the most “common” machines on the market, so I had to consider that. I always consider PC rendering on my projects. Parallels is indespensible to me in this regard. The challenge was not the OS platform, but the actual monitors people used. If it was affordable, I would have 4-5 monitors to test coloring on, but that’s not something I can do unfortunately. I hope this clears things up.

Thanks again for your encouragement.

Ben Otero

July 24, 2007 7:35 AM

Chris, great write up. It’s fantastic to see great work done for great ministries and churches and hopefully the Stonebriar site can inspire more churches to put greater effort and thought into their site designs.

seth

July 24, 2007 8:23 AM

I think you did great work on this site. I went over and hopped around a bit. I noticed something strange. On the home page, when a new picture loads, the style on the nav changes (gets less bold, and fades a bit). I am on FF/Mac. Have you ever noticed this?

Tim

July 24, 2007 8:51 AM

sRGB IEC61966-2.1

If you don’t have this profile, I’m pretty sure you can get it from Adobe’s site somewhere. This also resolves some of the PNG export issues in Photoshop.

Tim

July 24, 2007 8:53 AM

Weird, the top of my last comment dissapeared. I was saying, just change your color profile on the mac to that color profile, and you will be seeing things the way your audience/users will be seeing it.

Dan

July 24, 2007 10:37 AM

I do agree that it is a nice design, although while you were comparing it to “common” monitors you left out one important aspect, size. I can tell by your screenshots that you are using a fairly large monitor to do your work on, although have you tried looking at it on a monitor running 800×600? It is absolutely horrible. the typical width of a good website is 760px to allow for a vertical scroll bar, however the Stonebriar website is around 960px. It just barely fits on my screen as mine is slightly larger than 800×600.

Also, I agree with Fabrice that the captcha is way to hard to read, I couldn’t send anything because of it.

Overall the design is wonderful, but it really shouldn’t be so wide.

Thanks.

Carolyn Wood

July 24, 2007 11:30 AM

Folks, please remember that this article is about the visual designer’s process before it’s handed over to the person who takes care of all coding and markup. Comments about captcha and validation are addressing areas that weren’t part of Chris’s role in this project.

Nathan Smith

July 24, 2007 2:48 PM

Regarding what Carolyn said – I was the one who coded the front-end: XHTML, CSS and JS. The code that I wrote was valid, but alas we had to make some compromises for how the CMS works. Same thing with the captcha – a bit beyond the control of either Chris or I.

As for the design’s dimensions, plenty of people use screens that are 1024×768 or wider. Given the stats and demographics of the church’s audience, it was decided early on to make use of a larger canvas, so Chris can’t be blamed for that either. :)

matthew Smith

July 24, 2007 4:06 PM

Chris,
Fantastic job here. I was particularly thankful for your pieceo on navigation. That bit can be a real stickler for a designer as you seek the right combination.

Your comment too about having someone to wrangle ideas together into a comprehensive and solid communication from client to designer/developer/ia architect/etc is a great one. I find that understanding what the client wants or thinks they want is really tricky. This can be especially difficult when they’ve hired you as a professional, but aren’t letting you act on being one. I can agree, I’d love to either be freed up to do this more myself, or hire someone better than I to do it…for now, I think I’ll hire someone to do my taxes first.

Thanks for the great writeup Chris, and thanks to DigitalWeb,
these resources are priceless.

Chip Cullen

July 24, 2007 5:55 PM

Chris – ah, I simply misunderstood what you wrote in the article. Well, they certainly seem like a dream client – they treated you well, and provided good feedback. I also agree that someone like Jason distilling the church’s response is invaluable. Again, outstanding work!

John Faulds

July 24, 2007 10:33 PM

Nice job on the site. Your working situation sounds almost exactly like mine except that I’ve got two dogs and a 3-month-old baby too. ;)

Damien

July 25, 2007 1:13 AM

NIce to know I’m not the only web designer in the world working a metre or so from my bed ; )

Michael Montgomery

July 25, 2007 2:47 PM

I remember thinking how great the visual design is/was, when Nathan was coding it during SXSW (and staying up late doing so). And that jQuery (drawer) thing is still cool.

Great job to all involved.

Mahalie

July 25, 2007 4:37 PM

First I can’t thank you enough for sharing your process. The drawer thing is awesome and I hadn’t heard of Typo3 before (currently looking at Plone).

Your comps are beautiful, I was a little disappointed with the quality of some of the images on the live site, however, the masthead especially. I assume the fragmentation is due to some target page-load size?

Robert

July 25, 2007 5:20 PM

I appreciated your comments. Very sober, clean and yet inspiring design. Thank you.

Stu Collett

July 26, 2007 4:31 AM

A fantastic article! Well done Chris, I think you have a done a stirling job, great inspirational visual and information design.

Did you have to wireframe all the secondary pages, or did you stick to just the homepage? It would be interesting to find out!

Kala

July 26, 2007 10:54 AM

A really good article and a neat design, congrats!
This is a real inspiration since I’ve started freelancing very recently.
I guess it would help to add “This site is best viewed in resolution 1024×768 and above” and alt text for all the images.
Extremely useful writeup, thanks to you and digital-web.

Ignite

July 26, 2007 2:06 PM

Great write up Chris… Thanks for sharing your experience! The site looks awesome. Chuck Swindoll is a fantastic teacher so it’s nice to see them get a quality website. Congrats to all involved!

If you don’t mind me asking where do you find your photoshop brushes? I’m curious. Thanks again

Stelian Firez

July 26, 2007 3:59 PM

Great design. I like it!
Only one question I have: how much time did they give you to finish the design?

Chris Merritt

July 27, 2007 8:30 AM

Stu – I wasn’t able to do much wireframing on this project, but we did build out the subpages from a few basic templates I mocked up.

Ignite – I haven’t looked for brushes in a long time, so thanks for reminding me to get back to it! I don’t go to any specific resources when I’m looking for brushes. Usually the best ones are found on the blogs of a few generous designers who are willing to give away the fruits of their labor.

Stelian – I’m not sure how long each comp took to design, but when it was all said and done, I did a little over 80 hours of design for Stonebriar.

Dave R.

July 28, 2007 4:55 AM

Interesting article and beautiful site.

With that said, the process is very flawed. You skip over user research, persona creation, and usability, among other things. The wireframe and information architecture changes with the visual design on each iteration. The entire process seems to be based around the whim of the client, not the user.

You wisely stated: “Design is about creating solutions to problems instead of just decorating around them.”

You know the right way, but this entire column talks about the decoration around a (untested) solution. I realize this may be what the client wanted, and I am sympathetic. I too have been guilty of decorating.

What is scary to me is that people read this column and think this is the exemplar way to design a site.

Carolyn Wood

July 28, 2007 9:28 AM

Dave,
Each article in this column focuses on different aspects of the visual designer’s process. Each designer may focus on some things and not mention other aspects. If they tried to cover everything, the articles would be endless, and then the complaint would be “your articles are too long.” :) Some authors may choose to talk only about color or inspiration or typography. We give them the freedom to emphasize whatever is of most interest to them. We will have articles from some designers that won’t discuss anything related to the subjects you listed. I also know from Nathan’s earlier comment that Chris was provided with information about their users before he started, and the article states that the project manager gave him “specs,” as he called them, for the home page. That said, he specifically stated in the article, “ I wish I could say I started each design with a detailed wireframe and a strict grid, but I can’t. In those days, I only wireframed if, on the rare occasion, my client provided me with that luxury. Now, wireframing is essential to my workflow.” Then he states it again in the next paragraph. If the author himself says that

amber simmons

July 28, 2007 11:12 AM

Chris,

The Stonebriar website is absolutely beautiful. It is so uplifting to see sites like this, that gently nudge the web forward. Navigating through the website was a lovely experience for me, as I imagine it must be for the church’s members and visitors.

I work at a university for a college, designing departmental websites. At this time, we don’t have the opportunity to design full sites with and for our clients—we only get to design “templates” and let the client fill them in on their own. I’ve been trying to convince my manager for months that this isn’t the way to go, and now I’m going to take him this website to show him the kind of work we could and should be doing—work that doesn’t end at the homepage/secondary page level.

Thank you for taking the time to walk us through this process. I enjoyed reading about it.

kara chanasyk

July 29, 2007 6:43 PM

Chris-

Very nice site and writeup. Personally, I see sites from the lense of a designer/information architect, so I am interested in the “information design” aspect of the design process; the interpretation and translation of the project specs and into graphical layout and prioritize the various user tasks and “call outs” on the homepage.

Sounds like you weren’t given wire frames, so perhaps a lot of those decisions were left up to you.

For me, this is the compelling part (and often overlapping role) of an information designer – is this the role of an information architect or graphic designer, or both?

I liked the information architecture for the homepage and for the landing pages for each section. On each landing page, thumbnails and a brief summary of each section are represented for each internal page.

I also think the 3 layer deep architecture is handled quite well, with the first 2 levels of nav on the horizontal bar and the tertiary nav on the left column. It is a nice way of making a seemingly large site quite manageable and easy to use.

I’d be interested to hear about your process in this regard, but this might be fitting for a follow up article!

thanks again!

Chris Merritt

July 30, 2007 8:10 AM

Kara – IA was mostly hashed out by Jason and Nathan before I came on the scene, though we made some significant adjustments once I started designing. The IA specs were presented to me in list form, rather than wireframe, thus giving me the freedom to make some decisions on placement and priority of the information. The entire IA process was somewhat fluid and many design-related IA decisions were often made after a free exchange of ideas between Jason and I.

The landing pages for each section of the site was something I urged us to do from the outset, but ironically the actual design of those landing pages was somewhat of an after-thought that was decided on after I had already completed the design phase. I think Nathan Smith was the one who came up with the grid for those pages.

Steve Stickel

July 30, 2007 11:45 AM

Great work! You help set the standard for a clean and rich web site all around. I’ll keep it book marked for reference and inspiration.

Thanks for posting the article as well, you definitely nail it on the head when it comes to free lancing and clients.

Jason Reynolds

July 30, 2007 4:08 PM

Thanks first to Chris for making me sound so good in this article! I did my best to provide real content and IA to design around, give him concise and timely feedback, and to shield him at points from what was happening within our organization.

Honestly though, this was an easy, fluid design project for a few reasons. 1) Chris is a great designer and listened to the customer. 2) We used Basecamp to collaborate with him, as well as separately within our staff. 3) We put a heap of work into determining our audience and providing Chris the epicenters so he didn’t have to guess. He then used his own experience with non-profits to focus this content into a very compelling design. The success was not a mistake, but a result of a great designer and the most complete, agile approach that our non-profit could afford. There were hiccups and obstacles like on any web project, but we pushed through them with frequent, candid communication and flexibility. Chris took the time to understand our organization, and that was also incredibly helpful in achieving the end result you see.

Dan – Our Google Analytics from the last quarter in 2006 showed we had under 10% still on 800 × 600 or smaller resolution. More than 40% of our visitors are on larger than 1024. Thus, the reason we gave direction to be at 960 or larger.

Dave R. – Not much “whim of the client” going on. We gave direction where we knew what we wanted and gave Chris freedom in the rest. For a non-profit, we came to the discussion fairly well educated about web design/deployment, what we wanted to accomplish, and who we wanted to reach. Our approach was intentional from the beginning, and admittedly accommodated/compensated for our organizations needs and past mistakes more than those needs of the designer. You can read more about our internal process of studying the audience in a blog series I have yet to finish. The audience work was done prior to Chris joining the project using our own staff. We skipped the wire-framing because for us the budgetary choice was having more design concepts or wire frames. Recognizing our content is fairly simple, we chose to have more design concepts/comps and let the designers use their time how they chose. We also knew that having six different concepts would teach us many of the same things we would have learned through the wire-framing process and that the best lessons learned could be included in the final designs. For us it worked, even though it did limit Chris in some ways.

Kara – The 3+ levels of navigation problem (the first two in double-horizontal pattern) was one we understood well going into the project because our last site was large and navigationally challenged (understatement). The hardest part was figuring out how to allow the sidebar navigation to expand/collapse to a total of six levels of navigation. The tendency was to want to drill down in that left nav as you get deeper in the site, but then you lose where you are within the site (other than breadcrumbs). Many would say it is ridiculous to have this many levels in a site, but recognizing the site could grow to a 1,000 pages that in many cases are managed by volunteers, it was important to group pages into the sections you see so we could manage the permissions and allow the site some room for growth. As Chris responded, we did the best we could with the IA before he came on the scene, and stayed agile enough to change where it was needed. For me, designing the function of the navigation was one of the tougher decisions we faced because of how many ways there are to solve the problem. Thanks for your compliments, Kara. Hope this helps.

Otherwise, thanks publicly to Chris for his great work on this project and write-up, as well as to Nathan Smith for his help in every stage (not just the great front-end code). These guys were mostly strangers to me before this project, but we gelled quickly and became friends during a magical project I will not soon forget. It would also be poor for me to not mention this was a team effort beyond the design team. I had internal staff who provided incredible wisdom, content, photography, and leadership on this project. Also, David Lanier was invaluable in getting the design integrated into our CMS of choice, Typo3. What you see isn’t just design, but the labor of a number of different competencies who are still working together to improve the site even more (including the validation issues).

Chris the Photographer

August 1, 2007 3:57 PM

Love this article. Would love to see more articles of this nature.

John Huff

August 7, 2007 8:36 AM

Nice article. Will use it in web site design class as one of the ways to get across the importance of sketching, wireframes, etc. Most students want to just start right out on the computer.

I regulary use comps made in Illustrator CS3 to use as a way to judge what the client wants in the way of colors, etc. And I don’t normally charge for this first step….I’ve found it’s a good way to judge whether or not we are a good match and want to go forward.

Debbie Campbell

August 11, 2007 8:02 PM

This is a nice-looking site – I actually found it about a month ago in one of the CSS gallery sites and bookmarked it. Very nicely written article too, thanks for sharing a few insights into your design process.

Jermayn Parker

August 15, 2007 10:40 PM

I am starting a church website soon and just finished the youth website so this article has come at a very handy time indeed.
so thank you

tobbilla78

August 16, 2007 2:10 AM

Nice article. Will use it in web site design class as one of the ways to get across the importance of sketching, wireframes, etc. Most students want to just start right out on the computer.

John Knowlton

February 23, 2008 8:07 PM

Nearly all of the commentors here are web designers, whereas, I am an end user, quite involved at Stonebriar, and frequent user of the website. I also run the Information Center at Stonebriar and every Sunday morning, I meet many visitors and field questions from our members. Our combined impression is that our new website is excellent, not only very navigable for someone new to it, but also easy for an experienced user to get answers or information rapidly. The ‘Ministry Index’ in the upper right corner is huge, far better than a site map. The old site needed the user to employ ‘insider’ terminology, whereas the new site is much more intuitive for a newcomer. The main thing is the site now really shows what Stonebriar is, as a church body, and what it is doing to impact lives every day. From a Stonebriar member or visitor’s perspective, he did an outstanding job of listening to our internal staff’s requests and ideas.

mel

April 24, 2008 11:01 AM

Chris – Thanks so much for this article. The site looks fantastic… actually, I loved every comp you came up with. haha. Your insights are so invaluable as I am just starting out to do my own freelance work. I don’t know why but I’ve been scared to present radically different designs to clients so it’s insightful to see how you explore design and really run with feedback. I think that’s what makes you so successful in your work!

Sorry, comments are closed.

Media Temple

via Ad Packs