Whiteboard to Production

Project: Wireframe and design a new landing page for Legacy’s Lead Generation Program.

 
evolution-header.png
 

 

Wireframing

After identifying and agreeing on the content types, the team began mobile only wireframes to really focus and guide content and information architecture.

mobile group.png
 

As real content was introduced, the wireframes helped determine its evolution. They helped the team visualize the page as a whole and see content come alive. During this phase, tablet and desktop wireframes were introduced.

desktop group.png

 
 

COntent Takes Shape

Several iterations of copy and page structure took place in this phase - still relying heavily on simple, style-free mocks.

content-mocks.png
 
 

 
 

Style & HI-FI Mocks

With content close to the finish line it was time to add corporate styles and images to make mocks ready for stakeholder review.

comp-charts-mock.png
 
 

 
 

Finish line!

Landing page completed. The process also enabled very quick production of a sales sheet and digital display for trade shows.  

Lead-Gen-Group.png