For a bit of fun on the side, a friend and I created an interior design news feed website for lovers of all things home and decor. Itâs basically a hub where people can view, share and discuss the latest interior design news, products and inspiration.
Like many of us, I spend more time at home than any other place. So itâs always been important for me to design a space that I love being in. I follow quite a few interior design enthusiasts on Instagram and Pinterest, and also subscribe to some newsletters for inspiration. I was discussing my favourite websites to follow with a friend one day, and we realised that there wasnât a centralised place to go for the latest interior design news. Every morning, I read Designer News and Product Hunt to keep up with whatâs happening in the design and product space. We thought that it would be cool to create a similar website for all of the interior design lovers out there. We asked some fellow interior enthusiasts if theyâd be interested in using such a website and they all said yes, so we knew that we wouldnât be the only ones using the site.
The website model for this news feed idea is very simple. Itâs basically a list of user-submitted links that can be upvoted and commented on. The result is a community curated list of the most loved interior design links on the internet each day.
To monetise the website, weâd introduce sponsored listings, product reviews and potentially sell affiliate products once the community was large enough. A blog would be created to help drive traffic to the website. Weâd start creating content ourselves and then gradually attract guest contributors who wanted to market their own blogs and products. To build some buzz, weâd also create social marketing channels including Instagram, Facebook and Pinterest. The initial idea was captured in the rough sketch above.
Itâs always tough coming up with a name for a website, luckily there arenât many domain names left so youâve just got to take what you can get. We used a great little tool called Lean Domain Search to come up with a suitable name with an available domain. The name needed to be short, easy to say and spell, and also needed to convey what the actual website was for. After throwing a bunch of ideas around, we combined the words âdecorâ and âfeedâ to come up with âDecofeedâ.
Now comes the fun part, designing the logo. We wanted the logo to be a minimalist black and white design. I had a pretty good idea of the aesthetic we were after, so I started sketching out some ideas. I like to use a morphological matrix (seen in the above sketch) to generate ideas. It basically helps you mix and match different symbols more effectively. Then itâs just a matter of doodling around until you create something that makes sense. We really liked the idea of combining a floor plan with a love heart. Nothing says interior design like a floor plan, and the main premise of the website is liking or upvoting links so the heart symbol fits in well. The final logo design can be seen above, along with the floor plan symbol.
After doing a quick round of guerilla research, a.k.a. talking to friends and family, we confirmed that most of our users would be viewing our responsive website on their mobile phones during their down time. For this reason, I opted for a mobile-first design to ensure that the experience was optimised for mobile users. I often like to start with a mobile design as I find that the space constraints force you to keep things focussed and simple.
Speaking of simple, this website is basically a news feed with comments. Before putting pen to paper, I actually did quite a lot of research on UI patterns for news feeds and ordered lists. The feed needed to be quick and easy to scan and had to include an image thumbnail, a title, and links to upvote and comment. It also needed to be clear that the links in the feed were ordered based on the number of upvotes they received. Finally, users needed to be able to easily sort the feed to see the dayâs most popular links, the latest links, and the all-time most popular links. The layout that felt most intuitive to me was to have a square thumbnail image on the left, the link title and details in the middle, and the upvote and comment links on the right. I quickly mocked up a few rough layout variations and tested them on friends before arriving at a suitable layout. Some of my initial sketches of the feed layout and comments screen can be seen above.
With such a design focussed user base, it was especially important for me to sweat the details on the visual design. After playing around in Sketch for a while, I started to build up a simple style guide to work from. The colour palette (seen above) is comprised of shades of grey only, allowing the image content to shine through. I tend to steer clear of using pure black as it can look a bit harsh. I created some simple rules to govern the use of the colours to keep things consistent and tidy.
The typography (seen above) needed to be easy to read while also looking beautiful, so I paired two of my favourite Google fonts together. I chose âLoraâ, a serif, for the main content and paired it with âOpen Sansâ, a sans-serif, to help separate the content from the interface. Armed with my simple style guide and an eight pixel grid, I began to transform my sketches into pixels on the screen.
The website is actually really simple and is made up of two main screens, the news feed and the comments section, both seen above. The news feed sits on the home screen under a small header that introduces the website and allows new users to sign up. Clicking on a comment icon takes you to the comments screen where you can have your say and read otherâs comments.
The blog was lots of fun to design as I love working with a minimalist aesthetic. Using the same design guidelines mentioned above, I created a few simple UI components that would make up the blog. The typography is the hero of this design, so I had to get the balance of readability and beauty just right. The blog designs for mobile can be seen above, and the desktop designs are showcased below.
I coded up the website while my friend focussed on growing our social following. I built the HTML/CSS components in isolation first, then integrated them with a news feed framework to speed up the process. We managed to build most of the website and gain some momentum on social media before the project eventually fizzled out due to other commitments. Even though this one ended up in the project graveyard, like many side projects do, it was great fun to work on and we learnt a lot in the process.
