Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Development



Once the prototype has been approved, the developers have all they need to begin building the actual website. The development process consists of constructing a database integrated with a content management system (we use our own NewfangledCMS), creating the site's structure and unique page templates, which we call the "whitescreen," and then applying the final visual design to the site.

Programming with PHP

Our developers program in PHP, an open-source language created especially for web development. What it basically does is process the raw data that sits in a website's database and matches it with the correct HTML for the page template it belongs on, producing the web page as we know it. As the diagram below indicates, the PHP exists within the CMS, executing scripts that are written to produce specific results.

An example of how this works is just one click away. The page you are viewing right now displays only some of the content associated with this article. Our CMS defines this page as only a portion of a type of content called "newsletter" and serves up the rest of the content as you navigate the various parts by clicking the "In this Newsletter" menu at the top of this page. But, if you click on the link that reads, "View on single page," a script will execute to reconfigure the data associated with this content type and spit it back out so that all five sections display on one page. This kind of communication between the CMS and the database happens on every page of a website, which underscores how important the prototype is in describing to the developer how each page is intended to function.

 

Building the Whitescreen

Just as we separate prototyping and design as distinct processes, we isolate the programming of the website from the application of the visual design. This allows the developer to focus on the logic of how a site operates before worrying about how the site actually looks.

As a new site is being built, it looks just like the image to the left. We call this the "whitescreen." While similar to the prototype--in that no visual design has been applied yet--the whitescreen actually works. Remember the simple diagram above? Well, the developer defines every type of content (i.e. products, articles, blogs, whitepapers, etc.) as unique records in the database. Each content type's record will be defined by various variables, like its title, abstract, main content, images, etc. Then, the developer configures the main templates to retrieve that content as needed.

The whitescreen homepage at the left is a good example of how retrieval works. At the top of the page, a "test slide" is displaying. In this site's database, a "slide" is particular type of content that, in addition to having a main image, has a title, a description, and links to another page on the site. However, the homepage has been designed to display an interactive slideshow that allows the user to browse through all the slides. This is achieved by the CMS, which runs a script to retrieve each "slide" record in the database and place it in the page. Now, the user can use the arrow buttons to view multiple slides without having to refresh the page.

When I said that the whitescreen actually works, I meant that literally. Because the site is so thoroughly integrated with the CMS, we can actually train our clients in how to use their site before the visual design is applied. In fact, that test content you see in the example above was entered by the developer using the CMS in the same way the client would. Giving the client access to the site once the whitescreen is complete can sometimes be a great way to maximize the amount of time they have available for content entry--something we'll discuss in next month's article.

 

Applying the Design

As Dave's quote above says so well, excitement really does build as the website takes shape--particularly when the visual design is applied. Because the client has already been working with their site, they've been well trained to see it as an interactive vehicle for content, not a slick, two-dimensional presentation. But that doesn't mean that applying the design is simply decoration.

The design is a critical component of the website's ability to properly communicate its content. It sets the tone and gives voice to a brand speaking to a wide audience across the web. Because the structure and logic of the site has already been worked out during the whitescreen stage, the developer can focus solely on the visual detail and interactive effects that enable the website's voice during design application.

The developer refers to the Photoshop document (PSD) created by the designer, which contains every image, color, and typeface used in the design. The designer also provides a stylesheet which specifies the specific colors, sizes, and weights of various text styles that will be used repeatedly throughout the site (i.e. headlines, subheadlines, link styles, etc.). With all this information, the developer can create cascading style sheets (CSS) that the site templates are matched with in order to display according to the design. With one master CSS and others related to unique templates, any future changes to the style of the site only need to be made in one place.

For a more in-depth look at how design impacts website functionality, read our newsletter on Designing for the Web Today.

Once the design and development work is complete, it needs to be checked out thoroughly to make sure everything works properly and looks as it was intended to...



Comments

Adekunle | March 22, 2013 12:59 PM
Wonderful article.! Looks like mood boards breaks down the process into small bites for any design project. Thanks!
Joel Milne | January 28, 2012 7:03 PM
Interesting idea, I like the concept of a more specific way of profiling users instead of just borrowing the traditional marketing plan approach to forming target profiles.
Jann Mirchandani | December 20, 2010 4:39 PM
Chris,

Great article. I love seeing the process from a large shop; gives some perspective to what we're doing here; ways to improve and validating what we're getting right. Thanks!
Jessie Nunez | March 27, 2010 2:28 AM
Wow! I skimmed over many of your articles and plan to read them in depth. Great writing and content. By the time I'm done, I'll have a UI degree (of sorts).

I primarily focus on visual design for smaller businesses. These businesses generally don't have large budgets. However, I believe that best practices should be the rule and I ask lots of questions to help my clients think beyond "We need a cool web site with such and such bells and whistles".

I would appreciate any advice on how to implement and maintain good UI principles when the budget is under 10K (way under 10K).

Great work and much continued success to your firm.
Chris Butler | February 5, 2010 2:40 PM
Chuck, That's a good article you linked to- thanks. Our process always includes mood boards. We don't break out the price and allow clients to choose a path. The only time we wouldn't do mood boards is if we decided to not include them in the process for some reason- perhaps to keep the scope narrow and work within a lower budget. But in that case, we would have very specific contractual language to keep the scope of the design phase as limited as necessary.
Chuck | February 4, 2010 5:43 PM
I read something good in another article about website mood boards from WebDesignerDepot - "Words fail miserably when trying to translate design concepts... Visuals communicate things words cannot." It's true. Why try to pitch a visual concept in a written form to get your client to buy into the design you haven't created yet? So mood boards are great at getting to the point faster. But I like how you emphasize that the strategy happens with mood boards and the production happens with the layout iterations after. Most desigers try to do both in layouts and end up redoing their work over and over again. In the WebDesignerDepot article they talk about when clients don't want to pay for mood boards. How do you handle that? Do you breakout the costs and let them choose?
Dave Mello | February 4, 2010 9:30 AM
Robert: Thanks for the feedback! In rebuilding the new site, we drastically reduced our use of images *and* tables. The result is a must faster load and rendering time. In the case of the main navigation though, I chose to stick with a simple table/image structure for a couple of reasons.

Since the menu system is dynamic, I wanted to utilize a little bit more control of how the columns appeared if the ordering or placement changed at all, particularly in older browsers. As for using graphics, since the menu actually serves as one of the main visual elements, I wanted it to be as consistent and attractive as possible, particularly in cases where no browser/os induced anti-aliasing was taking place. You are correct in that the same structure could have been built using only CSS, but I made the call to take the minor trade-off in performance to ensure consistent design. We are also using ALT tags in the image itself to avoid any SEO issues.
Chris Butler | February 3, 2010 9:27 AM
Robert: We went live with our redesign on January 12. You can read all about the process in a blog post I published that morning called How We Redesigned Newfangled.com. As for your question about why the navigation is programmed the way it is, I'm going to let the developer who built it, Dave Mello, answer. From my point of view, the new site is significantly faster than the old one, which makes me happy!

Jason: You raise a good point. I neglected to mention developer code reviews in the QA part of the article. I can only fit so much in, but it is definitely a critical piece of the QA process. Right now, our developers have a code review prior to the site going live with our Lead Software Engineer, who evaluates their work from the perspectives you listed out. We were actually discussing this just the other day, and are going to move to a new model of having developer code reviews every two weeks- on a schedule independent of specific projects- to make it more of a developer department culture thing, rather than just a step in the project process.
Jason | February 2, 2010 7:11 PM
I see the value of having the project managers create and implement test plans. Being the most familiar with the spec makes them the most qualified to assess whether the project measures up. But what about the code itself? Who does a QA review of the code for security issues, leanness, web standards, etc.? I'm not a big shop like you all, so the biggest problem I've had has been with working with freelancers in the past and not having a way to ensure code quality, so even if a site looks great when it's first launched, it degrades fast. I've learned a ton as a result about how little I really know about code ;-) So now I depend upon other programmers to check the work in addition my own review.
Robert | February 2, 2010 5:27 PM
Nice post, and when did you guys do the redesign? Looks great! Just curious though on the choice for navigation, use of images and a table? Seems odd, surely that could have been achieved with plain text and css. Just curious if there was a good reason for it.
Chris Butler | February 2, 2010 3:09 PM
Joanne: Definitely. In fact, I was speaking with one of our project managers just this morning about planning for persona development for a client that has been using their site actively for almost two years now. Specifically, this client does a lot of television advertising but has not yet focused their website on a particular segment. As a result, they don't really have any content strategy at all and are assuming that the same people that respond to a television ad are their web audience too. Our hunch is that assumptions is incorrect. The value of identifying personas is there, really no matter when you do it. It's always going to provide some insight that wasn't available beforehand.

Jeri: That's a good point, which is why the persona stuff is so critical. If you don't identify who you are speaking to with a site, you won't have any significant or accurate model for content. I'll be covering content strategy in the second part, not because it's secondary, but just because I wanted to deal with the fundamental/mechanical stuff first.
Jeri A Hastava | February 2, 2010 3:02 PM
Great post, and I would love to see the same post with the addition of content strategy - gathering, analyzing, and planning for content today and into the future - at the very beginning during the planning phase. Planning, designing and developing in the absence or "real" content can result in content that simply doesn't "fit" the site, or fails to convey the message - not to mention frustrated customers. :-)
Joanne Cirillo | February 2, 2010 2:08 PM
I watched your webinar on Personas and found it very instructive. Is there an application for this process if you're already way down the road on your web site development?
Chris Butler | February 2, 2010 12:59 PM
Justin, Shhh! Don't let that secret get out. Otherwise, what would I write about every month? ;-)
Justin | February 2, 2010 11:04 AM
Chris, Great post! Nice to see our process so well articulated. Perhaps this will help dispel the myth that we have an extra button on our keyboards that simply says, "Make Website."

↑ top