Website Wireframing

With our final project coming up, I'd thought I'd look up an article on wire-framing. It's called "A Beginner's Guide to Wireframing," by Winnie Lim. It offers these tips:

Get Inspiration: Find inspiration from other wireframe or sites. I  Heart Wireframes is a great source.
Design Your Process: Find the process that works for you. A few examples are: Sketch then Wireframe then Visual then Code; Sketch then Code; or Wireframe then Interactive Prototype then Visual then Code.
Pick Your Tools: Choose the program to create your wireframe. This could be the Adobe programs like Illustrator or Photoshop, or there are available wireframing tools such as Balsamiq, Omnigraffle, or Axure.

Setting a Grid: Define a grid to help you layout and structure you elements.

Determine Layout with Boxes: Begin drawing your wireframe by drawing boxes to represent different types of information. Think about how you want it places and what information is most important.
Define Information Hierarchy With Typography: Next, add the type. Make your information clear and define clear hierarchy.
Fine-tuning With Grayscale: Then add shades of grey to better understand the way the website is going to look.
High-definition Wireframe: This is optional, but if you want you can add even more details like body copy or images.
Translating a Wireframe into a Visual:
Send your wireframe to a program like Photoshop, where you can complete the entire visual.