Tuesday, December 7, 2010

Slicing


            To put an image into Dreamweaver you just need make a CSS style for a div and go to background. There you can make it a color or any photo you may have saved. One good way to put things into the background is by creating your image in Photoshop first and then slicing it. This was you can cut the image into different sizes and save your sliced pictures. When you go into Dreamweaver you can put it back together piece by piece. This is really nice for images that you can’t create in Dreamweaver and need the tools of Photoshop to complete.
            To slice you just go to your knife icon in your palette and zoom in very close to your picture were you can see every pixel. When you size your div you do so by using pixels so you want to make sure your image is exactly the right size.  After slicing over what you want or completing the entire the size of the site you save it. Make sure to save it into your public folder under images so can have it with you whenever your working on them. Then they are ready for use, you can use a few or all of them.

The ugliest web site


            When searching for bad websites I found one that is proud to be the ugliest website. It’s called thebiguglywebsite.com. This site really is awful, everything that you could do wrong in a site they are doing. It has a number of typefaces in a number of different colors, with absolutely no hierarchy, which makes it hard to figure out where to look first and how to move around the page.  Some of the sentences are even flowing of the page; probably do to not using relative positioning.  They have big flashy animation that is extremely distracting and serves no purpose. It is really just a bunch of randomness that is hard to look at.  Websites like this are difficult for anyone to look at and it is the kind of the site that people would just breeze by because they can’t get what they want out of it immediately. 

My favorite site


            When looking over some graphic designers personal pages to get inspired for my own I stumbled onto one that I loved. It was bechira.com, it is interesting to look at and very organized. Even when only using black, white and shades of gray you can make a site very unique. It looks like he cut the site down in quarters and shows off his interviews, features, and other topics in blocks. Everything is very easy to see as you move down and read one after another. As you scroll down the site you can find anything someone who was interested in him would need, he has buttons for his portfolio, contact information, and resume. The hierarchy is very clear with size and with color. There are different forms of the same type, which keeps it clean and not over bearing but also doesn’t look repetitive. I think this site is excellent, it is easy to read but still catches your eye and has its own look without being “too much”. 

Tutorials


            When learning a new software there are many ways to go about it. The one that helps me the most is tutorials. I like that you can watch someone else do it and then do it yourself side by side. It is a great way to learn by doing. There are so many things to learn about Dreamweaver, and every other Adobe software, more then you can probably imagine. These programs are so powerful and there is never too much to learn about them. Some of the better tutorials that I found came from these websites. You tube is very good because a lot of people put up videos on there spare time. They may not be professionals but the tutorials are still very good. Adobe TV is another very good one, it is straight from the creators, which is nice and best of all, it’s free. To get the long tutorials with a lot of information you have to pay for them, but if you’re just looking to learn specific things the short free videos are very beneficial, and really they can teach you the same things you just have to look for it.

Akron University site


            When I go through the Akron University web site I start to feel overwhelmed and annoyed. I think this is one of the hardest websites to navigate through and it is one we have to be on almost everyday.  I think one of the most obnoxious things that a web site can do it is make every link a new window. This crowds up the desktop and makes things unorganized. It also gets confusing and makes it hard to find where your trying to go. If you accidentally close one out then you can’t go back and have to start all over again, which can be time consuming especially when trying to get your email.  To that you have to go to the Akron website, then to zipline, then to students, then to another password window, and then finally to your email. All of which have their own window. I feel that to make this site easier to navigate and more comfortable for people to be on they should just have the one window and you should be able to go back instead. This would be much more relaxing to look at. 

Advertisments


After reading a couple different “don’t do its” I found one that was very interesting. I never paid to much attention to it but it is said that the average person ignores advertisements and anything that might look like it. After seeing them so much and recognizing what not to look at, it just becomes habit. I actually do this too; I want to find exactly what I am looking for without becoming distracted.
            The three things that people ignore are banners and anything that looks like them when positioned or shaped on the page. Any kind of animation, which includes flashing, fast movement, or type moving around the page. And the last is pop-ups, probably the most ignored. When another window just pop ups most people immediately close it out without even looking at it. So if you have anything important on that page it just disappeared, and you probably upset someone. Having to close out another page just interrupts what everyone is doing while browsing.
            When designing it would be smart to stay away from any of these types of design, especially if you are trying to get something important across. When I’m browsing or even playing certain games on my iphone I don’t even notice they’re there. And that is probably how most people feel about them. 

age demographics

When designing a web page one thing you should think about is the user ability for different age groups. You might not see the same things or have the same problems as an elderly person.  One thing that designers should keep in mind is making sure people have the ability to increase the size of the text opposed to freezing it at a certain size. And going no lower then 12pt when your web site is made for that demographic. Another thing that would help is to keep things organized and not cluttered; this gives the ability to move throughout it faster and more accurately. Also, anything that is a link should be slightly larger and not moving, this way it is easy to identify and not hard to grab. While this is important for people seniors it shouldn’t be just used for them. These are rules that can help the browsing experience for everyone. Keeping in mind that everyone searching the web is not a computer wiz and maybe has never even used one; you still want your page to be able to be viewed by everyone that comes across it. Little things like these tips can make it easier for everyone. 

Tuesday, November 23, 2010

Best web typography

         According to I love typography.com the number 1 best out of 15 web pages in there use of typography is A list apart.com. I think they were rated number one because there web site is very clean cut and easy to read. There is four columns, three that have text and one that hold there logo on the top and very nice negative space below. This gives room to breath after reading. There is very obvious hierarchy, the largest being a different font and a different color and then second largest just being bold and another color. Everything is spaced out nicely and not to cluttered. The only thing they have in there last paragraph is widow, and that could just be overflow from the size of the screen or placing.
         The second best web site was shauninman.com. I really like this site because it is black and white and looks very simple but still makes a great statement. Instead of just using black as the font color though he uses different shades which gives it impact. Everything is done very nicely in two columns and there are only two type faces used. One for the hierarchy and one for the text. The text is very easy to read and move your eye around because of the nice spacing between paragraphs and titles.

CSS new rule

After creating some code in your HTML you can go to CSS, make a new rule and alter its appearance. Say you have written a long essay and want to change some of the specifications of it's look. You can go to your "new CSS rule" button, located in your CSS styles palette and click it. Once the window appears you could just type in H1 (or <p>, <h2>, etc) if you are selecting tag in your selector type along the top. Anything that you alter in your CSS well now effect everything within the brackets chosen. If you went to your selector along the top and choose Compound this will allow you to go into a little more detail. Before you do that you want to put your curser within what your trying to change and Dreamweaver will already type in where you are. But you can also type it in. (ie. .Container h1 p). This will effect only that area and nothing else.

Type in Webpages

        When creating a web page you still have to pay attention to your typography. Working on the computer and designing a web page that is easy to read and pleasing to look at come with a whole new set of things to look for.
         The biggest thing to pay attention to is that the computer you design it on, is not the computer that it is getting viewed on. Screens are all different sizes and show colors that won't be exact to yours. Make sure you structure you page with divs first and then keep your type within them so that they can't be cut off.
        Also, be aware of your options of type faces. Not every type you know will be there and even if it is, not all computers can see it. If you pick Arial and that computer can't view it the next that will show up is Helvetica, and then any Sans-Serif. So it's important to make sure that your design will look okay with any of these Sans-serif.

Tuesday, November 16, 2010

Positioning

One of the main things used when putting together the structure of your page are Divs, and they need to be positioned on the page. The four different types of positioning are: absolute, static, relative, and fixed.
            Absolute is gets placed relative to the page unless there is another element on the page. You the use the top, bottom, left and right to position it where you would like. Static is the default for Dreamweaver, it will be positioned onto the page where is normally would be. Relative is positioning an element in relation to itself it moves top, bottom, left and right from where it was.  And fixed is when you position something to stay on the screen even when the site is being scrolled up and down. 

Thursday, October 7, 2010

Tips


After looking at numerous “tip” guides I found that they all have some of the same main and most important ideas in them.  They all agree that the web site should be easy to read and also to navigate, there should be a very clean layout with hierarchy present, design for optimum load time and minimize graphics. I never knew a lot about web sites and what I do know is so far learned from this class, but the more I read and hear about certain things and these tips the more I am understanding there importance. Especially after designing my own page on photoshop it became more clear that it needs to be easy to read, I want people to ease into my site and not look away because it is too difficult to figure out where to go. And the more I look though sites to study them I realize what behind that and what you have to do to achieve a low load time. With out that people with there short attention span would just move on to a new website if that one wouldn’t load fast enough for them. These tips are very important, along with others and they are things that I want to make sure my web site has. 

Award Winning


Gliddens web site was awarded best in show at this years web design awards. Looking at this site you can see the appeal of it. Right away the introduction of a paintbrush painting information across the screen is eye catching. Everything about this site is very organized and easy to get to along with a lot of pictures and colors to go with the information. There little details through out the web site give it a lot of character and make it fun, like the tabs along the header being mini paint rollers with different colors. This web site is really nice and very user friendly and is full of organized information.  

Busy Sites


While searching for all different forms of websites, good and bad, I found this way to busy site at lingscars.com. This web site had so much going on that I had to look away, there is no way to tell where hierarchy is and random objects or words keep flashing around the website non stop. There are so many colors overlapping each other, arrows pointing to everything, and tons and tons of ads, it is hard to believe this a legitimate company that wants your business. If I were searching this site for information or wanting to make a purchase after looking through it I would turn it off because of it’s confusing direction and lack of organized information. 

Thursday, September 2, 2010

Week 2- Web 3

            After watching the video in class by Pranav Mistry, an MIT student who is creating the "sixth sense" I was blown away. It's hard to imagine that reality and technology can come together as one and be an average part of your everyday life, it truly is what I consider futuristic becoming closer and closer to being the norm. When I first got a cell phone it was a huge Nokia block, and the internet was not nearly as developed as it is now. The idea of the two of them coming together in the first place was never something that could have even crossed my mind. It's amazing how far they have come just during a small portion of my life.
           After I got home I continued to watch a few more videos about this same topic. It is expected to be out within ten years, the creator and his professor want to make this product available to everyone so that anyone could attain this. Once they come out they should not cost more then a average cell phone does for us now, the actual product only cost about $300 to make and he wants to keep the price low enough for everyone to afford.
           Once this comes out and web 3 is officially here I think everything we know will start to change. This is the start of basically not having hardware and I can't imagine the possibilities after this. It will make everything on the internet more accessible probably resulting web pages being more important to everyone and every business. Seeing as how you can use it wherever and whenever there would be no use for things like menus, brochures, or anything on paper. All information can be given through this device. On top of just the web it will be interesting to see how everything else changes.