Collected Wireframes

Floating Call to Action + Menu

How do you keep your CTA button as one of the most visible and important parts of your webpage without having it interfere with the information our end users are after? For this landing and event page, I decided to modify the existing header so that it was “sticky” and followed you as you browsed the website. Opposite of the logo, I placed the CTA in a complementary brand color.

Instead of taking our users to another page, I stick with an in-browser pop-up so that you can submit your information and continue to read after. My goal here is to make the form (which will server as our primary touch point in this landing page) as easy to reach and painless as possible.

To aid client buy-in and confidence, I produced this gray box wire frame so they could see an annotated diagram of how their new page would function.

Presentation Card — Detail

You can learn more about Company X’s landing page by clicking here. On top of the landing page layout, a specific event needed a heavily-detailed card for C-Suite members that would be presenting during the event. How do you fit in that much information without making the page unbearably long?

By adding a small blurb that hit’s their biography’s main points, and adding a secondary “learn more” button that would reveal the entire biography once it was clicked, I was able to respect both the need for a compact, space-conscious website as well as making it clear why each presentor was chosen for their video.

Event Landing Page

You can learn more about Company X’s landing page by clicking here. As part of the exploration phase of creating a landing page layout that can serve as the base for future landing pages, I presented a lo-fi sketch that hit the main needs of my client.

I find that providing something bright and hand-drawn can help clients from getting bogged down in details while you work on the “scaffolding” of their project.

Applications Page

Once a sketch has been made, and the general shape of the webpage blocked in, I move on to creating a higher-quality wireframe with basic Header/Subhead information and placeholder text.

The Applications page specifically was made to hold a lot of high-level information with links to resources and featured products. My goal with this grayscale wireframe was to show how you can break up a lot of information in a way that holds your reader’s interest.

Drop Me a Line

11 + 8 =