Ranjani Sheshadri

Steps to a more fulfilling redesign

April 22, 2007 By Ranjani Sheshadri

If “Layout, YOU SO NASTY” is the first thought that occurs to you in the morning, aside from “OMGWTF NUKES” and “Mmm…donuts”, change should probably be on the horizon, because if it isn’t, a chupacabra might be, and in the history of the world, there has never been anything more unforgiving. Except, of course, an incomplete redesign.

The first place to start is the beginning

Make a comprehensive list of the things you dislike about your design. The easiest way to do this is to sketch some cool things you’d like to put into your design that you currently cannot, because your spleen dictates your creative judgment. First, get an idea for a layout. Think about boxes, about circles, about octagons; think about anything that will get your mind to orient itself around an idea or an image. If you’re having trouble coming up with something spur your thoughts, take a walk outside and observe nature — if you’re so tired of this that movement is beyond you, observe your favorite sites. Remember that the difference between theft and inspiration is the way that you interpret a design element. Do not cross the line; your creativity, although recently revived from a coma at this stage, will hate you.

If you can’t deduce that something is drastically wrong with your website, start with little things. Changing the colors and icons you use can refresh a tired old website; even better, the experts suggest realigning. Move your website around and use the space you gain to introduce new elements, be they illustrations or new content areas. It’s like feng shui for your website, and it will all work out, I promise.

Molding the perfect website

Once you have an idea for a design, don’t hesitate to start working with it. Think about how each page will vary from the one before it, whether parent pages will look different from child pages, or whether you want certain elements appearing on every page. When your sketches start to look promising, and your colors inspire you, start making your design concrete. Open up Photoshop or Illustrator and create mockups of your site; show drafts to the world and get critiques. It’ll be a pain trying to fix your design drastically later, so take advantage of your preparation time.

When you’re ready to turn your mockup into a live version, start by styling the text first. No matter how gorgeous your images are (unless you’re creating a portfolio site), your text is going to add some humanity to your page because anyone can write; not everyone can design. Gradually add the images; keep your mockup open so that you can see how you’re progressing.

If you make a mistake, work with it; some mistakes are beneficial. No matter which path you take, good things always come out of effort, so work hard for the design you want. It might end up being better for you 🙂

Architecture

Having just redesigned my site (I don’t listen to the masters as well as I should), I know that cleaning up the code I used was the hardest task I had. If you’re using a CMS like Movable Type, WordPress, or TextPattern, make sure you have a list of the various tags you can use. While a template can be split up into numerous files, most of the code there is fluff. Remember that if you’re designing a site yourself, you won’t need to use the default template or styles. In fact, scary as it might sound, you can simply strip it and move on your way. Here’s how you do it with minimum casualties:

In a plain Notepad (or preferred text-editor), make a list of essential template tags — body tags, comment tags, RSS feed tags — you can strip these directly from the default template, if you’d like. Even if you’ve never worked with one of the major programs, know that tags are usually named to be easily recognized and will sometimes have the program’s name as a prefix. For example, to make an entry title in Movable Type, use the following:

<MTEntryTitle>

The success of a site’s skeleton is necessary for a good design. If you fail to use semantics or valid code, you’ll find bits of your site breaking and the whole redesign will be that much more excruciating. Keep it simple, and save yourself the pain of watching your redesign flounder.

Design

As a rule of thumb, I always design my site in a static location elsewhere with about four different pages: home, an interior/post, a random inner page, and my archives. If you follow my method, all your bases will be covered; there’s no need to fret about how some of your pages will look because technically, you’ve already designed the canvas that you will create them on.

Fonts

One of the challenges ‘redesigners’ face is the age-old question of how to balance images and text. Text on its own is very beautiful; if you’re ever played around with typography, you’ll know that fonts can be a lot of fun when you treat them right. The first rule of web typography is to deviate; don’t worry about Arial, Times New Roman, or Courier. Look for fonts that speak to you. If you’re worried about paying for something like Helvetica (or its many children), many similar imitation fonts are available for free. You’ll find the widest variety in serif fonts, which are arguably the most beautiful to style with. Even if you use sans-serifs exhaustively on your redesign, serifs can help liven any page. Several news sites (and blogs, if you’d like something in the same hemisphere as your redesign) prefer serifs for headings to attract attention, and then sans-serifs for body text to preserve readability. The most important thing to remember is that any fonts list you find is not finite. While I haven’t attempted it myself (the wendigos tell me not to), designing a font can tremendously personalize your page, and help you to branch out of your redesigner’s clique.

Always remember that any font you use, unless you utilize sIFR (Scalable Inman Flash Replacement), may not be available to everyone. Since you can’t force font usage on the general public (darn!), be sure to set your CSS like this:

font-family: Myriad, Helvetica, Arial, sans-serif;

… just so there’s always a back-up!

Grids

Grids date back to the Golden Ratio/Rectangle phenomenon — the most appealing geometric figure to the human eye. If artists, carpenters, and sculptors — even mathematicians — could style things with these ratios, why couldn’t web designers? Grids are not essential to a successful redesign, but they can certainly be used to refresh a tired website. If you’re interested, Mark Boulton documented his process very well; give it a read!

Message

Arguably the most important part of any successful redesign is your “message”. Your site is a visual representation of yourself online. Every bit of text that you write, every image you make is your creation. Be proud; reflect for a minute or two. And then think. What does your site convey to people? To yourself? Is it clean? Grungy? Minimalistic? Professional? A site can convey so much more than you often give it credit for. People can be enthralled by beauty or turned away by clutter; it could be the reverse as well. If you feel as if your site is truly something that you can appreciate, you’re done; you’ve just completed your own redesign. Now the design-raptors will have to find someone else to hound!

The Jekyll and Hyde Effect: Philosophy and the Internet

December 29, 2006 By Ranjani Sheshadri

About one hundred and forty years, if you had told General Sherman that the world would become interconnected in the next century, he would have set you on fire — and believe me on this; the man burned his way through Atlanta. You do not mess with William Sherman and come out of it alive.

But the Internet “happened” anyway, didn’t it? Now, I can talk to my family across the world without having to worry about when the next messenger will stroll into town, or why the last one tripped his way into a rabbit-hole for all eternity. With all new things come methods of using them effectively, and the proliferation of such techniques. And then…there are innovations, breaks in the conveniently restrictive structured technological cycle of fixes, updates, and version releases.

In 1999, my brother was pondering about this new thing called Google, which 4th graders today can utilize with frightening alacrity. However, when I was in 4th grade and chattering about Google, my precocious comments really didn’t have much impact, other than the fact that I didn’t quite make the kickball team that day. Thanks a lot, guys.

And then the truth hit my unaware friends in the face, locomotive-style. Google was something new, but soon joined Pogs and Pacman in cultural popularity. This was something everyone was using; it was mainstream and loved for it. No technology company has yet had Google’s extraordinary success, although many have tried…and many others have been acquired. When staring innovation in the face, I’m reminded of one of my favorite novels, The Strange Case Of Dr. Jekyll And Mr. Hyde — a story of how the most familiar things we know can contain something more than face value can offer. In this age of invention, of fads, of frenzy, we can pinpoint exactly how trends and innovations came about, and yet, we don’t know why we like them or why we hate them. Ultimately, instead of judging the Internet as a series of fan-followings, we can call it a social network and get away with it. A social network composed of design innovations? Allow me to explain:

The social evolution of design trends

In the beginning, there were rocks. Sometime shortly after the rocks, there came the Internet in a massive cosmic explosion that killed off the dinosaur actors from Jurassic Park. The first sites on the Internet were composed of text in various arrangements — text on the left, text on the right, text everywhere across the screen. Images and CSS, as always, came later. We will always remember the late 90’s for the proliferation of animated GIFs, image backgrounds, and brightly colored pages as well as the ideal that anyone could make a website. This frame of mind has, thankfully, survived into the present day.

It’s a well noted fact that it takes one successful design to spawn numerous ones. Take Google, for example. With its simple layout, playful name, and ease of use, Google is lauded as the forerunner of all Web 2.0 designs. But the term is only resurging now because other sites try to work off of Google’s simplicity, and the look, which has undergone countless revisions, is more alive than ever before. But while Web 2.0 runs its marathon around us, we have to look back on other design trends that have run the gauntlet before it. We all remember Flash, and how we overused it for splash pages, navigation, and page content. What about image based navigation? Javascript effects (not the Moo.FX variety!)? We labeled how good sites were based on what was used to enhance them, not what was actually on the page. Think of it this way — if everyone who had MS Paint and used it to make buttons was a designer, we would all be rolling in money and flaunting it. And if no one had come up with the first Flash webpages, the first Google layout…where would we be now?

Humanity takes the road well traveled; our creativity, while individual, is also part of our evolution. In the future, if it becomes popular to build houses out of cheese, you can always trace the initial idea to one person and watch others expand upon it. Where there were roads before, there are now links that might never have been invented if one person, however far back you want to look, had not had the initial idea to start the framework for a computer (Charles Babbage?).

Web 2.0 – respected, reproduced, and underestimated?

When we look at “Old Gloss and Gradients”, we assume it’s too pretty to be taken seriously, as if the substance is really something else hidden beneath the surface. The trademarks of Web 2.0 override any actual value the page has. If bright colors could speak sentences, designers in this style would be writing novels. But what if we look at it as something beyond eye-candy? As something the internet truly needs in order to expand?

The hallmark of the Web 2.0 phenomenon is communication. Blogging, as it is now, would be absolutely different if it weren’t for comments, trackbacks and RSS feeds. Those three parts alone say, “You contributed to the growth of the Internet; thank you, come again!” But we’ve blocked the road with bloated websites full of images, gradients, misused CSS, and excessive scripts. In response, we see more and more simple websites showing off their caliber — Accessites, Tantek, and Google, which is still very much the same — and proving that it doesn’t take beauty to maintain something truly great.

To conclude this section amiably, my friend Lisa details the necessity for simplicity in this very quotable quote: “You know a light fixture installation isn’t going well when it takes a brick, a hammer, a candle, and my aunt’s foot.”

Moral: Things are not what they appear

The widely accepted ideology that everyone is different is fundamentally wrong in one respect: we love the same things as an e-culture — beauty, simplicity, and great content — but it’s hard to find all three existing together. Thankfully, you have Devlounge and scores of other sites in the 9Rules network to showcase the best of the Internet while expanding communication across all varieties of people. The story of Jekyll and Hyde is of a man trying to separate the wicked in him from the good man he tried to be. If we can sift through the worst of what we see in designs and find the best parts of the Internet, we will come back richer for it. And that concludes my philosophical articles! If I try to write another one, come back and yell at me, please. Best of luck in the new year 😀

The benefits of being unique

November 21, 2006 By Ranjani Sheshadri

Would-be thieves of this era would probably benefit from branding the relatively new adage “Hell hath no fury like a designer scorned” on their monitors. The web might be for anyone, but that doesn’t mean the content of the web is suddenly free from copyright — and the watchful gaze of said content’s creator — and everything is free for the taking. But that’s the trouble with having something impressive and innovative – other people want to be just like you! It works in real life without a hitch (I’m doubting Graceland ever sues Elvis impersonators) — but the Web is the Wild West of real life. And designers on the web definitely have guns to go around.

Stage #1: Denial (Of course!)

As referenced in Airbag Industry’s chronicle of Falkner Winery’s design theft, of COURSE designs are public property. Let’s say, if I wanted a new look for my site, I have permission to take Google’s logo and colors, correct? If you say yes, go hide now. Theft is theft. In real life, it’s punishable by jail time and fines. On the Internet, people get incensed and then go about documenting your folly and getting suitable recognition from it. This is in addition to people laughing at you, naturally, and being made fun of — Internet style — is about the same as having a whale fall on you. Love hurts.

Let’s play a game of fill in the blank. If a design is obviously not your own, you __________? The idea would be to e-mail the creator and ask for permission — which may or may not be given, seeing as people don’t really share babies (Oh, Billy’s your son? He’s mine too! How amazing!) or indulge that thought. The second, and much better option, would be to create your own designs. Generally, anything you create on your own not only has more personal value but also brings more to the “Table”. Besides that, it’s easy. I’ve seen things made in Paint and the oldest possible version of Frontpage (with rocks and twigs and little flies for cursors, no doubt) that can be genuinely appealing because — and yes, this is cheesy — it’s unique. It’s new. It’s innovative. It’s fresh. And most of all, it’s all yours.

Stage #2: Not me! HIM!

The prevailing theory on the Internet, among clients, is that if anything happens with the website, it’s automatically the designer’s fault. Using the same sad story of Falkner Wineries, one has to understand that the client didn’t necessarily put a stop to the theft. And it was a gradual process, I’m sure, in which the client probably saw an image of the finished design several times. We have to assume that the client that doesn’t notice such blatant thievery is some primordial species of shellfish, or understands the process and wants it to continue. And then, the client transfers the weight of the warfare to the designer when they are equally responsible. The designer eventually did make some sort of amends by … turning the logo about 30 degrees and changing a few colors. The design is changed completely now, right? Everyone can go home happy! The fact that this was considered a solution by the designer is somewhat pathetic.

If you, as a designer, are ever in a position where your client wants a design that’s “just like this thing” or “SUPER-DUPER-MIRROR-CLONE-CONTRAPTION of this!”, just say no. As a designer, you have to be able to exercise your own creativity; else, you’re not exactly a designer, are you? You’re just a monkey with a glue stick. It could be a logo, a website, a quotation, a layout; it’s still theft. While it looks bad on a small level, it looks even more ridiculous on a larger level. Don’t put your client or yourself in jeopardy of the wrath of the INTARWEBZ because revenge is swift, and the effects are lasting. So make a stand. Be inspired, but don’t hit Ctrl-C. Learn from other designs, but don’t “borrow” them. In a day and age where seven year olds can publish content on the Internet, don’t make yourself look bad by taking what’s already there. It’s too easy to steal a design; it’s also too easy to love a design. There shouldn’t be any insecurity about sharing content on the Web. The line starts here, gentlemen. No cuts.

Stage #3: Mine has a copyright logo on it!

The idea of copyright is a bit faulty. Anything that comes into existence has its own copyright the instant it is created. Yes, anything. Doodles, writing, sketches, any demonstrations of how humans actually have brains, and are not filled with Jell-O. Copyright feeds off of chronology. If someone created something first, they can have said creation under their name. Let’s not say copyrights are meaningless; it’s just a weak argument if someone says that simply placing the copyright logo on something means it is automatically protected. Under that assumption, these Post-It Notes I have across my computer are protected under federal law, so thieves beware!

The problem at this stage is, intellectual content is hard to protect at any stage. Lawsuits for this sort of thing go on all the time. Our generation is placing more emphasis on truth, in literature, design, and everyday life, probably in retaliation to the variety of cover-ups that have taken place on a global level in the past few years. When it comes down to looking good (at someone else’s expense) or looking a bit threadbare on your own, pick the latter. There’s more room for growth in the expanse of one’s own creativity than there is when following the orbit of someone else. Don’t believe me? Try it yourself. Using Google’s branding, try to come up with something new. Now, how many people will confuse your design with Google itself? The answer is a ridiculously large number I’m not even capable of typing without messing up. When you copy a design, you put yourself at risk of being forgotten. Copyright strikes with a vengeance — the content that is up first is the content that wins. Everyone else gets trampled in the dust. So instead of this depressing theft-talk, let’s turn to…

Branding your creativity

Find things that sync with you. Listen to music that suits your creativity and expand that into your designs. Look for colors that inspire you, shapes that bring you to your knees (Cookie Monster silhouettes, anyone?), and inspirations from the windows of the Internet. You see, inspiration doesn’t fall back on copyright. It falls back on what you want and like; an amalgam of what’s cool to you, and eventually, what’s cool for the rest of us. If you have enough pride in your own work to put it on the Internet, like Gary Brolsma, do it. No one is going to judge what’s “worthy” of the Internet or not. After all, it’s all good in the hood.