Step 2: Design
Now that you have identified your strategy, you can begin designing your website.
While you may be tempted to just jump right into coding, you will work more effectively and efficiently if you plan ahead using a framework for design. Just like a good engineer would not start hammering boards of wood together without a blueprint, a good website designer should not start creating web pages without first establishing the scope, structure, skeleton, and surface planes* of the website.
*This framework of design planes borrowed from J.J. Garrett's The Elements of User Experience, Second Edition: User-Centered Design for the Web and Beyond.
Scope
In the scope plane, you answer the question: "What is my website actually going to do?" In answering this question, you should also determine what your website is not going to do, taking into consideration the purpose and constraints of your project.
After you answer this important question, you should determine two sets of requirements:
1. Functional specifications. What will the system allow or direct users to do? Will your system allow users to purchase products? Will your system display a blog thread that allows users to comment? Focus more on the "what" than the "how" this stage. As you write out your specifications, Be Positive, Be Specific, and Avoid Subjective Language. Your specifications should be clear and concrete enough that an outside person knows what you want.
2. Content requirements. What content does your website need to provide to the user? Do you need images, videos, audio, web copy? Identifying content requirements earlier on will enable you to plan how and when you will collect and incorporate this content.
Structure
In the structure plane, you determine the conceptual structure for your website. How will you organize, group, and order your website so that users can access and interact with your content? To answer this question, consider how your user may possibly behave and respond when encountering your content.
To organize the information you provide on the site, determine your organizing principles: What are your users' and objective's values, and how can you organize information to reflect those? Also determine your architectural approach: How do you plan to connect different pieces of information together across a site? For example, many websites uses a hierarchical structure that starts with a "parent node" that branches out to other, related pieces of information.
Skeleton
In the skeleton plane, you determine the individual, functional components of the website and how they all connect together. Where are your buttons going to be, how will they function, and where will they lead? How and where will links connect to one another to provide a logical navigation experience? These are just some of the specific components you'll have to consider as you plan your skeleton.
A wireframe is an efficient way to plan out your layout. A wireframe is like a simple blueprint for your website. Wireframes help you identify and organize all of the elements discussed so far, including functional specifications, navigation design, and informational components.
Image Source: Garret, J.J., The Elements of User Experience. New Riders, December 16 2010.
Surface
In the surface plane, you determine how you are going to present your website visually. While aesthetics should be pleasing and create a brand image, you should also be concerned with how your visual design supports (or detracts from) the user experience. Ultimately, visual design will draw users' attention to particular areas and guide their decision-making.
Follow the four principles of design, known as the CRAP principles:
Contrast: Use contrasting color, size, weight, and styles to create hierarchy and highlight certain areas or features. Tip: Do not use too many different colors, sizes, and so on, or your design will quickly become messy. Remember the two-font rule: Try not to use more than two fonts, and if you do, make sure they're very different.
Repetition: Repeat elements such as colors, images, fonts, and so on to create coherency and consistency.
Alignment: Use alignment to create order, organization, and consistency across the page. Tip: Generally text is easier to read when its left-aligned (in other words, think carefully about when and why to use center-aligned content).
Proximity: Use proximity to create relationships between information on the page. Put related items closer together.