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).
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.
That’s also where angled tags come in, to later remind me what I had in mind for semantic HTML elements and grid sizing.
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.