I’ve been working on a lot of websites recently and I’ll be working on a team in my Senior Seminar on a Computer Science Alumni website. After redesigning my website for, what seems to be the millionth time I’ve come up with a few strategies for approching the design problems that could present themselves when creating a new product. I’m not saying these strategies are the correct approach to design, but they’ve helped me through many different projects and seem to be successful.

We live in a modern era where technology has become a part of our everyday lives and this new generation of people are used to that. They don’t know of a time where there wasn’t the internet or cell phones. I don’t even know of that time, but I know it wasn’t that long ago. Design has also changed as rapidly as the hardware that drives the software a design lays on top of. Take a canonical example of older design, the Windows XP button:

alt text

The buttons are designed in a way so that they “pop” out at you so you understand and tell yourself “hey, I can push that thing in.” This is a design concept known as skeuomorphism and Apple implemented this type of design up until iOS 7. The idea is that the design of objects tells the user how to interact with it. This design worked really well when personal computers were starting to hit the market. People needed to be trained on how to get around a computer and how to use it. But we aren’t there anymore. Technology is a daily part of our lives. A seven year old could pick up an iPhone and instantly know how to use it. There’s no need for design cues anymore which is where this idea of a “flat” design came from which leads to my first strategy.

Keep it simple

This may sound a little cliche, but it’s really true and designers know it. Lets take a snapshot of Windows 8 as an example.

alt text

Notice there aren’t any borders around the array of buttons being listed and there’s a heavy reliance on icons to explain the role of each button. Also, the colors are simple and they aren’t polluted with excess drop shadow or other effects to make it “pop.” People refer to this design as being “flat” because you can imagine taking an iron to the old design and pressing out all of the bulging. It also refers to simplicity and leaving pages and views uncluttered. There’s a lot more in terms of fonts and organization of items which leads into the next strategy.

Keep it clean

There are a ton of websites and apps that I’ve seen that try to pack as much information as they can in a single view because it’ll “be more convenient” for the user. I agree that you want to make your product as easy for the user to use as possible and give them access to as much information as you can with minimal transitioning from view to view, but don’t pack every little thing into one space. It’s like buying a five room house but only using one room for everything. Simplicity coupled with a good scheme for organizing your information leads to a great design. It’s also a tricky problem. Lets take a personal website for example. You want to showcase your projects. That’s why you wanted to make it in the first place, right? Ok, so check that off. Then you need a brief description of yourself. Alright, you have some room for that so another check. Oh, but you also need a picture. Ok, I could make some room I suppose. But crap… I need to put my resume up there, and my email address, and LinkedIn profile, and soon the list of things piles up quickly. People then fall into the trap of “well I’ll just keep adding sections to my website to accommodate everything.” Their sections will look great and follow a nice, simple and clean design pattern, but you’ll be scrolling forever to get to a section you may or may not want to see. Scrolling is almost akin to a transition from one view to another. It requires the user to perform work to get to more information. So how can we minimize the amount of transitions and time to get from one section to another? Navigation helps, but can clutter the screen depending on how you approach the design of that. I prefer a stacked nav bar on the side and set up anchors to the different sections of the page. I find that to be useful for page navigation. Then for navigation to other pages I recommend a fixed nav bar at the top that doesn’t exceed a height of 75px. There are many ways to approach this problem. Just remember to keep your view from getting cluttered. I tend to only put major projects up and then showcasing my other minor ones on GitHub.

Draw it out

The amount of times I drew and re-drew the layout of my website and the others I’ve worked on is almost crazy. It’s partially because I’m picky, but I’m also a perfectionist which can be a problem. You’ll definitely be thanking yourself if you ever realize you don’t like the design you’ve chosen and you just have to scrap a drawing rather than hundreds or thousands of lines of code.

Have fun!

Designing something should be fun! Everything I’ve said in this post isn’t supposed to be treated as a guideline or the golden rules of design by any means. Creating something should be fun and a time to really let your creative side show. There’s no one right way to design a website or application, so be creative. Let the design represent who you are to the person looking at it. The best design is a design that embodies the person that brought it to life.