PRODUCT CATEGORY
UI UX Design
The objective was to build a new website across all 5 brands of the company. Sim Frame was the first. I was given very little specification other than to take bits of various competitors website. I needed a wire-frame created quickly. So with very little information I created a UI UX document to plan for future SEO content, better photography and, on my insistence, better responsive code. My abilities as a UI UX Designer was tested as I had very little time to plan for unforeseeable issues.
In the end BOOSTRAP saved the day. It enabled me to code and experiment UI configurations rapidly as working prototypes.
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/e5c84da3-f7af-4806-982f-d05bd5e354eb_rw_1920.jpg?h=3919953a29c4360a258c2433f50746e0)
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/411668b0-0115-40c9-a4cd-f201d6aba640_rw_1200.jpg?h=94980f12f2741e5592effdf8f59f62eb)
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/3bbe47fa-a1b0-4d07-b80e-acbde1b47834_rw_1200.jpg?h=1fa519738b4bb36395e7ebc2958c6bef)
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/a74ab0d3-f455-4da7-837d-a70c38641e97_rw_1200.jpg?h=9087b29d0971f937a8892993f7fe573f)
PRODUCT CATEGORY PAGE
UI Design, coding & photography
UI Design, coding & photography
This was a working, responsive frame category page that was designed and coded within an hour.
I wanted to build a working prototype to demonstrate using large image formats would generate a visually engaging online environment. Using just HTML and CSS, the execution was very simple, but the impact on desktop and mobile devices is huge.
I chose to use minimal text to provide the clean look that is trendy these days.
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/38d75943-3627-49bc-9f7f-e5c911ff0615_rw_1200.png?h=0329980ba08ba8abd868e247891b94c5)
PRODUCT DESCRIPTION PAGE
UI Design, coding & photography
UI Design, coding & photography
Selling prints is very much a visual exercise; customers want to see, even imaging, what their photos would look like on. This Product Description Page (PDP) illustrates my approach to a displaying a visually striking.
Once again, this page was ultimately a fully functioning responsive prototype.
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/52a17749-dac1-4382-9ec4-3ea24ffa68f9_rw_1920.png?h=0dfb235d319ea9b4d3bad42bae279762)
PRODUCT DESCRIPTION PAGE
UI Design, coding & photography
UI Design, coding & photography
This concept was very early on in the UI stage. Based on my original wire-frames, some of those ideas are illustrated here.
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/61ee91c3-43ec-41e8-add3-e7e82a35d033_rw_1920.jpg?h=2a2915cff14522922783655b92037c6e)
CATEGORY PAGE. FINAL.
UI Design, coding & photography
UI Design, coding & photography
After much discussion with management, the UI wire-frame was abandoned for a more traditional category page layout.
Using key images, a header and description this page serves its purpose well.
The page is also very easy to maintain and update because of the CSS Boostrap foundations.
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/ed7257df-6b60-4b7e-9547-cf86f2f7d683_rw_1920.jpg?h=8181c9411116073c761e66c1a00e3a35)
PHOTOGRAPHERS CONTRIBUTORS PAGE
![](https://cdn.myportfolio.com/81efce8e69f5dabea5c24d2a358f078c/8c503de4-af3e-4b66-8773-a90f8225af69_rw_1200.png?h=be1c9da17684125a4f73bc8b34b38788)