The Development Phase of Web Design - dummies

The Development Phase of Web Design

By Lisa Lopuck

In the Development phase of web design, all video, audio, Flash animation, and graphics are prepared for the web: They’re compressed to speed up their travel across the web, saved in a web-friendly format, named, and uploaded to the server. All programming and HTML work is done, and the site comes together, ready to be tested.

Producing comps for a website

After the client chooses a design direction for the site, the production work can really begin. The graphics team will produce a series of comps (graphical mockups that show how the page could look) that account for the design and layout of each unique page template. Comps are usually produced in Photoshop, although you can find some designers who use Fireworks. Generally, you commit to no more than 20 to 25 comps, even for the largest websites.

These comps serve as the visual benchmark for the technical build-out (putting the site together). The HTML and CSS developers will use these comps to derive the necessary graphics, backgrounds, toolbars, buttons, and styles for text and other objects, and will try to match the visual design and layout of the comps as closely as they can.

Website content development

During the Development phase, the content team is busy writing all the copy (text) components for the site. The content strategist maps out all types of copy needed for the site, how many blocks of each type of copy are needed, and on which pages they live. This is all neatly organized into a spreadsheet called a content matrix. Content strategists, along with the writers, also decide what the tone of the site should be.

Armed with a checklist of copy to write (the aforementioned content matrix) and the tone to convey, the writers can begin their task.

[Credit: © LEVEL Studios.]
Credit: © LEVEL Studios.

Media development in web design

Most sites have some sort of rich media (also known as multimedia) — whether it’s Flash animations and applications, audio, or video. In fact, some sites are entirely built in Flash except for the one HTML page that the site sits on.

[Credit: © The Seen.]
Credit: © The Seen.

Flash development can be so complex that it has become a process and a profession unto itself. Not only do Flash designers need to create their own version of a site map and wireframes to make their plan of attack, but they also need to be one part designer and one part programmer in order to build an effective Flash component.

Building the presentation layer of a website with HTML and CSS

HTML is certainly the glue that holds the World Wide Web together. HTML (HyperText Markup Language) is a simple coding language that tells your web browser how to string formatted text, graphics, and media elements together on the page. CSS (Cascading Style Sheets) is a set of rules that you can define that govern the appearance, size, position, color, and shape of your elements. Together, HTML and CSS create what the user sees: the presentation layer of a website. The web-design industry customarily thinks of a website as organized in layers. As you can see throughout this book, a website comprises many layers.

Every page of every website is built with HTML. You can write HTML code in any simple text editor (such as Notepad in Windows) or use a more full-featured editor such as Adobe Dreamweaver. After you finish, you can load the web page into a browser right there from your desktop and see instant results.

HTML is pretty limited in what it can do, and CSS just focuses on the looks and the layout, so you can’t build a complete online shopping system (for example) using just CSS and HTML alone.

Developing the backend of a website

If you’re designing a website that’s going to do anything beyond a simple show of nice text and graphics, you have to enlist programmers to build a website layer generally referred to as the backend. The backend is all the stuff that happens behind the scenes to enable site features such as search, customer feedback, buying products with a credit card, or registering for special events. All of these actions require specialized programming. You can’t build this sort of functionality with HTML alone.

Programming languages such as PHP (Hypertext Preprocessor) or ASP (Microsoft’s Active Server Pages) are integrated right into the HTML code for the page. The HTML and CSS portion controls the page appearance and layout, whereas the programming code does all the cool stuff such as linking to an online database to automatically display a product of the day.

[Credit: © Steelcraft Group.]
Credit: © Steelcraft Group.

To build complex pages with login capabilities, e-commerce, and more, you can either roll up your sleeves and type PHP code using editors such as PhpStorm or Eclipse or you can use tools like Adobe Dreamweaver.

[Credit: © Steelcraft Group.]
Credit: © Steelcraft Group.
[Credit: © Sentrigo.]
Credit: © Sentrigo.