I was approached to create a destination to download the .PDF-based poetry journal. What resulted was a simple, one-page website with a clear call-to-action. But for me, the project was an exercise in creating fun, unexpected interactions and trying new things.

Check out the website now, and don’t forget to download the PDF.

A screen cap of the Hobbes website isn't the same as the interactive experience.

With a basic premise established, it made sense to keep the experience straightforward and concise. See the cover, get some background information, and download. That doesn’t mean it has to be boring though!

Unexpected Interactions

Since this was a personal project, I used this opportunity to experiment with different techniques. With the popularity of tablet devices and the possibilities available with new technology, the way we interact with the web is drastically changing. I find myself constantly trying to figure out how people are doing what they do. Some of my favourite experiences on the web are when I’m surprised and delighted by unexpected interactions. I might scroll down and have elements fly onto the page or see things animate as I jump between sections.

With this project, I tried to incorporate those subtle, pleasant interactions. For example, when you scroll down the page, instead of moving down the canvas, another section comes up over the existing section.

Responsive Design

This is also the first project I’ve built that is responsive, for an optimized mobile experience. So, you know, you can read about heartbreak and stuff wherever you go.

iPhones taking pictures of iPhones

All images from Need Supply Co.

Over the last year or so I’ve gotten a lot of requests from friends to help them make a website. Most of the types of projects happen to be either a blog or a portfolio site. After looking into and experimenting with different portfolio options available, I set out to lay down a basic framework I could use for similar projects in the future.

I chose WordPress as a portfolio CMS because the platform was one people were already familiar with, was easy to set up (most host providers have one click installations), and had already seen it done effectively. WordPress development was something I had a little experience with so it was fun exploring it further.

Although this isn’t anything new, and it might not be the best portfolio theme out there, I wanted to make this available to everyone because I feel its a simple solution and enough to get the ball rolling with your own portfolio.

The theme isn’t perfect but this is my first time putting something out there for public use. I wanted this to be an open project, something I expect to keep updating, improving, and adding new features to (not to mention fixing bugs I might have missed).

How it works

For those of you who aren’t following along (and don’t know what the hell is a CMS), this is a theme for the blogging platform WordPress. But instead of using it for publishing blog posts, it uses the platform’s functionality of writing a blog to show off your projects through images and text.

Content is broken into ‘projects’, with each project being made up of several images, a description, and additional details.

Example of a project page

Project images can span multiple widths.

There is also support for WordPress’ ‘Pages’, so you can set up About or Contact pages.

This theme was intended as a simple, quick, and easy solution for anyone needing to put a portfolio online. You can use it for your graphic design work, photography, even videos. The minimalistic theme was designed so that what is featured is the quality of your work. No fancy textures, colours, or effects. Just exactly what you need to get your work seen and appreciated.

Posting your first project

If you’ve ever used WordPress before, creating a project is very, very easy. The theme takes advantage of WordPress’ user friendly admin area and publishing features.

1) From the WordPress dashboard, click ‘Add New Project’ under the ‘Projects’ menu on the right hand side of the screen.

2) Give your project a title.

3) To begin uploading images to your project, hit the image icon where it reads ‘Upload/Insert’.

4) Follow the image upload form to upload images from your computer or from elsewhere on the internet. Once the image is ready, hit ‘Insert Into Post’. Read below under ‘Tips’ for tips on media setting recommendations. Repeat this step for each image you want to include for this project.

5) Make sure each image is on a seperate line, and not side by side. You can do this by hitting Enter after every image upload. Though, you can get creative and have images on the same line if you play around with image sizes.

6) Add a description for your project

7) Add any additional project details, for example the link to said project or the project type.

8) Click ‘Set featured image’ to set the thumbnail image that will show up on the home page. The thumbnail will be cropped and resized for you.

9) Hit publish! Congrats, you just made your first project.

Tips

• You can set the image sizes so that images are automatically resized for you. You can find the settings under Settings > Media. I would set the Max Width of the medium image size to 610 px and the Max Width of the large image size to 920 px. This will ensure the images of your project pages won’t break the layout.
• The featured images are separate from the images in your project. Take advantage of the separate upload and design thumbnails specifically for the homepage. The thumbnail size is 300 x 300 px.

Resources

• Finding a host (from WordPress)
• Installing the theme

I’ll be sure to add any links here that I find useful for anyone who have never used WordPress before or anyone else using this theme.

Please feel free to leave any comments, concerns, and questions in the comment form below. I’ll try my best to get back to you as soon as I can. I hope there’s at least one person out there that will find this useful.

Ehliens is a Canadian apparel company with a minimalistic, brand-oriented approach. Their signature logo and clean aesthetic are the basis to their loyal (and growing) group of supporters who wear the brand proudly. It’s rare for me to go to the local mall and not come across someone in an Ehliens crewneck or t-shirt.

In previous projects, I’ve usually been asked to establish a new or preexisting company’s online presence, however, Ehliens already had a strong following mostly through the blog, Facebook, and Twitter. Ehliens needed a permanent home to tie it all together. When I met with Ehliens founder, Adriel (@Ehliens), he drove the point home that Ehliens is all about supporting local artists and athletes, and he wanted the redesigned website to represent that. Yet, despite the local ties, he wanted the website to look as though it could stand next to the KR3Ws and Supras of the world.

The website needed to be community-oriented and at the same time, represent the brand on a bigger stage. The website needed to be elegant and simple, yet uniquely Ehlien.

Rough notes. Very rough notes. Notes so rough I spelt Ehliens wrong. Oops.

The direction of the project was pretty wide open but it was agreed upon from the outset that the design would shy away from excess and flair. I focused on putting together a look that was both minimalistic and professional, yet spoke about a brand that sponsored skateboarders and hip hop artists.

An early design with no background. The background was actually a suggestion from Adriel, a graphic designer himself.

The finished website features a blog, a section for sponsored skaters and artists, as well as an online shop.

It was a big move to bring the business online and I wanted the website to represent that. It was a redesign but also a step towards something larger.

Social integration is found throughout the site from blog posts to individual product pages – things I felt confident people would want to share. Featured websites from the community are on the home page, furthering their support of local work.

This is a post from my previous blog that I felt was worth reposting on this blog. It was originally posted on June 17, 2011. So no, I didn’t just graduate, yesterday. Jeeze!

As of today, I’ll be a graduate of Durham College’s Internet Applications and Web Development program. It’s crazy to think that my formal education in web design and development is over, and I’ll begin making my way into the world of professional web design. One of my biggest strengths is that I recognize where I’m at. I am by no means a design professional. I’m not an expert and I certainly can’t give out expert advice.

However, being a recent student, I also recognize what it’s like to sit in a classroom until 6pm on a Friday night when I’d rather be hanging out with my friends. So whether you’re a design student at Durham College or anywhere else in the world, here are some tips to getting the most of your college experience:

1. Listen, listen, listen!

No matter where you go, what you study, or who teaches you, one thing is certain – it’s going to get boring. We all know this. It could be a teacher that speaks ridiculously slowly, a subject that you could care less about, or some douche bag typing away at his blog about five tips for design students – at some point you’ll stop caring about what’s being taught to you. Especially being a designer (you’re an egomaniac, admit it) you may start to think, “I don’t need to be here, I already know this”.

But don’t stop caring. Keep your ears open because if you wait on that one piece of advice to hit home and re-ignite your interest, just an FYI – it’s not going to come. Everything that you’re being taught, at some point or another, will apply to you. Every piece of advice and information that’s given to you will have some value to you. Everything has value, it’s just a matter of determining how much value something has to you in particular.

2. Every assignment is an opportunity

At some point, most likely toward the end of your education, you’ll need to compile a portfolio. Your portfolio is supposed to be a projection of your abilities and your best work. With every assignment you do, try to do it to the best of your abilities. That may come across as weak advice, but the fact of the matter is, when you decide you’ll turn your design dial up to ‘awesome’, it might be too late. You’re swamped with too many assignments and your work suffers. It happens. So try to do your best work as early as you can.

Also, make every assignment an opportunity to try something new. You’re a student and you’re in a learning environment. Take advantage, because you might not have another one like it. Set minor challenges for each assignment to help you learn. Seen a cool website that makes use of a tons of textures and big typography? Try that out on your next assignment. Or maybe you seen a simple website with great use of white space. Experiment with that next time.

This is the best opportunity to try out different styles and an even better opportunity to determine your own personal style.

3. Make use of the people around you

There will be few times in your life where you’re constantly surrounded by like minded people who are willing to offer you help – unless you’re a rockstar with a bunch of groupies, in which case, “help” is used sparingly. Take advantage of the design-centric environment. This kind of environment is particularly beneficial to your creative process when you see everybody’s work and you realize there are X amount of people that had the same requirements and briefing you did, yet there are X amount of distinctly different designs. Some might not be great, but it’s important to figure out how someone came to the conclusions they did. Pick their brain’s as to why they made similar or different decisions than you did. Learn about other people’s creative process so you can compare it to your own.

Another great aspect of being in a student environment is that you will undoubtedly be given lots of compliments. The classroom environment rarely gets confrontational and people are more apt to give you positive critiques of your work than negative ones. Listen to what everyone says about your work. They might be blowing smoke up your… behind, but ultimately you’ll find patterns in the things people say about your work. Chances are it’s because it’s true. If people always mention your use of imagery – that might be your thing. If people are always complimenting you on your colour choices – that might be your thing. If people always try to change subjects and talk about the weather – that might not be a good thing.

4. You won’t learn everything in a classroom

Another fact about school – regardless of your field – you’re not going to learn everything in school. You’ll learn a lot, but even then, you won’t know everything. Web design is constantly evolving and schools, for one reason or another, can’t keep up. If there’s anything I’ve learned, it’s that you never stop learning. You’re going to need to read blogs, forums, comment sections, and even the dreaded printed page if you want to keep up.

It sucks knowing that you’re couped up in a classroom all day and knowing you still have to do more learning and more reading. Find ways to do both. Bookmark a couple good resources and read them during coffee breaks.

Your teachers are great resources for learning, but you need to be independent to supplement yourself with the necessary knowledge to stay current.

5. Apply yourself

If there’s any underlying message to the previous four points, it’s that if you want to do well, you have to work hard. Work really hard. In other words, you have to be the person in the classroom that you hate for trying so hard on every assignment. You have to be that guy.

I know these points come across as utopian/best-case-scenario type advice. I know that being a student can/does suck. I know it sounds like you have to be a design nerd to be any good (though I would argue being a design nerd is pretty damn cool). But it doesn’t have to be all bad. Applying yourself doesn’t have to come at the cost of your social life and sanity.

But the simplest way I can put it is, if you make an effort and want to do well, you’ll do well. Putting in work yields results, at least that’s what years of listening to rap songs has taught me.

-

To be honest, these points aren’t all a reflection of my own personal academic career. In fact, a lot of these things I didn’t realize until after I was done school. I share this blog post as a way for students to fully realize their opportunity and make the most of it. I know I didn’t. I was never that guy. Though, now, I wish I had been.

So what do you think? Agree? Disagree? Can you be a whiz by just sitting in class? Is taking the general consensus a reasonable means of assessing your skill as a designer? Am I actually a douche bag? Let me know in the comments section and feel free to share!

Even though I’m not an expert on anything in particular – I’m certainly not pretending to be an expert on design – I want to use this blog to share what little I can about web design and share some of the personal projects I’m working on. Whether it’s a new website, or I’m dabbling into print, or making a rap album (yeah, right).

While I was in high school I ran a blog with a couple friends and, overall, it was a very fun experience. For me the toughest part about running a blog, and the reason why I was hesitant to start one again, was trying to come up with content on a regular basis. A challenge I’m sure all bloggers are faced with. This time around I’m going to try to move away from that. No forced posts.

For anyone who bothered to check out my Tumblr (all three of you), I appreciate it and I hope that this new blog/experiment proves to be more useful and worthwhile. Oh, and a lot more fun!