A Beginning Glossary for the Web Designer or Developer
Oct 6, 2009 In Design By Tim AidlinIn MIX Online Opinions, we try to speak to a wide variety of designers and developers for the web. There are, however, myriad levels of expertise within those groups: developers and designers who have been working for years, those just breaking into the industry, those who strictly work in comps, those who only write code, and those who do both. Sometimes we even speak to someone from the client-side, looking to learn more. It can be challenging to “target” our writing properly.
I’m reminded of this in a blog-post, Aidlin Lost Me at CMS systems….., by Ryan (I couldn’t find a last name), about an article I wrote earlier this year. Ryan says:
I felt like a “fish out of water” reading Aidlin’s ‘How We Work (and sometimes skip some steps)‘. … I found myself looking up the meaning of many of the acronyms that Aidlin uses in his article. The first read of this article was difficult for me,it was like trying to eat a bowl of alphabet soup with a knife…I just could not get a handle on what CMS,CSS, TFS and XAML meant.
First of all, Ryan’s similie is awesome: "like trying to eat a bowl of alphabet soup with a knife." Kudos for that.
Rather than only go back and provide in situ links, I thought it would be beneficial to provide a glossary of the terms and acronyms I gloss over my previous post. Additionally, I’m hoping you, fair reader, will leave comments with additional terms and acronyms you commonly use, and would benefit the community. Let’s begin:
Assets
When we talk about assets, we’re usually referring to the discrete files which are required for deployment of the site or project. As a designer, I generally work with "creative assets," specifically meaning the individual images and stylesheets which are deployed in the project. For example, a wireframe would not necessarily be considered an "asset," which the individual .jpg logo that goes in the header of the site would.
CMS: Content Management Systems
"A content management system (CMS) … is a computer application used to manage work flow needed to collaboratively create, edit, review, index, search, publish and archive various kinds of digital media and electronic text." – Wikipedia
One difficulty in maintaining a site, especially a large site with multiple contributors, is content-management: how to change your content, get new images online, switch out links, etc. There are many types of systems, ranging from great paid versions like ExpressionEngine to customizable and free open-source software like RadiantCMS.
Comps / Composites
Comps are generally static images that represent a site or application in different states. Where wireframes present the general outline and structure of the site, comps usually feature aesthetic choices such as colors, fonts, logos, and the like. Often comps are delivered to the client with a set of redlines, which help explain specifics of the designs.
CSS: Cascading Style Sheets
"CSS is designed primarily to enable the separation of … HTML … from document presentation, including elements such as the colors, fonts, and layout." — Wikipedia
CSS enables a web-designer or developer to build a site using HTML and attach a separate file that makes the HTML look a certain way. This means (generally) that the actual content and structure of the site are separate from how the site looks. Using CSS makes web-development and design a lot more fluid and flexible, makes your pages load better, and makes them more accessible to users with disabilities.
body{
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color:#fff;
}
HTML
"HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items." – Wikipedia
At the most basic, HTML makes web-pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> </head> <body> Your content goes here </body> </html>
Layered Comps – .psd / .ai / .eps files
Designers often use Adobe Photoshop or Illustrator to design the comps for their projects. When creating these designs, they’ll make use of layers and layer-sets to build their images. These "broken-out" images are of particular use to developers when coding a site or application, as it gives them access to absolutely all potential assets they might need, without having to rely on communicating with the designer for each particular piece they might need. Layered files can get preety large, though, so are often simply "handed over the fence" to development toward the end of the design phase.
Redlines
Because developers are often having to translate layered and static comps into working, functional sites and apps, there is often a disconnect between what the designer envisioned in his or her comps, and what the developer sees as important to completing the project.
To help with this translation, redlines are often used to call out specific aspects of the user-interface design and interactivity. Details such as spacing, fonts, colors, actions, and the like may be called out to ensure the developer coding the design takes the designer’s concerns into consideration.
Silverlight
"Silverlight helps you create rich web applications that run on Mac OS, Windows, and Linux. Welcome to a new level of engaging, rich, safe, secure, and scalable cross-platform experience." — MSDN
Silverlight is an excellent technology for creating rich, interactive web and stand-alone applications. Silverlight uses XAML, and User-Interfaces can be created either in Microsoft Expression Design or Blend. For more, detailed information on Silverlight, I’d check the Silverlight.net site for great demos and articles.
Source-control and project-management software
When building a site or application, often multiple members of the team will want to work on the same file or files at once, or need collaborate on other aspects of the project such as manage timelines and deliverables, and communicate with the team that’s involved in building your site. There are various systems you can use such as Microsoft SharePoint, Basecamp from 37 Signals, Microsoft Team Foundation Server, and the like.
For small agencies and freelancers, the “CMS of choice” generally is just keeping following a file-nameing convention for your documents and images so you can find them and don’t copy over old work. In short, being super-careful and backing up their files regularly.
Styleguides
Styleguides are something totally different than "stylesheets" / CSS, mentioned above. A styleguide is a general guide (usually a mult-page Adobe Acrobat document (.pdf) or Microsoft PowerPoint document (.pptx)) that everyone involved with production on a project refers to. It includes specific details about fonts, colors, logos, aesthetic elements, and other important information such as messaging and tone for content, and personas.
TFS: Team Foundation Server
"Microsoft Visual Studio Team System 2008 Team Foundation Server (TFS) is a team collaboration platform that combines team portal, version control, work-item tracking, build management, process guidance, and business intelligence into a unified server." – MSDN
At MIX Online,, we use TFS to create, track, and maintain source-control for all of our projects. Whether it’s code for one of our labs, or the source HTML and CSS for our sites, the files are all "checked-in" to TFS. This means if I want to make a change to an image on the site, I use TFS source-control to check the file out, lock it so no one else can modify it while I’m making the change, and then check it back in with notes on the modifications.
If we ever need to roll back to a previous version of a file, we have a history changes and can always restore to a previous state.
TFS = security and workflow = awesome.
Wireframes
Wireframes are generally static images that present the general structure of major elements to a site or application. Often this work is done by an Information Architect (I.A.) and created in a piece of software such as Visio, OmniGraffle, Adobe Illustrator, or PhotoShop. Wireframes often show the structure of the project and include flowcharts and diagrams that mapp user-flows and interactions.
WPF
MSDN describes WPF as follows:
“Windows Presentation Foundation (WPF) provides developers with a unified programming model for building rich Windows smart client user experiences that incorporate UI, media, and documents."
More simply, WPF is a Microsoft technology that allows for easy creation of Windows-based applications. As an example, MIX Online’s The Archivist and Flotzam are both WPF applictions, designed and built using Microsoft Expression Blend and Microsoft Visual Studio
XAML: Extensible Application Markup Language
"XAML simplifies creating a UI for the .NET Framework programming model. You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions." — MSDN
XAML is one of the languages that Silverlight and WPF applications are written with. Essentially, XAML used in much of the same way as HTML, CSS, and JavaScript are used — to define the look, feel, and top-level functionality of the site or application.
Microsoft Expression Design can natively generate XAML, which can then be used in Microsoft Expression Blend, a tool that helps you build robust experiences in Silverlight or WPF.
This list is far from exhaustive, but I hope it gets us all on the same page about the basics. What words, acronyms, or technology-related phrases have you come across that you have yet to find a good definition for? Do you use a technology that should be added to the list above? Be sure to leave a comment, and follow us on Twitter at @MIXOnline for the latest Opinions, Articles, and free, downloadable, open-source prototype software.
Follow the Conversation
1 comments so far. You should leave one, too.
r technology-related phrases have you come across that you have yet to find a good definition for? Do