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.
Tablet-sized
Here’s the tablet-sized (portrait orientation) for the wireframe.
- It shows how some main navigation links will have room to appear outside the flyout menu,
- and some of the Grid Area assignments will change,
- and some features of the footer will no longer be hidden.
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.
