akrish

Since January, I’ve been working on and off on website/application called WeNote that I hope to release for the last time in December of this year. Now that I’m pretty much done with the structure of this blog, I’ll be talking about that project a lot mere in here. Anyway, This was my first time making a production quality application so naturally I made a lot of mistakes. I’ve learned a lot from these mistakes and now feel a lot more capable of making something that users will actually go to and be interested in. I’ve already released two versions of the website, both of which have been met with brutal critiques from my friends and very little site traffic, so I shut the site down and am rebuilding it from scratch. Although there were also a lot of back-end mistakes that I may, here are 7 of the Web Design-related mistakes that most web designers will have to learn at some point.

Version one of WeNote was absolutely terrible. The layouts of pages were not thought out at all and inconsistent across pages, the color scheme was terrible, content on pages was poorly written, and the site just didn’t look appealing. In my defense, I didn’t spend much time working on the user experience because I was just learning PHP. I focused a lot on the back-end, which even still didn’t turn out that well. Version two was a significant improvement from version one in terms of functionality, but visually it was still pretty bad. When I released this one, I told all of my friends to use it, and they all made accounts, but I was getting no traffic. I attribute most of this failure to lack of a good user experience, because the back-end was pretty functional. With that introduction, here’s the list.

1. User Experience is really important: This one seems obvious, but it still needs to be stressed. Without an amazing user experience, users will not come to your site, regardless of how functional it is. This is a big problem for me, because I’m less interested in layout design and graphic design and more interested in the back-end code for the site. I think a lot of hackers prefer to work on interesting code (i.e. back-end) than on the stylistic needs of the site, but both aspects are essential to any good website. Every time I showed off WeNote to one my friends, he always said something like, “The UI sucks.” I really should have listened to him and spent some time on the UI, but it was really easy for me to procrastinate. As a result, for the third release of WeNote, I’m actually building an HTML mock-up of the site before I even start on the back-end, so that the site has a decent user experience.

2. Attention to Detail: This one I actually learned from building a different website, but it’s incredibly important. When styling a website, every single detail matters. My friend and I co-operated on a website called uclinked a couple of months ago. We didn’t spend much time on the site (it was a pretty simple idea), but everyone who I showed the site to noticed a smudge in our banner image. It really took away from the sight because that was the first thing everyone noticed, and it immediately gave them the impression that the site was poorly made. From this experience, I learned that every single detail matters. On my mock-ups for Version 3 of WeNote, I’ve spent a lot of time making sure that colors blend will, that images and borders line up and are consistent, and that every element is exactly where I want it and looks exactly how I want it to. It’s time consuming and tedious, but it’s essential to building a successful site.

3. Navigation: This is actually related to functionality of the site, but it contributes a lot to the user experience. When a user visits your site, you want them to be able to find what they want easily, so you need to have a very clear, simple navigation system. Navigation areas aren’t the places to show off your creativity. These guys have to be easy to find and easy to use, otherwise people will get frustrated with your site, and they’ll never come back. Don’t try new navigation techniques on your sites. People expect to find navigation elements in certain places, usually right below the banner, or on the left side of the page, and if they don’t find them where they expect, you have a problem. You can be creative with your buttons and any animation you want in your nav bars, but make sure people can find them and use them very easily.

4. CSS can’t do it all: It’s time to face the facts, you’re going to have to use some images to spice up your site. As amazing as CSS is, it’s not going to make you’re site look good on it’s own. You’ll need some Photoshop-ped or GIMP-ed images around your pages to complete the user interface. The problem here is that it takes a long time to learn how to use good image processing software, and a lot of hackers would rather be coding that messing around with GIMP. Unfortunately, it’s something that has to be done, and it really makes your site look better. With plain CSS, you can make your site functional and usable, but it definitely won’t be very cool looking.

5. Textual Content: If you have a lot of text on your web pages, it’s important that every word is carefully selected. You don’t want too much text (unless your writing articles), but your text must convey your message to the users. For WeNote, I had text on my home page that explained what WeNote was and why someone would want to use it, but it was pretty wordy, and not even very explicit. It might be a good idea to get someone who writes really well to come up with blurbs for you if you’re not very good at it (like me). It’s also important to place text in places that people expect it, and also make sure that the font is well sized and easily readable.

6. Design for your audience: When styling a page, take some time to think about what the page is supposed to be, and what your users will expect. For example, there’s a pretty standard template for online newspapers with Old-English-y font for the header, a navigation bar for the sections of the paper, and recent stories on the front page. You can also think about what your users like, and theme some of your images, fonts, colors, etc. around what they like. If your page is more artsy, you may want your header, and buttons to reflect that blurring into the other elements. Maybe you could use some really nice nature picture as part of your banner. At the same time, don’t be too cheesy or too exclusive. You don’t want to intimidate possible users with your design, so keep your theme a little general. This is something I haven’t exactly figured out yet, but I’m working on it.

7. Design for all browsers: Internet Explorer, Mozilla Firefox, Apple Safari all behave slightly differently when it comes to CSS and images. It’s terrible that things aren’t standardized, but as a website designer, you need to be sure that regardless of browser, your users have a great experience on your page. Test your site on all browser to make sure that it works properly and that it looks good. Have separate style sheets to load based on what browser is being used (Javascript can detect browser and load the appropriate style sheet). One of my friends made me a banner for WeNote in photoshop, and it looks great in Firefox on my Macbook Pro, but in Safari, the colors are purple, rather than blue, and the banner doesn’t fit with the rest of the page. As a result, I’m going to have to change my banner image, even though what my friend made was really cool. Compatibility with different browsers is essentially to attracting a wide user base.

So that’s some of the things I learned in the last 8 months of web design. I’m still consider myself a novice at it, so I’ll be learning a lot in the future and I’ll write about some of that too. I hope this is useful to anyone interested in designing a website.

At some point in growing up, everyone feels the need to be independent. In fact, one of my defining signs of adulthood is the ability to be able to support and take care of yourself. It’s not that you don’t need other people, as John Donne said, “no man is an island,” it’s just that you are self-sufficient and can provide for yourself. It takes a lot of work and responsibility, but it shows maturity and the realization that you’re finally independent must be awesome.

I’m by no means independent. I’m staying with my parents over the summer, they pay for my college tuition, feed me, and they manage a lot of money for me. I’m not going to be fully independent at least until I finish college and can work full time, but at the same time, I’ve been feeling a lot more independent than I used to. I expect to feel more independent as I grow up, but this summer I think I’ve made significant strides in self sufficiency.

My first significant step was back in high school when I finally got my driver’s license. It’s important to be able to get from point A to point B on your own, and before I could drive, I relied on my parents for that. Then, throughout senior year of high school, my parents gave me more and more responsibility. In college I was independent in terms of taking care of myself, but all of my money was coming from my parents, so I didn’t really feel self-sufficient.

I went back home for the summer, and it felt really different. For one thing, I’ve been working full time. I no longer have to ask my parents for money, because I’m making my own. Even though they take care of a lot of my bills still, the fact that I no longer need an allowance and that I can at least take care of all of my personal expenses really contributes to my feeling of self-sufficiency. What’s also important about working is that I’m no longer in the student mindset; it’s a lot closer to being a working adult than it is to being a college student.

Secondly, my parent’s have given me a lot more freedom to do whatever I want. It’s as if I’m just renting a room from my parents for the summer; they let me come and go as I please. I still talk to them and let them know what I’m up to, but they’ve never told me that I need to do anything, or prohibited me from doing anything for the duration of the summer. This was also the case while I was in college, but it feels different while I’m at home, because I half expect my parents to treat me as if I were still in high school. What’s more, I now interact with my parents a lot more as if we’re peers than as if they’re in charge of me. I tell them about my ideas, my friends, and anything else, and they respond as if they’re my friends. They still offer me advice and direction, but it’s never in the form of a command. This is really different from when I in high school, and it’s really cool. At any rate, the contrast between now and high school is a lot greater than between then and college, and it really adds to my feeling of independence.

I’ve also been cooking more. I’ve learned how to fend for myself when my parents aren’t around by making salads, pasta, omelettes, and other pretty simple dishes. I don’t have the time or the patience yet to cook for every meal of the day, but it’s good to know that I can cook for myself if I really have to. It also beats eating at restaurants every day of the week for health reasons. This contributes a lot to independence because I no longer rely on my parents to feed me, but I still manage to eat healthily and take care of myself.

Finally, since I’m moving off campus next year, I’ve been co-ordinating rent and bill payment, along with planning what furniture I need to buy for my place. My parents are still gonna be paying the bills, but my roommates and I are now responsible for giving them to our landlord, cable company, etc. Again this is a pretty big step in independence, because we’ve been giving some legitimate responsibility that we have to handle on our own.

So obviously I’m going to be feeling more an more independent as I go through college, graduate, and then start my career, but I was amazed at how much growth I’ve made just this summer. Over the next couple of months, as I settle into my off-campus housing, I’m sure that I’ll have to become more self-sufficient, as I juggle house responsibilities with my academic responsibilities. It’ll be interesting to see how independent I feel after this upcoming semester.