My Experiences In Web Design: Part 2
- 1 Comment
(This article is part of an ongoing series about my first experiences with redesigning some of my sites and blogs. This is a live series meaning that the redesigns haven’t been deployed yet but are in development. Each article in the series is a step in the development process as it is happening.)
Alright, this article picks up where my previous post left off. In that post I concluded with a rough sketch of the the structural flow drawing for the facelift of one of my websites/blogs. Well the next thing I had to do was make a mockup in gimp. Now I’m not a gimp expert yet. In fact I don’t use it all that much so learning its ins and outs has been fun and challenging. But it also makes the design process go kind of slow for me. Needless to say I messed up quite a few times before I got a mockup that I was somewhat pleased with. Before I get to the mockup that is most likely to serve as a template for the actual site, I going to go through some of my mess ups.
1) Creating textures is not easiest thing to do. I invested a lot time in this, and looking back don’t know if I would do it again because it could bring up implementation and compression rate issues when deploying the site. I wanted to create a crumpled paper texture. So I thought the only thing I would have to do is crumple some paper and scan it. Wrong! After scanning, I was left with the most hideous colored crumpled paper. Also my crumples were very harsh. Here’s a sample:
So instead of just wading up the paper, I resorted to folding it and mildly creasing it in various ways. Then I unfolded it and scanned it again. This made the texture less harsh but did nothing for the color. For that I had to play around with making different color layers with different layer modes to go over the original texture layer.
Here is a sample of the resulting texture:
I really liked this texture but also wanted one that was a little darker. So, I keep adding colored layers with varying transparencies and got this:
So now I believed that the toughest part was over. I just didn’t know how much work I had in front of me.
2) It’s probably a good idea to give each design element its own layer. I think buttons, their text, titles, and everything else should initially have their own layers. This makes it very each to reuse various components to create different pages of the site as well as redesign existing ones. This method also makes it easy to reuse design elements in totally different projects. Sure you end up with tons of layers, but the flexibility alone makes it a worthwhile approach. However this wasn’t clear to me at the beginning of the project so I attempted to do everything on a few layers and met disaster quickly.
The image above is of one of my early ideas for the site-the header section specifically. It had readiblity issues and after implementing it, I just didn’t like it all that much. Here everything was done on like 2 layers. And instead of going through a long series of undos, I just trashed the project.
3) When designing, its probably wise to keep in mind how certain design elements and the design as a whole will appear in a browser. Being new to web design, this never entered my mind. I didn’t consider how large my textures were and how much space they required. I also never considered how image compression would affect the quality of the images. Even though I won’t be using the entire backgrounds on the web just samples, I still have to use image compression in a way that it doesn’t affect the integrity of the image all that much. But I think this is also the kind of problem that requires experience. So, I don’t feel too bad about it because it is a lesson I can bring to my next web design project.
Here’s a scaled image of the current working design for the homepage:
I can see and have anticipated a few potential problems, but I’m probably going to go with this design. I’ll talk more about these issues when I get to the css phase. The width of the design is good, 1024, which will display well on most monitors. The length is kind of long, but that’s not bothering me too much either. This can easily be changed if needed. Since this is a texture rich design, I’m going to constantly have to keep readability in mind especially font and font size for regular blog posts. But overall I like the design.
Final Thoughts On Designing With Gimp
Gimp is a barebones image manipulation and graphics development environment. This doesn’t mean that it’s not extremely powerful, it just doesn’t come bundled with a lot of extras like custom brushes and plugins. But there are a host of custom brushes, plugins, and other gimp extras that you can find with just a little bit of web surfing and they are easy to install. I only have minimal experience with photoshop so I can’t say that I feel like I’m missing anything. Over the last week, I’ve gotten accustomed to the Gimp environment and really enjoy it now.
Check back for Part: 3 where I will be tackling CSS for the first time.
KJ
[...] you want to read more about the eventual redesign of this site, you can read more about it in web design series I wrote for HighTechSister. Although I’ve changed some things in the design since [...]