Web Design - Wireframing

Wireframing is like a rough sketch of a website you intend to build. 

It's important to plan builds no matter what it is, you wouldn't start to build your house without first drawing a blueprint of how you want it to look and building your website should be no different. This concept of planning reminds me of a funny story, recently my father payed his buddies (who are complete cowboys by the way) to build a brick shed out the back. Construction began, cement was layed and brick by brick it begain to take shape. I asked my dad "Can I see the sketch of the new shed Da?" "You don't get a sketch for a shed!" he replied in his imperious manner. Needless to say the lads building the thing didn't have a clue what they were doing and 5 or 6 layers of bricks later my Mam announces "they haven't left space for the door..." Not very user friendly as you can imagine.

'Wireframing is a quick and effective way to identify usability issues early on in your design process.' [1] Usability should be the goal of every website. You could have the best product or service in the known universe and you might think you have a clever design but if there's no usability people will go elsewhere. 

For my digital marketing project I have chosen a new start up called Hydrofood. They are an Irish food production company using hydroponic technology. Take a look at their current homepage.

Their name and logo in blue and green are clean and clear in my opinion. The blue ocean creates a sense of calm and is aesthetically pleasing while in keeping with the brand colour.

Their main competitor is Farmony, the largest Hydroponic producer in Ireland. There are other companies of course world wide that are well established and are competing fiercely in major markets like New York, but for the purpose of this comparison I've kept it domestic as both companies will be in direct competition. Here's a look at Farmoy's Hompage.

Immediately you can see their homepage is more developed, in terms of  content, links to social media and pictures of their produce, facilities and technology.

I've created a basic wireframe for Hydrofood using Balsamicq, an easy to use wireframing software that has an incredible amount of tools to customize wireframes for a multitude of devices and operating systems. Here's my mock up.

The plan would be to showcase more relevant pictucres in a slide show that highlight the problems they solve. A written mission statement and an audio visual video introducing the business, their mission, about them, about the challenges we face to feed a growing global population and how they plan do it using less land, reducing CO2 and producing organic food free from GMOs, pesticides and other harmful chemicals while giving a virtual tour of their facilities. More links to socail media and contacts. Again this is rough and I plan to keep improving on this in the coming weeks!

Sources 

[1] https://medium.com/@protoio/why-wireframes-are-important-in-the-design-process-de4e773e611