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
My name is Amanda Lasser and I'm a UX Designer. I've been in the industry for about 8+ years. I have experience in everything from working at boutique design firms, large and small advertising agencies as well as corporate agencies.
I've designed for both print and web, and when I started out I always imagined myself working at a magazine designing the layouts.
Prior to transitioning to User Experience (UX) Design and joining BlueMetal, I worked at Macys.com as an Interactive Designer and was responsible for the design of various sitelets, tablet, and mobile apps for all of Macy's corporate campaigns and special events.
Before all of this, I did my undergrad at Michigan State University and received a BFA in Graphic Design. Upon graduating I moved to Chicago and worked for a year before moving to London to continue my education at Central Saint Martins College of Art and Design. While living in London I was able to intern at 2 different magazines which is where my love for typography began.
After London I moved to New York where I got my Master's in Communication Design from Pratt Institute and I've been living and working here ever since. While working professionally, I have always been involved with continuing education, and along the way I discovered User Experience Design and it was love at first sight!! After that I did everything in my power to learn everything I could so that I could make the transition.
And here we are today...
The Internet was created in the 1960's as a result of a collaboration of scientists and researchers in education and the United States government. It started out as a military defense project because the government needed a way to protect and secure all their information.
The first recorded description of the social interactions that could be enabled through networking was a series of memos written by J.C.R. Licklider of MIT in August 1962 discussing his "Galactic Network" concept. He envisioned a globally interconnected set of computers through which everyone could quickly access data and programs from any site. In spirit, the concept was very much like the Internet of today. Licklider was the first head of the computer research program at DARPA, starting in October 1962. While at DARPA he convinced his successors of the importance of this networking concept.1
Widespread development of LANS (local area network), PCs and workstations in the 1980s allowed the Internet to flourish. Ethernet technology, which was developed by Bob Metcalfe at Xerox PARC in 1973, and is most likely the dominant network technology used today.
In March 1989, Tim Berners-Lee, a computer scientist working at the European Particle Physics Laboratory CERN, made a proposal for an information management system.
In October 1990, Tim had specified the three fundamental technologies that remain the foundation of today’s Web, and are likely to see in parts of your Web browser:
- HTML - HyperText Markup Language: The publishing format for the Web, including the ability to format documents and link to other documents and resources.
- URI - Uniform Resource Identifier: A kind of “address” that is unique to each resource on the Web.
- HTTP - Hypertext Transfer Protocol: Allows for the retrieval of linked resources from across the Web.
In April 1993, CERN announced that the World Wide Web technology would be available for anyone to use on a royalty-free basis.
The Internet today is a widespread information infrastructure and has changed the world by becoming one of the most powerful communication tools the world has ever known. Its history is complex and involves many aspects. Its influence reaches not only to the technical fields of computer communications, but throughout society as we move toward the increasing use of online tools to accomplish electronic commerce, information acquisition, and community operations.
The Web has fundamentally altered the way we teach and learn, buy and sell, inform and are informed, agree and disagree, share and collaborate, meet and love, and tackle problems ranging from putting food on our tables to curing cancer.2
More about Tim Berners-Lee
Servers
All content, including text, images and graphics, audio and video, live on a computer or series of servers, called a server.
You find that information on the server, and pull it over the Internet using the web and a browser to your computer. Your computer is often called a “client server.”
Terms and Concepts
IP addresses
Every computer has an address, called an IP number. It is a series of numbers. Your computer has an IP number.
Domain name or URL (Uniform Resource Locator)
This is the address for a particular web site. Since words are easier to remember than a series of numbers, a commission assigns words a specific IP address. So when you type in www.site.com you go to the IP address assigned to ‘site.’ This is the hosting server with files, information, or web sites. It is easy to find out what your IP address is. Use this site and see what information you can find. http://whatismyipaddress.com/ip-lookup
Most servers are powerful computers commonly stored on shelves at an Internet Service Provider (ISP), and continually connected to the Internet. Places with large numbers (hundreds or thousands) of servers are sometimes called server farms.
Client Server
This is your computer, or any computer accessing the Internet.
Cookies
Cookies are identification tags which tell the server where you are, so it knows where to send the information you want. In order to participate in chats, forums, purchase online or engage in other interactivity, you have to tell the server where you are - cookies do this.
You should know, when you make a comment in an online chat, you provide your IP address to the host server. So even though you may not sign your real name to a comment, for example, if the people managing the host server wanted to track down a particular comment to a particular IP address, they could. Thus, your “anonymous” comment is far from anonymous.
