Out of the Box



Ever wonder how websites are made? Some come out of a box and look like generic tupperware with different leftovers inside, others are brave attempts at basic html, and the ones you visit the most are created by professionals. Professionals that take the job seriously, they soldier on into the night and early mornings to bring you the best of the best, silent workers that are like the magic fairies that put the dollar under the pillow in exchange for your tooth.


Over the last ten years I have met many of these professionals and I would like to give you a simple primer on who they are and what they do.


The Project Manager
This is the head honcho, the one that leads the team. They are the go-between the client and their team. The team only meets with the Project Manager, the client is just a voice on a speaker phone from the other room. Project managers have social skills, they know how to interact with the outside world and how to keep the team working. If using a Taser was legal in the office, they would use one, but instead they use "words". They keep the project moving and hopefully on track. If not they start threatening to go to Craigslist or replace you with the guy who won't accept your Linkedin connection request.

The UI Designer
User Interface or UI for short. When you visit a site, the first thing you decide to do is where to "click". Good UI design allows you to finish the task you went to the site to do quickly and with as few clicks as possible. Bad design is like being stuck in a giant multi-tiered mall with no map and its full of screaming shoppers.

UI designers come in all stripes and colors:

Art House: They love 4 pt. type on striped backgrounds and explain the design by referring to the juxtaposition of Naturalism literature and the cartoon Ren & Stimpy. And if you look like you don't understand what they are talking about, they will just stare back at you and finish drinking their Venti Soy Latte. And when you come back with "feedback" they switch to an Emo* playlist and play with their organic cotton scarf.

Journeyman: They use one template. Right rail, pull down navigation bar, and a palette called "Ice Cream" from the Photoshop swatch list.

Mr./Ms. Happy: "I can change it, what do you like?" Their way of working is to change the design depending on who's talking to them at the moment. They are always going through an off-on again relationship, so they have this tight strained smile whenever you talk to them.


Developers/Programmers
This team member is in charge of the "backend", the engine that runs the site. They are schooled in Java, Delphi, Drupal, C+++, jquery, css, actionscript, python; all the computer languages needed to run a website. Not to be confused with a "Code Monkey"**. They will take the UI design and make it functional. Developers are a hardy breed, they run on Red Bull and corn syrup saturated high sodium fast food, they can Instant Message, Twitter, and watch YouTube and work at the same time. Most of them have hobbies where they go to the desert to blow up old cars or they collect Happy Meal toys that they hot glue to their monitors. They also fantasize about being alone with their computers, alot.

What usually goes wrong, happens here between the UI designer and the Developer. To illustrate this I will use a typical conversation between the two:

UI: here's my design, it's pretty simple, right?
Developer: (Thinking this is nothing like the wireframe***) Ah, why is the home page 3600 pixels long? And why is the registration button on the bottom?
UI: I wanted it to POP, so I just had to put in the flaming toaster background in. And put the registration button anywhere you want except here and here, and okay not there.
Developer: Is that a flash background? And are you adding audio?
UI: Yes, it's flash and there's a "crackling toast sound".
Developer: Umm, that's going to take forever to load.
UI: The client signed off on it.
Developer: ..........


This leads to a conversation outside in the parking lot between the Project Manager and the Developer, where they smoke an entire pack of cigarettes. Then the Project Manager gets a text message from the UI designer telling them that the Developer is a dolt, which leads to another pack of cigarettes across town at the designer's studio.


Quality Assurance
This person tests the beta site (beta is the test stage of a website) to see if the site does what it's supposed to do. If it doesn't they send a list back to the Project Manager, and they decide on what changes are to be made. This is the stage that brings back the UI designer and developer to the table for a long meeting over take out food and stale coffee and another pack of cigarettes. And eventually a website that you will visit and bookmark.


I hope this explains the roles people play in creating a website and helps you understand the process. It's a long road that is traveled by colorful personalities that manage to function both virtually and in a room filled with empty take out boxes.


* Emo: Emo is a broad title that covers a lot of different styles of emotionally-charged punk rock. ie. bands such as Jimmy Eat World to My Chemical Romance
** Code Monkey: a programmer that pumps out code; a code workhorse.
***Wireframe: A guide for the designer that lays out the fundamentals of the Interface.


Credits:
Danh Hoang for his insight into the male Developer's Mind

Doug Dawirs for his uncanny ability to stare back at me with a straight face. Doug is also the original developer of the asset management application Aldus Fetch (now known as Extensis Portfolio).

@AndSheSpeaks for her insight into the female Developer's mind.

And finally a big hurrah to @RPM for her inspiration this morning over her tweet "me: we shouldn't have to scroll to get to the bottom of our main page of the site. designer: that really doesn't matter. *bangs head*"

Image: Ophelia Chong / The Art of CSS

Comments

Thank you. Thank you. Thank you.

Big hug for Ophelia.

a big hug back at you for the inspiration. :O))

Hugs back. You make me laugh all the time. :O))

You rock. And you make me laugh constantly. Especially when I need a good laugh. :O)

Ophelia, how do you do it?!!!! You hit it right on the spot. Having been involved with our synagogue's Communications Team (www.tbspr.org) for the past 4 years, this is exactly how we work. I'm forwarding your article to our team.

Bravo!

Luv,

ada

Hi Ada,

Its called sitting in the corner with a warm coffee and note pad. :O) There have been nights when I look up and it's 2 AM, and on the IM is the developer. We are both breathing fumes and yet there is a camaraderie that pushes us through to the next page of notes.

I am going to check out your site next. :O) Thanks for visiting and commenting, its most appreciated.
Ophelia :O)

Hi O'---amazing dialogue scripted from the dark side of spider crawlers building a new web. Ada is right on as usual as you you are.

I sent your blog to the webmaster at the Union for Reform Judaism, Jonathan Lam. I will pass back what his reactions are.

You realize you have the beginnings of a new sitcom?

Keep working on it.

Sun Luck...

arnie

Hey Arnie,
Heh. Now where did i leave my Venti soy latte? Thank you so much Arnie. I should come and visit Puerto Rico some day to meet all of Ada's amazing friends. :O))

And let me know if I left off any pertinent thoughts on web personalities. :O)
Thanks for visiting and commenting.:O)
Ophelia

That was funny and clear. Thank you for writing it.

Thank you Jamillah. :O) A sense of humor helps when a project is stuck. And a giant latte with an extra shot really moves things along. Thank you so much for commenting and visiting. It is most appreciated. :O) Ophelia

Oddly Ophelia, or maybe not so oddly, this resembles just about -every- project that I have ever worked on. Getting designers and developers to play nice with each other is like going out on a "weekend jaunt" to get a Mideast peace accord signed.

More often than not, it's just as successful.

Hi Steve,
Its a wild mix, not quite a "stew" but a "salad" where everyone is just tossed together and have to make nice. Designers like to hand off a design and then walk away ("oh that your job") and developers have to deal with trying to get into what the designer was thinking. I don't envy the developer's job. They are the glue that holds it all together. A wiley breed those developers. :O) Thanks for visiting and commenting, most appreciated. :O) ophelia

Minor quibble: there are two kinds of developers: "front-end" and "backend."

Front-end developers know all manner of CSS, HTML, and JavaScript -- the stuff you see and interact with in your browser.

Front-end developers are the ones who turn that Photoshop layout with the centered, drop shadowed backgrounds and rounded corners that have to scale in case the user up-sizes or downsizes his/her font size.

The front-end developer is the one who has to say "No. That will take too long to load," or "That will crash the user's browser." Front-end developers are way, way down on the Geek Credibility Scale. We're pretty effin' cool.

Now the backend developer is a different animal. Backend developers know .NET, C++, Python, PHP, and Java and such. Often times, he -- rarely she -- was a CS or computer engineering major. This person is a hardcore nerd in a way that the front-end developer probably isn't.

Of the two kinds, the front-end developer is the one most likely to punch the UI designer in the throat.

You are right, I was just trying to combine it into one for the primer. :O) LOL.

I love "Of the two kinds, the front-end developer is the one most likely to punch the UI designer in the throat. "

You are too funny to be kept out back. You definitely kick a**.

:O) ophelia

Great write-up, I wouldn't have explained it any better.

Thank you Danh. :O)

Leave a comment

Please review KCET.org's Terms of Use and Privacy Policy.
SoCal Connected

About 404 City

Los Angeles is the ultimate networked metropolis, and in 404 City blogger Ophelia Chong takes a look at our diverse web of communities, all of them interwoven by freeways, shared history, media, automobiles, and the ever present digital penumbra of cell-phones and computers.

Recent Comments

More KCET Local Blogs

Blur + Sharpen
Read Holly Willis's latest post, Coming Up: Lewis Klahr

Cakewalk
Read Erin Aubry Kaplan's latest post, You Got A Problem With That?

City of Angles
Read Brian Doherty's latest post, It's Charlie Beck for L.A. Police Chief

Events
KCET Local brings you the best in SoCal events. Add this to your iCal: The Wall Project Event

The Guest Room
Read Harry Pallenberg's latest post, Surviving Los Angeles

Movie Miento
Read Adolfo Guzman-Lopez's latest post, Watch

Pixeltown
Read Maxwell Strachan's latest post, The SoCal Spin 10/23

The Other Room
Read Kevin Ferguson's latest post, Ex-Wetlands
 
Think Tank LA
Read Jeremy Rosenberg's latest post, Yes Sushi,
No Sushi

Where We Are
Read D.J. Waldie's latest post, Somewhere, west of Doheny

See More Recent Blog Posts

Tell Us

Got something to say? Got an idea that would make a great local story, or want to share an article or blog post you find interesting? Tell us about it.

Send Feedback

E-Newsletter Signup

Get great content from KCET straight to your inbox. Sign up for our monthly e-mail featuring upcoming KCET programming, events, ticket giveaways and web-only highlights.

Signup Form

Show Your Support

Like what you see? Donate now to support local, intelligent, independent stories. We appreciate your support.

Donate