10. Mock ups and Layout

The thing with design is that you don’t notice it until it’s not working. If it was good, you wouldn’t even notice it.

For the past weeks we’ve been doing mini project websites for class, the motto has always been “make it work, make it fast, then make it beautiful.” It makes sense because we are trained to be PHP developers first, designers second.

But whenever we make presentations on the end of the week, we’ll all have more or less the same functions. What makes each one of us different is (more functions) or good design of our website.

My friend Brent said it best, “In the future, we will have the same functions on our website (because we will eventually learn it), what will make each of our work different is the way we market it.”

So I want to make sure from the get-go that I make a map to follow for my dream website.

Thank you Facebook, Quora, and Medium

My website is a mash up of all good things that you have.

Aquaponics Ph Club Website: Blog Page — Inspired by Facebook’s Newsfeed. This page displays all blog posts of members. There is a mini form on top to make it easy for members to contribute, in case they are inspired by the moment. The side bar displays other statistics on the website to give options to members wanting to explore more content.

Thank you Facebook. The layout is essentially facebook newsfeed. This blog post page is endless, and meant to be forever scrollable. On the side bar, instead of displaying groups to join (FB), statistics is displayed for users to explore the website more.

The simple layout and the functions are also inspired from Medium. I love how Medium is easy on the eye and their design is neat and clean. I want to embody that same cleanliness on my final product.

Aquaponics Ph Club Website: Question Page — Inspired by Quora. Laid out on the yellow note is the functions this page is supposed to do.

Layouting the webpages and designs also give me a better idea on what to include on my databases. The problem I had before was that I can never see the end product. So when I was making my databases, I followed the tutorial on point. This is good for a beginner.

But as time passed, I wanted to add more functions and more context to my users, posts, and content. This means that I would add one-by-one more columns to my database. It would take longer than usual to test run everything. And by the end of making things work, I didn’t have any energy to make it more beautiful.

Balancing act: front end and back end

So what I’m trying to say is, I learned that each one needs the other. Without functions, your website is as good as sh*t. It is essential that users can post without a fuss, and edit or comment as they please.

But without good design, potential customers won’t even bother staying on your page for long. This means that all the money spent on spreading the word, and ads to bring them to your page, is wasted when they don’t stay long enough to join or buy from you.

I want to make sure that I am thinking of both of these factors as I make and finish my website.


#100daysofwritinghonestly #the100dayproject Day 10