Gibson Guitar Product Page

screenshot of a product feaute page for gibson guitar with image of a les paul guitar

This web concept is a for a Gibson Guitar product feature page. The interface mockup displays information about the guitar, a product image, and an option to purchase. I designed and developed the content, layout, and look and feel. I used Sketch to create the mockup.

Music Application

screenshot of a music app with three screens displaying layout and content

The mobile application concept is a Music App. The interface mockups display the content, how to navigate and select a playlist, and displays the current song selection.
I designed and developed the content, layout, and look and feel. I used Sketch to create the mockups.

Travel Application

screenshot of a travel app woth three screens displaying layout and content

The mobile application concept is a Travel App. The interface mockups display the content, and how to navigate and purchase a travel activity.
I designed and developed the content, layout, and look and feel. I used Sketch to create the mockups.

UI Inspiration

image of UI movement landing page

I reference many web sites for UI inspiration and have featured one of my favorite, UI Movement. The site features the best UI designs – every day!
The main difference between UI Movement and other design inspiration sites, is that UI Movement focuses exclusively on UI designs. Check it out!

I am currently in progress on the Udemy Modern React with Redux course

Learn to master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks.

    What’s covered in the course
  • Build amazing single page applications with React JS and Redux
  • Master fundamental concepts behind structuring Redux applications
  • Build composable components
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Link to the course

Rebuilding the card component with CSS Grid

I have rebuilt the card component using CSS Grid. CSS Grid is the ultimate tool for your layout. Though Flex Box is awesome, it does have it’s limitations and only allows you to edit on one axis at a time. Where CSS Grid gives you greater control over your layout and allows you to work on two axis (columns and rows) simultaneously, on a single DIV. CSS Grid allows us to flatten the markup and design our pages using a grid system. Which opens up new layout possibilities!
See the prototype example with the updated CSS Grid here. Resize the web browser to see the flex in action!

Card component prototype using “flex-basis”

Completed an exercise using “flex-basis” and “flex-direction” to create a card component. Using flex basis helps control the size of the image based on the flex direction which is really helpful with the layout when creating a component for mobile and larger screen sizes.
See the prototype example here. Resize the web browser to see the flex in action!