WEBSITE

Web Design: Where To Start (Part 2)

11/17/2012 3:06:40 PM

Your choice of technology should depend both on the type of site you want to create and the kind of approach that will suit your mentality. Avoid fighting the tide.

Sites can be ‘static’, with fixed HTML pages to structure content and associated CSS for styles, along with linked documents like images; or ‘dynamic’, with pages pieced together from components such as headers, footers and side bars. Dynamic sites rely on a data base of content on your server, usually handled by a content management system (CMS). If such terms strike terror into your heart, be assured that modern CMSs such as WordPress present a very straight forward interface that largely conceals the complexities of data base management, at least for modest sites.

Description: Responsive sites adjust their layouts appropriately for the user’s viewport

Responsive sites adjust their layouts appropriately for the user’s viewport

Another option, and one that’s increasingly spreading from low-end consumer use into professional practice, is working with a customizable hosted platform. For example, social blogging service Tumblr (tumblr.com) is great for short-form text posts and streams of images and can have new themes applied to make each site unique. You can get up and running very quickly, you don’t have to worry about server issues because everything is handled by the service, and you can associate your own domain name (such as thisnameijustbought.com) with your site so that visitors aren’t necessarily aware that it’s anything but an independent entity.

‘It’s not about cheating, just making the most of your time,’ reckons designer, speaker and author Elliot Jay Stocks (elliotjaystocks.com). Offloading aspects of design and content management to third-party systems can make a lot of practical sense. ‘There are many great services out there that save you having to reinvent the wheel. So take advantage of what other shave done and stand on the shoulders of giants, as it were – but try and understand what’s going on under the hood, too.’

That last point is important. Without knowing at least the key aspects of how a system works, you’ll come unstuck when you need to depart from the way it looks and behaves by default. For a personal site, a vanilla theme on a blogging network might be fine, but most projects will demand more.

Note that making good use of others’ work doesn’t mean taking it without permission. It’s all too easy to copy and paste code from the source of existing websites, but copyright applies just like anywhere else, both to the code and to the structure and graphics that make up a site’s appearance, as well as to content such as images and text. Do pinch ideas, but don’t lift designs, unless they’re explicitly offered for free use by their creators. There are plenty of great free themes around, but watch out for rogue sites that offer ‘free everything’ and rip off content from elsewhere on the web; you’ll be liable for any infringement.

Description: WordPress, a hugely popular CMS, lets you pick a theme and go, buy premium themes and frameworks from third parties, or code your own HTML, CSS and PHP, or any combination of the above

WordPress, a hugely popular CMS, lets you pick a theme and go, buy premium themes and frameworks from third parties, or code your own HTML, CSS and PHP, or any combination of the above

A service that offers a great balance of accessibility and flexibility is WordPress, which is easy to get to grips with yet is being used to power even very ambitious sites. ‘It’s amazing what can be achieved quite in the browser, and understanding how gradients can be used with repeating content is one of the rookie mistakes I see over and over again.’

Mist takes up the theme: ‘Apart from getting used to pixels over points, print designers must learn to make allowances for how those pixels are rendered and the quality of their appearance. The mix of browsers and operating systems can throw up varying results in the rendering of type, especially with web fonts. Print designers will have to get used to testing fonts across platforms to make sure they’re happy with the results.’

Anyone who surfs a lot of cutting-edge sites at the moment will notice that while more distinctive typography is quickly emerging, the quality of the results varies conspicuously. Creative decisions won’t over-come problems like choosing a badly hinted font that renders poorly in the browser, or picking a font display solution that doesn’t work equally well across platforms.

As Woods notes, designing pages can’t be separated from designing interactions. ‘Print is a one-way relationship regarding the delivery and consumption of content, but prototyping and wireframing is important for the web. Sites are in a constant process of evolution, changing based on user behaviors and feedback. Think of Facebook as an example: it’s constantly pushing out new iterations and improving the user experience, often in small, subtle ways.’

On the other hand, Boulton, as a former predominantly print-based designer, argues that it’s important not get too hooked up on technology and output, but to focus on the design problem. The evolution of the web means designers previously immersed in more traditional fields shouldn’t feel adrift; in fact, they increasingly have skills that are extremely useful for web design, while web specialists can find their more technical skills rapidly overtaken by progress.

By way of example, Mist explains that the landscape for online type has dramatically changed over the past couple of years: ‘Until recently, setting type online was limiting, with editable text restricted to a handful of “web safe” fonts. Now, services like Typekit provide many more to play with, and you need the skills for balancing and setting type.’ Controls are coarser than those in print layout apps such as Adobe InDesign and QuarkXPress, but there’s still scope for strong, detailed typographic design. ‘Leading, measure, contrast, pairing, hierarchy – all of this is perfectly possible with CSS,’ confirms Boulton. ‘The web is finally a place where you can use the typefaces most appropriate for any given project.’

Description: Web font services such as Adobe’s Typekit make it easy to use a range of typefaces in your sites

Web font services such as Adobe’s Typekit make it easy to use a range of typefaces in your sites

As Mist notes: ‘These are things print designers should excel at, and in fact may well do better than web designers, many of whom have come from a technical back-ground rather than design.’ Woods adds that although online grids for future-proof sites require more flexibility than print equivalents, even here those well-versed in ‘traditional’ design disciplines have an advantage: ‘In my opinion, there has never been a better and more exciting time to move from print to digital design.’

 

 

 

 

Other  
  •  The Download Directory - October 2012 (Part 2)
  •  The Download Directory - October 2012 (Part 1) - KeyboardLock 1.2.4295, Skip Metro Suite 1.0.0
  •  Plug-in Of the Month - November 2012 : Audacity for Windows 2.0.2 RC4, Firefox 15 Beta 5, Comment Blocker
  •  CodeKit Vs LiveReload
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 7) - Temporal Link Growth Measurements
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 6) - Web Traffic Comparison
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 5) - Tracking the Blogosphere, Search Engine Robot Traffic Analysis
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 4) - Rankings, Crawl Errors
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 3) - Measuring the value of a link
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 2) - Search-engine-supplied tools, Third-party link-measuring tools
  •  
    Top 10
    Review : Sigma 24mm f/1.4 DG HSM Art
    Review : Canon EF11-24mm f/4L USM
    Review : Creative Sound Blaster Roar 2
    Review : Philips Fidelio M2L
    Review : Alienware 17 - Dell's Alienware laptops
    Review Smartwatch : Wellograph
    Review : Xiaomi Redmi 2
    Extending LINQ to Objects : Writing a Single Element Operator (part 2) - Building the RandomElement Operator
    Extending LINQ to Objects : Writing a Single Element Operator (part 1) - Building Our Own Last Operator
    3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    VIDEO TUTORIAL
    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8