Business

How Web Designers Think about Format

Posted in Business, Case Studies, Creative Services, Tech tips and Tricks, Web Development on September 13th, 2011 by Joe Melberg – Be the first to comment

Segmenting

The images below are a pixel-accurate view of the spaces web designers consider when they segment designs.  We segment them so that the first impression is complete at a glance for our ‘least common denominator’ (the lowest supported resolution) but also takes into account a balanced look on larger screens.  Typically, the contemporary trend is to set a fixed-width for the page matching the width of your least common denominator, and all critical content should stay in that width.  Horizontal segments then flow down the screen segmented at the termination points of common screen resolutions.  Depending on the target market’s technological sophistication these points may be different.  In this example, I chose the common practice of supporting 1024 x 768 as the most common low-resolution setting in the general public.  I then added some segments for the next common size up, and have the footer still on screen for our 1080p users.  However a design can be bottomless.

Bottomless?  Does that mean scroll bars?

People are used to scroll bars now.  The more content on the home page, and links to news articles, blog posts, promotional pages, features and other highlighted content that we present the better.  This gives google and other information centered services lots of hooks to our content and pages.  Maximum connectivity of content means maximum web presence and information propagation.  This is also an easy format to update and control.

Now for some examples

Obviously this is a fake design and not intended as a hard guide for your own work which probably diverges creatively (and in good ways) from a lot of web trends.  However usability wise, we should recognize how the amorphous shape of the web browser will re-crop our work constantly, and so we should design from that awareness.  I hope this example helps underscore some of what we discussed as we move forward to better alignment of the existing designs and a fun user experience for your customers.

The three attached images attached show:

1. How the browser space can change between devices. (Click to Enlarge)

How we divide the format

2. How a design can be overlaid on the format-logic of multiple devices.

How Web Designers Design with Segments

3. An isolated design shown at maximum supported resolution.

A Sample Web Design

Get to know WordPress

Posted in Business, Tech tips and Tricks, Web Development on August 1st, 2011 by Joe Melberg – Be the first to comment

Our friend Alex Williams over at Thermal Exposure has put together this excellent guide on using WordPress.  This is a great reference for common WordPress features and the basics of managing your content.  If you are wondering what WordPress is like, or can’t remember how to add a PDF file – then this page should be in your bookmarks.

http://www.thermalexposure.com/2011/08/01/wordpress-new-user-tutorial

 

The Techism Creative Process

Posted in Business, Web Development on April 22nd, 2010 by Joe Melberg – Be the first to comment

Pricing a design phase can be difficult in the early stages because there is a range of services that can be offered and a variety of processes to use.  Before the project is defined, asking for a price on a website is like asking for a price on a car:  It depends what kind of car you want, what warranty, and how soon you want it.   With web design, and creative work in general, this is even more the case.

Techism can loop in an executive team of business experts and MBAs to review your organization’s goals and marketing strategies and then dedicate months to custom-tailoring your message and tying it to market-driven metrics to gauge creative success.  Techism can also just put a page up, slap on your logos and colors, give you the keys and update your creative as time and budget permit in later iterations.   How much to spend on a site design, and when to spend it, will depend on your organization’s internal needs and capabilities – not to mention time and budgets.  Some companies need to spend 100k on their website, and others need to spend 100 dollars.

It’s often too hard when a relationship is new, deciding just what those needs might be.  To start the conversation I find it’s easiest to group typical tasks and capabilities into three easy to understand ranges of creative service to give customers an idea of what’s on the menu.

Process 1:  Strategic Resource

Advantages: Safe, assured, verifiable, smart and effective.

Disadvantages: Slower and more expensive.

Techism’s Strategic design service begins with good marketing.   Your current messaging is reviewed and contrasted against your competitor’s efforts.   A distinctive message is crafted to set you apart from your competitors and fine tuned to produce a creative brief.  This may include short paragraphs exemplifying the tone of your message, colors and themes to use, an identity review, and information about your competitors and their messaging.   This is reviewed until everyone agrees it’s right.  Following the direction established in the brief, an informal set of sketches may be produced demonstrating sample executions of the chosen strategy.   Once there’s a consensus on the general approach and a thumbnail sketch is chosen, it’s on to the comping stage where mockups are presented showcasing the design’s proposed final look with sample content in place.  The approved version is produced and deployed, thereafter its success is measured through tools that gauge important metrics from net promoter scores, retweet rates, online sentiment, and much more.  If desired, lateral efforts involving other mediums may be defined such as direct mail, trade show materials, brochures, facebook and twitter campaigns that all execute the same creative strategy.

In a nutshell:

  • In-depth Research and Analysis
  • Creative Strategy
  • Thumbnails
  • Comps
  • Revision
  • Strategic Review
  • Approval
  • Initial Execution
  • Ongoing Calibration and Promotion
  • Lateral Efforts

Process 2: Creative Resource

Advantages: Fairly quick, range of choices, verifiable, reasonably economic if you know what you want.

Disadvantages: Uncertain, inflexible, arbitrary direction, risk of a trendy but not enduring design, often produces bad UI

A more common approach is to trust your gut and just pick something that you find appealing.   In this workflow a designer will spend a few hours getting familiar with your industry by checking out the competition you name.   A general creative direction will be hashed out over email, in basecamp, or on the phone.   The design is drafted, often picking up and refining themes from your existing materials (logos, brochures, old sites, etc).  Usually three distinct versions are presented, though sometimes a strong creative affinity between designer and customer may produce a winning concept right away.  This is refined until approval and then finally deployed.  Changes to designs produced with this method are fairly common after deployment as real-world data starts coming in.

In a nutshell:

  • Quick Research and Analysis
  • Comps
  • Revision
  • Approval
  • Initial execution
  • Ongoing changes

Process 3: Development Resource

AKA : “Get ‘er did.”

When time and budget are in short supply and a company just needs a site up and running asap, the risks of a poorly calibrated design seem like very distant concerns.  This company often wants it to look “professional” and to “match their stuff”.  The shorted path to execution is favored, often leaving creative direction solely to the discretion of the designer with the reservation that minor tweaks may be necessary after launch.   Creative projects like these are designed “as you go” and may use stock layouts customized with the company’s colors and logo.  Sometimes this has worked very well for customers.  It’s particularly good for website design since web designers often know what the latest and best practices are in website layout and design where most reviewers might have to get up to speed to make informed decisions.

Advantages: Fast.  Cheap.  Assured schedule.  Relies on expertise.

Disadvantages: Inflexible, arbitrary direction, spare, risky, will need follow up.

In a nutshell:

  • Quick and Dirty Research and Analysis
  • Initial execution
  • Ongoing changes

Design Process Summary

Since every creative project is different, every company needs their own process and a good design staff should know how to tailor the process to fit your needs.  It’s unlikely that any of the processes above are perfect, but they do demonstrate the range of creative services that can be found with Techism.   Techism can design your site with contemporary looks and usability from scratch or by customizing a wordpress theme in-place.  We can spend as much time as you want researching, drafting wireframes and thumbnail sketches and using creative briefs to guide the process.  It’s up to you what sort of process you are looking for.

I am Techism and so can you.

Posted in Business on March 27th, 2010 by Joe Melberg – Be the first to comment

For my allies in the war against poor marketing, bad design, and the gulf between customers and companies – I present this list of resources that techism uses and approves in order to get down to business. Have a better resource, suggestions, words of caution? Feel free to comment here.

Project Management: Duh, BaseCamp.

Plus, Techism’s BaseCamp

Invoicing: Freshbooks – integrates with BaseCamp and imports basecamp contacts and projects, is simple to use, attractive and easy to brand. It’s a great resource.

FreshBooks
Techism’s Client-Login

Phone: iPhone 3g – great phone for demonstrating device connectivity for websites, makes great conference calls, and demoing web technology online from a starbucks is a breeze. Add the freshbooks time tracker, basecamp application, and other productivity features – it’s a hard phone to beat for business use – there’s no other option if you are a mac user IMHO.

Apple.com

Phone #: GOOGLE VOICE!!! A FREE dedicated business line that goes anywhere you need it to. Techism’s 206 801 0433 phone number is powered by Google Voice (formerly ‘Grand Central’) This is a 100% FREE service that lets me get my voice mails online, set which number to ring through to, set custom answering messages for different clients, turn it off after business hours, etc. This is the best way to work out a central contact number for business matters. Put this on your cards and it can ring your cell phone but leave you free to change your cell phone number or plan any time you want. Put this on your site and don’t be afraid of having your home number up on a website.

I have used this since it emerged as a beta called “Grand Central” and it’s been a LIFE SAVER. I can turn it off on the weekends and leave a “techism is closed” message (if I ever decide to have a weekend). Clients contracted to me by Steerboard can get a “thank you for calling Joe at Steerboard” message. When I changed my cell number, I didn’t have to tell my clients or worry them over my changing contact info.

I don’t know if this will be free forever, it’s certainly worth paying for.

Google Voice

Fax: Packatel Fax Service – Fax # for around $5 a month. Faxes are emailed to me. Works great, no issues after a year of use. Is a bit basic, has no “inbox” or fancy management capability. It works.

pFax