I love being creative. When I was a kid I was an actress, I would draw cartoon characters on my notebooks, I wrote poetry. As I got older I transferred that creativity to my fashion, I got into filmmaking and now designing web pages. I have an eye for making things look good and I thoroughly enjoy it.
With that said being creative takes a lot of time and can be draining, it takes me long finding the right colors, the right layout, making product images, thinking about the best way to display the content and the features etc etc. but once the final product is together I love what I created.
Now as I told you I bartered my design skills with another woman in the program who was an engineer. She would code what I designed for my Theme and I would design her wireframes for her to code.
Per usual Shopify supplied us with resources to read and watch but I had already completed my design before phase 3 began 😂. I did redo it and made it a little tighter and neater but I spent most of this time designing Monica’s wireframe. I’ll share my design and explain the idea behind it.
For my design I wanted to create a theme for the Fashion, Food and film industry. I know that seems like it’s all over the place but I liked the idea of creating a section with a menu for anyone selling food and thought that same sort of section can be a different way to display a clothing collection or any other product. So the bottom of the image is the menu-like section.
Moving up the next section that says Best Sellers I made a sliding section which would allow for a merchant to display a product in multiple looks. I got this idea from sites that sell luts (aka filters) that demonstrate a before and after. This section can also be used for beauty products, filmmakers that sell plugins or photographers that sell luts.
When thinking about your theme you have to create unique features that will make your theme stand out. The way to do that is to think about features you like on other sites in different industries and niches and remix them for your niche.
Now I will show you what I designed for Monica, the woman coding my design in case you forgot 😂.
First let me tell you what I used to design. For my design I used affinity designer, it’s easier to use and create what you want. For Monica I used Figma because it was easier to give her access and grab ready made icons that I didn’t have to look for on the internet or make from scratch. Monica gave me a wireframe for her homepage that I used to guide me on what sections to put where and the layout. I created the other two pages without a wireframe.
Okay from left to right: on the left is the homepage made from the wireframe, it looked like Monica wanted a big Hero section so I went big. Her theme was for digital products so I used phone and desktop mock-ups. She mentioned she wanted the color blue but that was all so I spent time in Coolors finding a color palette I liked. I chose electric blue and I know yellow goes well with that and black goes with most colors but I need a poppy color. I played around with pinks and settled on a purple.
I sell digital products so I just used my own products for the content since I already created mock-ups for my web site. I changed the colors of my products to match the colors I chose for the design. I think I might add that purple look to my product list cause I love the Gradient purple look. But anyway the hero has to tell your customers what your site does and should usually include a button that takes them to the product you’re describing. I didn’t put a button because the wireframe didn’t have one.
I chose yellow for the buttons because those are actions you want customers to take; you want them to click the button, and actions should be bright and stand out from the rest of the page.
The rest of the design seems pretty self explanatory to me because I just put sections in that most web pages have i.e. the product page has the product, the price, description about the Product and buttons. Further down I give the demo link so customers can view the live site and other products the customer may be interested in. The only other design decision I think I chose to make was the use of Gradient text. Since I used a color Gradient in the header I wanted to be consistent but also not over powering, therefore on the product page and collection page the text Gradient is yellow into yellow with a 50% opacity instead of a color Gradient like on the homepage. I put the text in yellow because it stood out the Best against the purple background.
Oh and for the hero colors in the background I used a radial Gradient so the corners were darker and a linear Gradient for the text.
If there are specific questions I can’t think of please ask them below and I’ll get back to you.
Buy that concludes Phase 3 and Phase 4 will begin in a week or so and that Phase is implementation aka coding.
TTYL see ya next post.