Wireframes & Graphical Mockups

Now it’s time to bring the strategy alive in a visual design that effectively engages students, parents, alumni and faculty across devices.  At Beacon, all of our Higher Education websites are built with a responsive design, which starts with multiple wireframes to represent each page on each device.  Think of wireframes as the skeleton and mockups are as the skin.

Wireframes are the first step in moving from the Site Map to a more visual representation and accomplishes the following:

    • Allows features and navigation to be clarified visually, rather than describing it using technical language like “light box” or “impact image”, for example.

    • Brings usability front-and-center with respect to the placement of various features.

    • Helps identify & functionality of the technical components that will be handled by the CMS.

    • Facilitates valuable early collaboration and feedback, without huge technical investment, further expediting the process.

    • Drives the focus toward functionality, content, navigation, organization without considering the colors, images and creative elements.

    • Ensures graceful transition of features and functionality among devices without sacrificing usability and goals.


Beacon's wireframes include navigation components (global, local, topic, utility), footers, breadcrumbs, filters, widgets and/or related links, as needed.  We will also begin indicating the patterns of navigation here as well, such as tabs, megamenus, carousels, accordions and other options. 

After several design-review cycles (and client approval), graphical mockups take the wireframes to the next level by incorporating visual richness through color, photography, typography and iconography that maintains the brand throughout all the various designs.  All the planning, strategy, structuring and content must be carefully & professionally wrapped to draw in prospective students.  Stakeholder’s eyes begin to light up as graphical mockups bring all the underlying work together toward a more finished product.  Everyone gets to see the calls to action and evaluate them as “engagement” features.  Mockups will help reveal problems that may not have been apparent in the wireframes (e.g. color clashes, font size problems, etc.).  But here’s the rub… there’s a level of subjectivity, such that Stakeholders will react differently to graphical components.  So open and honest collaboration is important.

Free Design Audit for Higher Ed

* Required

High Ed HH Info about Beacon