Stage 1
The client puts out a Request For Proposal (RFP).
Definition: A Request For Proposal (RFP) is a solicitation, often made through a bidding process, by an agency or company interested in procurement of a commodity, service or valuable asset, to potential suppliers to submit business proposals.1
The designer (and team) begin to research the client and assess the current site so they can create a proposal. Proposals should include, but are not limited to:
- Reiterate what the client needs.
- Alternate options/ideas of what you will do for the client.
- An estimate, both for time and cost, based on each option provided.
- A timeline indicating milestones, key dates, etc.
You'll then create a presentation with all the above info. It's also nice (but not necessary) to include your background, initial impressions of the site, and what you hope to accomplish.
Get the Job!
Next Steps
Once you get the work, a Statement of Work (SOW) should be put together.
Definition: A statement of work (SOW) is a formal document that captures and defines the work activities, deliverables, and timeline a vendor must execute in performance of specified work for a client. The SOW usually includes detailed requirements and pricing, with standard regulatory and governance terms and conditions.2
This should include:
- Your understanding of the project and your recommendations.
- Scope of work to be done; be clear on the number of pages so that if it increases, it's clear that the estimate will be effected.
Continue to educate yourself and your team about your client, its audience and competitors, but proceed with caution! At this stage, minimal time should be spent on the project - only complete necessary items to obtain the client. Until you have agreeable terms and signed documents, no design work should be completed.
Stage 2
Kick-off Meeting
- Discuss goals, target audience and site needs.
- Talk about technical requirements.
- Further assess the current site if necessary.
- Find out about your client's design preferences.
- Get a list of the client's favorite sites and inspiration.
- Adjectives of what the client wants to achieve.
Pre-Production
- Conduct market research - find out what your clients don't know about their audience.
- Competitive analysis
- User Interviews - talk to users about their experience with current site and ideal site, what's important to them, aesthetic preferences, etc.
- Begin Information Architecture (IA) research and create site organization.
- Create a sitemap and user flow (these are not the same).
- Design Sketches
Before you begin designing, think about the client's Identity/Branding:
- Will it remain the same?
- Do they have a style guide?
- Has it been scoped to update it?
Stage 3
Website Design
- Begin Wireframes
- Content development from Client and Producer
- Design 2-4 creative design directions with homepage, subpage and content/detail page.
- Present to client to choose design direction
- Revisions
- Design Approvals
- Screen Development
- Design Approvals
- Graphics Production
- Final Design Approvals
- CSS/HTML Programming
- Backend CMS Programming
- Site Approvals throughout this process
- Testing
- Quality Assurance (QA)
- Site goes LIVE!
References:
http://en.wikipedia.org/wiki/Request_for_proposal
http://en.wikipedia.org/wiki/Statement_of_work
Web Trends
- Use of large photos
- Black & White
- Minimal content on homepage
- Responsive
- Parallax
- Single page sites
- Blogs
Read about original and innovative web layouts.
Responsive Design
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones.
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
- The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
- Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.1
Examples can be seen here, here, and here.
Parallax
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.2
See some parallax sites here, here, and here.
Single-page Website
A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although modern web technologies (such as those included in the HTML5 pushState() API) can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.3
See a gallery of single-page sites here.
Blogs
Not every blog needs to look like a blog!
A blog needs a solid visual structure and a clear hierarchy of site elements. Make sure to take a close look at headers, footers, comment-areas, site structure and other site elements.
Some free blogging platforms worth looking at are mentioned in this list of The 10 Best Blogging Platforms.
Design Styles
Clean / Minimalist
"Using less to achieve more than the sum of the parts - that is the goal".
- The design is reduced to the most essential elements
- Less is more
- Use only elements necessary to the design
- Take things away until nothing else can be removed
- Can be challenging to design
Examples can be seen here, here, and here.
Smashing Magazine Minimalist
Retro / Vintage
See the elements that make up this design style. More can be seen here.
Distressed / Grunge Style
- Dirty look with misaligned elements and textures
- Sometimes considered ugly
- Many music/rock sites use this style
See examples here, here, and here.
Sketchy / Hand Drawn / Illustration
Designs have always been drawn by hand first. Incorporating these sketches in the design can help to create a more individual look and add personality.
See some examples here and here.
More inspiration can be found here or take a look at some of the links on the resources page.
"Simply put, your brand is your promise to your customer. It tells them what they can expect from your products and services, and it differentiates your offering from your competitors. Your brand is derived from who you are, who you want to be and who people perceive you to be."1
Why is good branding so important?
Read some articles from:
NY Times
Forbes
Strategy
See some logo redesign comparisons:
Big Brand Logo Redesigns
Google
Know your Client!
Questions to consider when assessing a Client's brand identity:
- Do they already have a brand or a style guide you need to follow?
- Can you update or change anything?
- Are you proposing a new new logo or a refresh of the old one?
- What is the company's personality?
- What are their goals, mission, essence, identity and positioning?
- How does the target audience influence your choices?
- How do the above questions inform your choice of typography? Color? Image style and selection?
Tip!
Always begin with sketching out some ideas...
Then take a few and develop them further, by using Illustrator or Photoshop...
Continue to work the design while getting feedback from the client until you develop a finished piece.
References:
http://www.entrepreneur.com/article/77408
Flow Charts vs. Sitemaps
“Flow charts attempt to visualize a process, usually centered around a specific task or function. For web-based processes, flow charts often represent a series of screens that collect and display information to the users. [This is] also known as flows, user flows, process charts.
What separates a flow from a site map is that in the former, time is the defining factor. The relationships between the steps are sequential, not structural or hierarchical. While sitemaps capture an information structure that may or may not match the user’s experience of the site, a flow chart defines a process from beginning to end.”1
A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.2
A flowchart is a type of diagram that represents an algorithm, workflow or process, showing the steps as boxes of various kinds, and their order by connecting them with arrows. This diagrammatic representation illustrates a solution model to a given problem. Flowcharts are used in analyzing, designing, documenting or managing a process or program in various fields.3
Articles:
Smashing Magazine
ConversionXL
Medium
sitemaps.org
References:
https://twobenches.wordpress.com/2008/06/13/flow-charts/
http://en.wikipedia.org/wiki/Site_map
http://en.wikipedia.org/wiki/Flowchart
