Here are a few of the latest resources that I’ve been using in my web design work. These resources/sites have been very helpful and have saved me a tremendous amount of time.
Probably my favorite site right now for doing rounded corners because it’s the easiest and quickest that I have found. You just simply place a value in the boxes that correspond to a specific corner of the box and the CSS is generated inside the box automatically. It’s great for generating code for rounding corners on a box where you don’t need all of the corners rounded. Great tool.
I’ve been doing a fair amount of sprite work lately on designing the new rebornweb.com website. This site has been a good help in doing this. There is one thing that I think the site could do better. After uploading the images, it’d be nice to be able to order them and/or reorder them instead of being surprised as to where the images will line up (i.e. whether or not an image is on the left or right, etc.). It also requires flash as I think it’s using the jQuery uploader or something but other than that, I like the sample code and image generation.
A Little About Web Design Resources to Share
This posting will be either a weekly or bi-weekly posting in which I share some of the latest web design resources that I utilize in my design work. These are primarily links to websites that I find very interesting or collections of resources that I have gathered from around the web to share.
This website has saved me so much time recently. I used to have to keep Adobe Photoshop open while coding CSS to find tints and shades of the primary colors of a particular website. I’d then have to tweak sliders in the color wheel to get what I thought was a particular shade. Well not any more. The 0to255.com website allows me to find different color variations when I’m coding and/or designing. I simply punch in a color and the website will find all of the color variations from white to black and by clicking on the color, the hex code is copied to the clipboard. That’s it! Saves me time and effort in finding color variations. Great tool.
I like stripes as they do a little bit to spice up backgrounds and make them a little more visually interesting. The only problem is, using Photoshop they take too long to make. Sure you can import a few patterns or brushes but you’re bound to the dimensions and settings of that pattern. For example, you can adjust the spacing between lines easily or change the thickness of the line easily either. So you’d have to have a bunch of patterns in Photoshop to make this happen (then finding them can be an issue as well).
Well that’s were stripegenerator.com comes in handy. At this site you can create your own stripe patterns on the fly within the browser. How cool! You can adjust the stripe size, spacing, color and stripe orientation. There are other customizations that you can choose as well. The tool generates a downloadable PNG file that you can plug directly into your website via CSS.
I have one complaint about stripegenerator.com though and that is that you can’t create transparent space between the stripes. This is so that the background-color property in CSS can show through between the stripes. However, I was able to pull the .png file into Photoshop and edit out the white space.
RebornWeb Mockup Design
Just finished another mockup. This one is for redesigning the company website for RebornWeb. RebornWeb is sort of like the website design division of Reborn Software Solutions. Darye (founder and co-worker) decided it would be a great idea to split Reborn Software Solutions into RebornWeb and RebornCode. RebornCode will handle the more intense web application development projects while RebornWeb will focus on design and client-side coding. Read the rest of this entry »
Just completed work on redesigning the website for the Felege Hiywot Center. Overall, it was a fun project to work on as I had a lot of freedom and flexibility in designing and implementing the website. Best of all though, I didn’t have a burdening time constraint that I have had on other design projects. This allowed me time to explore a bit and implement more detail into the design.
Inspiration and Thoughts
Initially I spent quite a bit of time looking over their original website which was well-organized initially and had a very clear focus. This made my job easier. I usually start with the question, “what is this website trying to say” or “what is the message”. Then I identify who is the audience for the website (i.e. potential visitors). Read the rest of this entry »
Just completed the final mockup for the Felege Hiywot Center. This center is based here in Indianapolis and does some remarkable work with children. They have an excellent gardening program as well as cultural programs for Ethiopian children. Here’s a link to the website of which I’m in the early stages of redesigning – http://fhcenter.org/
Felege Hiywot Center Mockup