Codecademy Logo

Wireframes

Wireframe

A wireframe is a low-fidelity representation of a digital interface that defines the content layout and page elements.

Side-by-side comparison of the Codecademy homepage depicted as a wireframe versus the actual Codecademy homepage.

Information Architecture

Information Architecture is the organization and presentation of valuable information within a digital interface.

A site map being built by a construction crew. The homepage in this example is at the top of the site map and encompasses the catalog, resources, and community pages. Challenges, articles, videos, and projects are sub-pages under the resources page. Forums, chat, and stories are sub-pages under the community page.

Wireframe Elements

Wireframe elements are placeholders for high-fidelity elements and should be represented as simply as possible.

Common representation of low-fidelity wireframe elements: navigation, link, scrollbar, notification, button, search field, drop-down menu, image, check box, text field, radio button, video, pagination.

User Workflows

User workflows are a visual representation of the paths users take within a digital interface.

Sketching

Sketching a wireframe with pen and paper can be a quick, easy, and cost-effective method to iterate faster towards a solution. Pen and paper facilitates an approach focused on creating a functional, intuitive and efficient interface.

Stakeholder Communication

Effectively communicating the purpose of the wireframe and how it is informed by Information Architecture is imperative for stakeholders and developers to be on the same page.

Digital Tools

Digital tools provide the ability to transition from low-fidelity mockups to functional prototypes because initial work and design ideation has been established on a digital platform.

A screenshot of the workspace used to create wireframes and prototypes in the digital design tool, Figma.
Previous
Next

Learn more on Codecademy