eSites Network Website Design


Design It to Build It

What to Consider When Designing for the Web

Okay, so I’m getting to the point with CSS that I can usually design and create everything in the browser — I can’t remember the last time I sliced up a Photoshop layout and layer comped my sprites. For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas for creation. When it comes to the actual construction of the site, the only things I really take from the mockup is anything that I can’t create with CSS, the rest is just a map to guide me.

Think Differently

For years the process of designing a website using a Photoshop, Fireworks, Illustrator or any other graphics application was to mock it up, make sure everything looked perfect, then slice it up into pieces and put it back together — like a puzzle. CSS has basically made this process obsolete, you can accomplish so many things via CSS that you could only previously do in Photoshop. And with CSS3 even more things are possible.

Because designing in the browser is now more viable, it’s important to consider a few things when designing realistic mockups that will make the construction of the web site quicker and easier.

  • Realistic fonts
  • Image-less Buttons
  • Display size(s)
  • Images
  • What can be done with CSS?
  • Is it possible?

Realistic Fonts

There is a countless number of really great fonts floating around out there on the web and we all want to make an impact or statement with some amazing font we have found. But part of web design is designing for the user and making sure all typography on the page is readable and accessible. Before designing, consider what fonts are either web safe or feasible on the web and try to avoid fonts that will be difficult to recreate through HTML/CSS/JS.

Image-less Buttons

Buttons can be the bane of a developer’s existence. It’s a good idea to design buttons that can be created using CSS or Javascript. There are a lot of benefits for this: live text, adaptable buttons, no images to load, no more button sprites and no more size specific background images to mess with. Image-less buttons can save huge amounts of time in development, so before you create some super fantastic button in Photoshop consider whether its super fantastical design can be achieved in CSS, if so go for it, if not, buy your developer a couple of large pizzas and a case of Red Bull.

Display Size(s)

With so many different sizes of displays from 320×480 to 2560×1440 you’ll need to consider how you are gonna figure out how your design will be rendered in many different sizes. Responsive design is a tricky beast so to simplify the process of design, ask yourself these questions before you begin:
  • Who’s the audience, are they mobile?
  • Is the content centered or left justified?
  • Will it need to be responsive?
Not all sites will be used for smaller mobile devices, but it’s a great idea to consider how the site will represented in the standard 1024×720 all the way up to 2560×1440, and you may even need consider how your design will be viewed both horizontally and vertically. But the most important thing to remember is that the design needs to be feasible for the web — avoid horizontal scroll bars!


No more slices and no more puzzle pieces. With any standard web site the only real images you need are a logo image, maybe a repeated background image for texture and any inline content images. In most cases, anything that used to require an image slice now can be created with CSS. CSS gradients, rounded corners, transformations, and a countless number of other CSS selectors can be used to recreate these types of images.

Can it be done with CSS?

As you are joyfully creating a masterpiece in Photoshop, just ask yourself if all of the elements can be created with CSS. CSS is a very powerful tool and surprisingly, most design elements that are created in Photoshop can be easily replicated using it. Before you start cutting out images, buttons, rules, or anything else out of your design try to figure out if you can create them in CSS first. This can make development so much easier and more dynamic in the long run. Some elements in your design may never be able to be recreated with CSS so try to keep these elements to a minimum.

Is it possible?

Don’t design some super huge, intricate background image that needs to be sliced in forty different pieces just to be able to load quickly. Don’t design a site that is 1280 pixels wide. Don’t design a site that is not feasible for the web. Get familiar with display sizes, image limitations, file limitations and just general limitations of the web.

The web is a pretty open and flexible place and you can pretty much create anything you want, but there are some natural restrictions that you need to consider before you start designing. Just make sure you’re not trying to create something that can’t be built. If you don’t know what development limitations there are it’s a good idea to code up a site every once in while so that you can get familiar with what can and can’t be done on the web. My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.

You can always change it

One huge thing to consider when designing for the web is that you can always change it. The web is super easy to update, you’re essentially only an upload away from chaining anything about your design. Don’t spend so much time sitting in front of Photoshop trying to perfect the design. Consider the web as an editable canvas, it’s not rigid like print design where you have to make sure everything is pixel perfect when you send it off to the printers.

The bottom line is that you are designing for the web. In as much as we think print design is the same as web design — it’s not. It has its own set of problems and its own set of limitations so its best to get familiar with them and get familiar with what can be accomplished via HTML/CSS/Javascript code. And just for giggles, try designing a building a website without ever opening Photoshop, I think you will be surprised at what can be accomplished when designed solely in the browser!

Importance of a logo in the digital age

eSites Network - eVolve Your BusinessClients know what you do. But do they know who you are?

The importance of social media is undeniable. Most companies have come to understand it is beneficial to embrace this shift in how they advertise and market themselves, therefore are using Twitter to introduce their business to the social media landscape.

Twitter poses one straightforward question; ‘What are you doing?’

Of course what you are doing as a company says a lot about who you are. However, in terms of updates, this can be answered hourly and in a multitude of ways – as a result the overall quality of your image could be confused by the quantity and variety of Tweets.

Furthermore, the impression left to potential and existing customers becomes harder to control and monitor. For example: your helpful responses to criticisms leaving negative impact instead of doing any good, or the desire to convey yourself as ‘human’ with a few personal Tweets accidentally damaging your professional identity.

So although it is most definitely a phenomenon we encourage our clients to be a part of, using social media does not ultimately serve to produce a clear, concise, and memorable image of your business. And isn't that what you strive most to achieve?

That’s where your logo comes in.

Think of your brand as your stamp and your logo as the mark left from it.
Think of Twitter as a place to share information and build relationships.
By definition Twitter is a social networking site; it is crucial to grasp the meaning of the social bit. Not everything will be read by everyone. Not everything will be remembered. Not everything you say will be taken seriously. Whereas, it is decided immediately that you are as serious about your logo as you are about your business.

How seriously does it appear you take your business if your logo looks like an MS Paint creation?

“Which came first, the logo or the brand?”

Reputation + Company Name & Logo = Brand.

We often deal with clients who dismiss the function of a logo by arguing “it is not the brand.” The simplest response to this is, because your logo has the ability to damage your brand, it should be dealt with as a tangible segment of your brand.

Your brand sets expectations of your company, and your logo is the first part of your brand a client visiting your website sees. If they remember only one piece information from your site, it will be your logo.

Therefore apathetically viewing the logo as merely a ‘space filler’ means you are losing out on using it to your business’ full advantage. An amateur logo undermines your professional credibility, no matter how good your service and website are. A weak logo or weak name undermines company strengths.

Think of a poor logo as the equivalent of turning up in your gym clothes to sell a costumer a product. You wouldn't dream of it. Unless of course you’re selling gym equipment.

For businesses looking to promote changes and attract new customers, reinvention in terms of a website design may not be enough. As your company evolves, you want your image to grow with it. If you want your brand to develop, your logo is an important weapon in your strategy.

A strong logo is an instant visual representation of who you are. It encapsulates and amplifies your corporate image. It attracts the target audience. Look at your current logo and ask yourself: is the best vision you have of your brand emphasised in your logo?

If your answer is no, you are suffering and it’s time to reconsider.