This Weeks Progress

Well I have completed my next 4 pages and I am getting pretty comfortable using CSS. The only problem that I have is that what looks perfect in Firefox looks screwed up in IE and vise versa. I have a feeling that I will have to design this site in both a Firefox and IE version before I go into the portfolio classes. Even though IE is out-dated, there is still a vast majority of people who use it. Oh well, I know in Javascript that there is a method that can check the browser that the user is using and from there I could use a simple if statement to determine which version of my site to display.

Creating Rounded Tabs In Css

After spending hours of searching and testing I have found the best and easiest way to create the rounded tabs using Css.

The site www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml was the best resource for me on creating tabs the rounded tabs. The site uses small corners 10px X 10px to use as the rounded upper part of the tabs. They also make good use of both the div and the span tags to attach the rounded 10px X 10px tabs into the background of the menu.

I strongly recommend this site as a resource for anyone trying to create tabs. One of the many sites that I came across for creating rounded tabs in Css only, didn't allow the tabs to change color when rolled over and was a lot more complicated in trying to understand what they did.

Update on Website

After creating the first page using CSS, I have come across a cross-browser incompadiability issue. For some reason the code shows up perfectly in IE, but when I open it in Firefox, or Safari, the menu tabs don't display correctly. I keep changing different elements and through changing the position from realitive to absolute, but nothing seems to fix it in the Firefox or Safari browsers.

A minor issue that I ran into after creating the site, is that I did my flow chart after scripting the first two pages for class. But it not that big of an issue, and can be corrected in about 5 mins. The above issue is the one that is giving me the headace though.

My Design Process

Before I started writing down anything on paper, I first did a little research. By looking through a lot of technical service sites, I got a good feeling about what has been and what should not be done. Most of the technical sites hurt my eyes, because of their poor layout or lack of design. When it came to the design of this site, it was apparent to me that I would have to use concepts that are apparent in well-designed sites to breath new light into this technical field of web sites.

After finding several reference sites, I began to sketch elements that I liked from each of them and started to put them together to see if I like how they flowed together. Then by remembering what I've learned from previous classes on designing for the user, I tried to come up with a simple navigation system that would be easily used by the user. I think that my last 2 comps do the best job of that by utilizing a tab format to contain a lot of information into a well-organized format.

The overall theme I tried to portray into my design was the feel of technology, by making mechanical and circuit board type looking borders. I tried to keep it simple sticking with solid color vectors that could be saved as small file sized gifs. I then borrowed some pictures from Dell and used Photoshop to make them look like they came from Goode Technical Services Company.

My Final Web Project concept is...

For the final project in this class, I’m thinking of redesigning the site of an old acquaintance of mine. His name is Corey Goode and he is what someone might call a freelance technician. He has a company called Goode Technical Services in which he does business around the Dallas Fort Worth are in network solutions, computer repair, and other types of technical services.
By looking at his current site at www.goodetech.com, one can definitely tell that his site needs a full reconstruction. The current site looks like something done in a program like Front Page or Microsoft Word. For the look of the new site that I’m planning on building in here, I think that using a simple and elegant approach might be the way to go.
One of the first things that this new site will need to have is a whole lot more content. By using other better-designed sites within the same field, I feel that I will be able to generate enough content for this subject. I already have a few custom graphics for the different pages. By taking some pictures of different types of objects related to his services, I think I could make the site a bit livelier.
Overall, I think that this site could definitely have some potential for CSS in helping to create a great looking and designed website.

Week 2 Site Reviews

Still in the process of deciding what to create a web site on so I have decided to go a couple of routes to determine which avenue I wish to go.

The first site is a technical site own by a person that I used to work with. He has a company called GoodeTech.com and the URL is www.goodetech.com
This site is one that needs a major overhaul. For starters, it needs to be created using CSS and not MSWord or some other Microsoft product. Some of the major changes that I would implement, would be to add some more visual appealing content as well as adding about 10 more pages of content. Some aspects of this site that I could apply to my own design knowledge would be the graphics, animation, and web development that he points out in his site about being able to do. As far as specific features that I would use in my site would be to actually create a page for each of the area listed under his services and actually go into better description as far as what each of the area do.

This second site http://www.mentor.com/ is a good example of what the first site goodetech.com could become. This site is a site that offers similar services as goodetech, but is much more professional looking. The site has good organization of their links and it doesn’t have the look that other technical service sites do. One aspect of this site that I could see using in my own site is some of their organizational techniques for displaying all of their services.

This third site http://www.experts-exchange.com/ is better example of what of how technical site can be visually appealing. Like the first two sites mentioned, this site provides technical solutions and support to individuals or small businesses.

3 topics that I would like to see addressed in the course.

When it comes to topics stated in the course syllabus that I would like to see addressed, the first that comes to mind is using CSS with XHTML to attain more precise control over layout, placement, and typography in browsers. I remember taking HTML four years ago and having to be stuck with tables or frame, this is going to be so much better. Redesigning in hours instead of days or weeks is also another very appealing aspect of using the technologies outlined in the syllabus. Time is definitely something every designer could always use more of. The top third topic that I would like to see addressed in this course is being able to ensure that sites designed with these techniques will continue to work in tomorrow’s browsers.

My Personal Design Process

The process in which I use in creating something along the lines of a website or any interactive piece for that matter consists of several different stages. The first stage is where I brain storm about the subject that the piece is going to be over through the use of bodystorming. After gathering many of the different ideas, I begin to group the ideas together into categories and sub categories using similar sites as a reference to get a good idea of what works and doesn’t work good together. This is the stage where I emerge myself in all the research I can on the topic to try to take in as much information to get a better feel for the topic in which I am designing for. The next stage is where I start creating thumbnails as to what the layout and overall look of the site will look like. After about 12 or so, I begin to envision which layout and design would fit best with the content. When a layout is chosen, I then begin to create the site on a sketchbook and start drawing and writing down the code as to how it will function. Once I am satisfied with the paper model, I then take it to the computer. From this stage on, I have a pretty good idea of the types of images and typefaces that would look good together and I use the computer to test out the pen and paper idea. After this stage, it basically me testing out different elements and either deciding to go with it or to go back a couple of steps until I find something that I like.