Work-In-Progress

I’ll be back to flesh out this UI/UX portfolio page in the near future, as time allows. –Stay Tuned, Kris

Mobile-First Wireframe (for Designer/Developer)


For a website that will list cards of art items for sale, I made wireframes for the usual reasons (to introduce a design, take notes, and make changes).

CSS Grid

For this project I wanted to take advantage of CSS Grid, especially now that browsers have implemented it for a while.

Since I’m used to building sites in CMS platforms like WordPress, and haven’t hand-coded an entire site in a while, I added some columns (the bright aqua-colored lines) to my version of the wireframe. They help me visualize how Grid Areas, nested child grids, and flexbox elements should behave responsively across device sizes.


Mobile-size

That’s also where angled tags come in, to later remind me what I had in mind for semantic HTML elements and grid sizing.

WIREFRAME OF MOBILE WEBSITE CREATED IN INEXPENSIVE WYSIWYG VECTOR EDITOR AND WEBSITE UPLOADER PROGRAM
WIREFRAME OF MOBILE WEBSITE

Tablet-sized

Here’s the tablet-sized (portrait orientation) for the wireframe.

  1. It shows how some main navigation links will have room to appear outside the flyout menu,
  2. and some of the Grid Area assignments will change,
  3. and some features of the footer will no longer be hidden.

WIREFRAME OF TABLET OR DESKTOP WEBSITE CREATED IN INEXPENSIVE WYSIWYG VECTOR EDITOR AND WEBSITE UPLOADER PROGRAM
WIREFRAME OF TABLET OR DESKTOP WEBSITE

People Love These

This 3D device rendering is just a fun visualization to make, and they usually get the most enthusiasm from clients and end users, probably because it’s less abstract and more tangible.

WIREFRAME - MOBILE DEVICE - 3D-SHADOW-1000px
WIREFRAME – MOBILE DEVICE – 3D-SHADOW-1000px