Blog

Thoughts on Website Design

Aug 27th, 2014 by Max Tokman

Disclaimer: this is not an actionable guide on website design.  Just carefully measured thoughts on background and trends of designing for web, a discipline that is entering its third decade.

We all know the humble beginnings of web design - text and image pages of the mid-90s, with minimal typographic control and animated GIFs to keep web pages alive.  At that time there was no such creature as “web designer” - everyone who called themselves that came from traditional print background.  Some had experience in multimedia (CD-ROM) production, but overall it was print-heavy crowd, learned in the art of color separation and reviewing proofs before final run.  Now imagine the dismay of someone trained in finer points of typography having to deal with 256 color web safe palette, a set of web-safe fonts and line spacing as the only typographic controls.  As designers moved into web, the natural choice of preserving finer points of creative was producing text as images.  Flash was a  huge help, as not only did it have extended typography controls, but is also allowed for complex cross browser animation.  And so text-only sites became image-heavy sites, and then they became Flash sites, all the while remaining hardcoded front-end only websites where every update required HTML and Flash developer.  Wed designer did have control of the website appearance, but it was achieved using inefficient methods of presenting content as images or Flash movies, conflicting with SEO and business goals of increasing website visibility.

The next phase of web development came at the turn of the century, with content control being taken away from front end coders and placed in the hands of content managers via Content Management Systems (CMS).  This allowed businesses to reduce maintenance costs as there was no longer a need to maintain technical staff to make regular website updates; CMS and associated What You See Is What You Get (WYSIWYG) text editors allowed maintaining websites without knowledge of HTML, which meant a more basic skill level and less expenses.  That presented a new challenge in web design: as skilled front end developers were no longer in the picture, task of maintaining brand consistency on the website was left to in house marketing teams and agencies who did not necessarily  have the expertise in technical matters.  The web designer, having just learned to establish a tenuous working relationship with front end HTML and Flash developers, was now left to deal with content managers changing content using WYSIWYG controls and marketing departments uploading print-quality images at 300 dpi.  Fortunately, CMS allowed web designers themselves to step in and assume control over website’s appearance.  However, the conflict between creative and SEO goals continued, as Flash and images did not offer same search results as live text and type control remained limited.  In addition, the brave new world of mobile required creating parallel mobile website in addition to main desktop website, and those mobile sites - well, they were quite a throwback in terms of supported content, screen size and bandwidth.  So while there was a lot more creative freedom on desktop, mobile design presented another unique set of challenges.

The overwhelming problem tin website design throughout that period was that designers were thinking of websites as online brochures, a collection of pages and screens that could be designed with all the freedom allowed by Photoshop, Illustrator and other design programs.  What was in fact happening is that websites were turning from pages into software, not just presenting information but also collecting it, processing it, giving website managers real-time and historic feedback on website’s performance and going even further in initiating customer contact.  Web design was turning into skinning software while designers themselves were still thinking in terms of defining websites through layouts and having their vision executed by web developers.  The contention between technical and creative aspects of building  websites grew from agencies having much easier time selling clients on branding and creative rather than technical expertise, which appeared to be turning into commodity.  In essence, online software projects were being sold based on their looks and then built around idea and visuals, with complex web programming to accommodate screens that would’ve looked a lot better in print.

Now, the transition from print to another medium is nothing new and broadcast, gaming and others presented their own sets of challenges.  What was unique about website design was how quickly the medium itself was changing in terms of hardware, programming languages, browser versions and content support.  As soon as Flash became dominant in delivering precise animations and typography the iPhone came out, followed by tablets which sealed the fate of Flash as technology without a future, living out its days as support for existing websites and banner ads animations.  Just as desktop and mobile process was getting properly finalized, responsive design threw a huge monkey wrench in the process, providing a much more efficient way to build websites to address multiple platforms but forcing web designers to learn completely new approaches for preparing creative.  The constant need to change design approaches driven by technical changes in the web medium can be a welcome thing for certain types but can also cause a lot of frustrations for professionals with years of experience in web, multimedia, and traditional print.

That feeling of frustration can be overcome if you consider web design as it stands right now and where it will be going as web 3.0.  Already, the move into cloud hosting and software is creating a throwback to the 80s and earlier, when our computers were nothing more than terminals presenting information being processed on the mainframe.  That’s what the cloud is and unless economics of software sales and hardware manufacturing change drastically, cloud and terminal / mainframe configuration are here to stay for some time.  With cloud, more services and applications are moving from website code and becoming server-side tools that are utilized as needed during construction and running on the website.  WordPress and Drupal frameworks started the process of giving web designers and developers a set of core builds and modules, tools for quickly and efficiently create simple sites; cloud-based tools continue on that path, with website components becoming even more of plugins.

What that all means is that website design is continuously moving away toward animated layouts and into realm of designing for cloud-based software.  To keep working in the medium and maintain your sanity, web designers should accept the fact that they are presenting software skins, not interactive pages to be executed with HTML and CSS code; and those software skins represent existing building blocks that can be turned on and off to implement specific business processes, whether it’s sharing information with customers, collecting information from customers, or providing complex tools such as ecommerce.   As that mental hurdle is cleared, make a decision on web technology which you are comfortable working with in the long run.  As Drupal and WordPress developers, we always tell people that PHP-based frameworks are greatest thing since sliced bread, which is certainly true for us.  If you work at an agency that uses Sharepoint or proprietary CMS, those might be your choice of technology.  The point being, selected technology is both empowering and limiting for web designers, as it defines the rules within which web-based software, i.e. large online projects, can be branded and stylized.  Learning those technical possibilities and constraints is not instantaneous and is best accomplished as ongoing conversation with technologists and your own research until technology is just another tool in your web design arsenal.  Once you have that tool in place, you have complete freedom in designing for web as options and limits of selected technology will define your work on gut level, without the need to continuously bounce back between designs and technical research on their feasibility.   Just as there are no jack of all trades web developers  knowing every programming language under the sun, so there’s no need for you as web designer to be familiar with every major web development framework in existence - make your technology choices, learn to use your them as guides and tools, and focus on what you do best, efficient and beautiful visual communication.

Categories:

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Sep 3rd, 2014 by Max Tokman

We are very excited to be recognized by 2014 Interactive Media Awards as Best in Class for our work on Quorumfcu.org in collaboration with our immensely talented creative partners, Adventure House. The goal of this project was turning an older desktop-only website into a fully responsive website supporting multip...

Aug 25th, 2014 by Max Tokman

When we talk about WordPress, Drupal, Joomla and other popular frameworks, it is almost implied that framework is a toolkit that provides building blocks for web site construction. To some extent, that’s true - frameworks do allow you to quickly create sites based on existing themes and modules. The approach for ...