I was tasked with creating a landing page for a startup created by Megan McNelly. This is still in its early stages of research and testing , however it’s now going into its next stages of development. My job as the designer was to design this landing page to promote the product and convince others to buy the product.
The application was titled “What-to-wear” and as of now the brand logo is a lime green. The app is there to help others decide on what to wear. They can upload their clothes items, save outfits, view stats of last worn and how often etc. The site will need a CTA, a product description, a section that details product features, and a way to sign up for newsletters.
I began by researching other similar products in order to gain knowledge of other possible features, as well as sample landing page ideas. I also used this research as a tool to help me with choosing a typography, as well as a color scheme that would help create the brand.
While I researched different colors I noticed that the color blue gives off a relief of stress. Blue gives off a calming feel, which in my opinion is why many Doctors wear blue scrubs for example. Another insight I noticed was that the color white gives off a clean look. These 2 colors fit perfectly with this application which is there to relieve the stress a messy closet causes, as well as an unkempt and unorganized one. I also chose to change the name of the site to “Virtual Closet”, I felt this resonated with me more.
A site which gave me much inspiration is called “stylebookapp.com”, I noticed there’s a tone of white spaces which creates the clean feel. They also have a logo which is extremely simple and clean looking.
With all these colors in mind, I then searched on “Pintrest” for those colors, as well as for pictures of closets, and fashion in the rain. I put together with all these pictures four separate moodboards on “Canva”.
I then continued on to my initial sketches in which I created to be similar to other unrelated landing pages. The typography I had originally chosen was typewriter, as I had thought that would give off an orderly look. In theory I was correct, but in practise that was not the case. Upon feedback I changed the type to a Serif. I located the site “Coolors” to help me with my colors, enabling me to receive exact hex numbers.
We then set up a session of visual analysis, where upon we each gave and received critiques on our sites. The response was that although it was friendly and approachable, the site was perhaps too approachable and playful for this type of orderly, clean feel that my site was supposed to be giving off. The pictures as well were overwhelming, I was told there’s allot going on. I therefore continued to iterate, and ultimately came to my final polished product.
Behold…The “VIRTUAL CLOSET”…
In conclusion, this was the very first time I ever dealt with really honing in on the aesthetics, and small details of any given interface. I also never had to deal with typography, and or color schemes. I can honestly say for a first timer the job was done okay, however I will need a load of progress in the future. In my first week of visual design, I already see a large difference, practice will ultimately make perfect!
Learning two new languages in 2 days!
I was then tasked to create the very same visual in code. I had never done any sort of coding before, let alone even knew exactly what it was. On monday we were taught HTML, tuesday was CSS. I was extremely overwhelmed with this new world, and the coding was due that very thursday.
The HTML was very basic and easygoing at least I had thought, But once I learned the CSS aspect I wished I had more time to redo my HTML in order to make the CSS an easier job. Unfortunately due to time constraints, I was unable to go back, therefore the process became allot more difficult.
One challenge I had faced was that my images had been placed in HTML, however being that they were mainly background images with text on top of them they needed to be in CSS. Another challenge I had constant trouble with was creating three or more columns, as well as the concept of floating and properly being mindful to clear it.
Most certainly when the design actually begins coming together and items are moving around the screen nicely it’s a great feeling. Likened to a intense puzzle, however if anything in each code is slightly off you’re down the creek till that becomes fixed. For the coding I used “ codepen.io “ , and for my Sketch pictures, I had exported them in order to download, and from there to receive the image source I used “imageBB.com “ .
In conclusion I’ve learned to emphasize with developers, and when creating my future designs I’m definitely going to have their coding in mind as well how to make it as easy a process as possible for them. I’ve also come to recognize an enormous amount of respect for developers.
Stay Clean and Classy!
Elliot Sonnenblick
