Tag Archives: web-development

Introducing Bold.

I gave a small sneak peak at the overall redesign I had planned for random process early in the year, and a couple weeks ago I mentioned I had started on the implementation in earnest. Now, you get to see the fruits of my labour, Bold. For those of you reading this in a feed reader, now would be a good time to drop by.

I’ll write a much more complete post on my design philosophy and the key features, but for now, I’m hoping to get some feedback, mostly to ensure things aren’t broken all over the place. I’m perusing the site, looking for bugs, but if everyone helps out, it’ll be a much quicker task. Key things to focus on would be the threaded replies of WordPress 2.7, which are now supported, along with the archives.

I’m no where near done implementing all the features I want to, but the core is there and I think it’s a big step up on what I had before. I’ll roll out incremental updates to the design over the next little while.

I hope you enjoy the new design!

Indigo .NET UI Development

Well this was the week to find out where I’d be working and come September, I’ll be taking my web development and design hobby to the next level at Indigo, Canada’s largest books retailer. That’s right, you’re looking at (err, reading) a soon-to-be professional web developer.

Of course, I had my sights set on the Product Planning position at Microsoft, so I was decidedly disappointed when I didn’t get an offer from them. For days while I awaited word, I went over the two interviews I had for the position again and again in my mind. There were so many things I wanted to say, to show what I could bring to the table, but it seemed like the topics just never came up. I attribute it partly to the short length of the interviews, but also in large part to faults of my own. I need to work on my interview skills; I feel that regardless of what the interviewer asks, I should be able to portray myself the way I want to and to guide the direction of the interview, even if those questions don’t come up.

Another time, perhaps. I do have one more work term left and I’ll be taking these lessons learned to heart.

Enough moping. Back to Indigo. I’m very excited about the position as I’ll have the opportunity to work on both the UI/design aspect of the project as well as back-end development. In the web market, too often you only have the chance to do one or the other. Speaking of the project, it’s a new web application just in the design phase now, so by the time I get there in September, I should be entering it at the ground floor. Hopefully that means I’ll have some control over how it’s implemented.

The Indigo interview was a different animal from the Microsoft one. I was in complete control, and I let my passion for the web industry ooze. In fact, this blog played a large part in getting the job. After speaking about my design experience, I decided my point would be stronger with a tangible example, and pointed the interviewer to randomprocess.ca. It didn’t take long for him to be impressed by the design as well as clean XHTML and CSS. Combined with my ASP.NET and PHP development experience at Sybase, I painted myself as a well-rounded web developer and designer.

The office is in downtown Toronto, which, in my mind, is one of the detractors. I’m just a small-town kid, having grown up in Charlottetown. My experiences with the big city consist of being a tourist, seeing how things are so different. I’ll be giving the city a chance; then no one will be able to say I don’t like the hustle and bustle just because I haven’t experienced it.

First Step

Starting something like a website design is pretty intimidating if you’re just dipping your toes into the process. It’s quite a chore to even gather up the courage to make that first foray. I’d consider myself to be pretty new to this, but I’ve learned quite a bit and I hope you can take something of use from my (definitely not vast) experiences.

The first step I take in creating just about anything like a website design is to visualize it. In the case of creating templates, I like to get things down on paper. It’s one thing to see the ideas in your head, but with something as complex as site design, it’s essential to get things down permanently so you don’t forget things or become inconsistent in the implementation. So for the Amalgam theme I’m currently (still) working on, I had drawn up this visual plan before I opened up my first blank coding window.

Planning for Amalgam

Don’t be scared to get your ideas down on paper. While you may think you don’t really know exactly what you want yet, you needn’t worry. After all, it’s just a rough draft and you can easily change anything you don’t like or improve certain elements. It’s just a guideline so you know generally what you’re aiming for in that final product. Chances are, as you progress through the design, you’ll realize that certain things won’t work or something else would work better. Add these to your initial plan so you’ll be updated as to what should be done.

One of the things I like to do with web design it to actually write in the hierarchy of the divs in this initial plan, which are essentially containers that hold your page content. You can then style these with CSS.

Next is the actual coding. I find it easiest to write in the more essential html elements like title, head and body first. Then I write in my major div containers. Start a very simple CSS template with those basic div styles. I find it helpful to start off all the div styling with borders, so I can tell if things are nested properly or are laid out as I want. After that, it’s a matter of filling in the rest of the ‘meat’ of the page design.

That’s a very basic overview of how I generally start any web page, not just a WordPress template. I’ll discuss WordPress a little more specifically later.

[tags]beginner web design[/tags]