courtneywenrich

Just another WordPress.com site

Archive for the category “Web Design 1 & 2”

Web II: @fontface

When you are making a website, sometimes you just want to use your own fonts. Fonts that find the style of the webpage. Now you can by using @fontface. @fontface allows you to use a font that is available on the web. The only thing with @font have is that not all web browsers support it. This is still a new idea, also there is still licensing issues that are working out. THere is another way of using fonts from the web without licensing issues in the way. In the book there is an example of a website called typekit. This site allows you to embed fonts on your webpage. Another example of this kind of website is google fonts. this website allows you to embed fonts in your webpage.there are many fonts to choose from so you can pick fonts for your body and headlines. This website has no licensing problems with doing this. By using google fonts or typekit it allows you to style your website how you want and it works with all web browsers. Typekit and google also provides back up fonts so that if the font you want doesn’t shoe up on the particular computer that it will have another that is similar. This helps ensure that you do not mess up the look and feel of the website.

https://typekit.com/

http://www.google.com/webfonts#ChoosePlace:select

Advertisements

Web Design II – Designing from the Content Out

In chapter 16 it talks about how you can design from the content out. This would be to design your site according to the content that you want to display. You could start by designing that part of the page that will hold the content. This would help ensure that you can work your way out. Starting to code the content right away will help build the site around it. When the content code is finished, do a quick sketch and build your navigation and footer next. More than likely it will be on the outskirts of the content.

Building a site from the inside out is good when you want to focus mainly on your content. The design will pull you right into the content, where you can read what you need to read.

In the article I read below it describes some ways to improve your design around content. To start, your headlines are one of the first things you see one a page, some headlines will be more dominate than others depending on the type of website it is. For example if it was a blog or news site you might want to have a little more enticing headline. Image sliders and galleries are another major part of content and is used very much in the web. They are best displayed on the home page. As for the text of the page, you want it to be readable and getting outside opinions on color scheme, font, or size will help with readability. But the dark text on a light background with average size font is the best for readability. There are some other tips listed such as gathering user information, reduce distractions, and using smaller graphics.

http://speckyboy.com/2011/11/21/tips-on-designing-layouts-focused-around-content/

Web Design II

In chapter 8 it talks about how there are many common errors in modern markup. Basically that means that there are people making things much harder on themselves than it has to be, and eventually it might effect the design. For example in the book it shows a class in front of each paragraph but really all you have to have are those paragraphs wrapped in a div. You do not want to overuse the div because that can also create a mess just like it would if you used the classes. One of the best ways to keep things labeled is to use an id. You can use id’s for many things such as ul id=”navigation” or div id=”books”(examples from the book). Another habit that you shouldn’t get into is inline CSS. CSS should be done in a stylesheet and not in the markup.

You should always test your design in a browser such as Firefox, Opera, or Safari. If your design looks like it should in one of those web browsers then you should test it on the latest version of Internet Explorer. If they do not look the same you need to go back into your CSS. By checking your design in each of these browsers you eliminate the errors.

These are just some helpful tips that will help in making a better website, and doing things in a way that will keep up with modern times. A good way to start is not getting into bad habits that can create more problems in the long run for you.

http://blog.themeforest.net/tutorials/common-mistakes-in-web-design/   (copy and Paste)

PDD and Wireframe

http://www.foodallergy.org/

High Priority

FAAN: The Food Allergy and Anaphylaxis Network

The logo should appear on every page to keep consistency and to have brand recognition.

Main Navigation Links: About Us/Education/ Awareness/Research/Advocacy/Allergens/Media Center

The links should have a consistent feel and should be the same throughout all of the pages. It will be easier for the reader to navigate through the site, because they know where and what to look for when they want to change from page to page.

Image Slideshow

FAAN will provide images to create a slide show of current things that are going on. The purpose is show awareness of food allergies and reminding people around the holidays of food allergies.

Medium Priority

Message: Awareness of Food Allergies and anaphylaxis

Show awareness and was to help with people with food allergies.

Low Priority

Address

Contacts

copyright

wenrich_wireframe

Furture of the Web

I can see the future of the web being big. It is already becoming huge and a big part of our daily lives. As we progress in the future there are so many more things we can do with the web. You can find anything you want, when you want. Looking back when I was younger we had one computer in our house and I went to just a few websites, but it wasn’t anything special. That was only the beginning. It is fascinating to see how the web has grown. I will be even more interested to see what it will become in the future. I see it becoming our lives. This could be a good or a bad thing, but I believe it will not be all bad.

Good vs. Bad

There are many well designed websites out there. I had a difficult time trying to find ones I didn’t like. Some of the ones that I use a lot and like are Google and Bank of America. I use both of these very often. For me they are easy to navigate through, and I find what I need very quickly. The websites also look professional and, clean. What you see is your first impression of anything. If you see a website that looks like a cluttered mess, there is a good chance you probably won’t stay and look through the webpage. I did find one website that I didn’t like and that was Ritz Camera. This website looked a little cluttered to me. I was trying to look through the website to buy certain things for a class and I just didn’t have any luck. It was hard to navigate through and I ended up not being on the site for very long. A lot of people base their first impressions on what they see and if they do not like what they see there is a good chance that they will not give it a chance.

Good

http://www.google.com

http://www.bankofamerica.com

Bad

http://www.ritzcamera.com/

website usability

From reading this article I come to understand that it is very important to be organized before creating a web page. If you do not keep things organized before creating the html, it becomes difficult to keep your thoughts and ideas together. When you do sketches and have things kind of layed out before you do the html you are more likely to do a better job and really try to get the web page how you really want it. Another important tip is to try and use different sorting strategies such as, alphabetical, chronologically, by type, hierarchy, spatially, or by magnitude. When you try to sort your information try to use two types of sorting and see which one actually works better. Next, you want to make sure that you can access the home page from any page! This makes it easier to navigate through the website. You want to make it easy to navigate so that the person searching through does not get over whelmed or confused with that they are looking at. These are just a few tips that came from this article but, I found it very helpful.

Introduction

Hello! My name is Courtney and I am in my third year at Stevenson University. My major is Visual Communication Design and my focus within that is Graphic Design. I am pretty excited about the classes I am taking this semester especially web design. I think it will be interesting to learn about web pages and how to make them considering I do not know how. I like to learn new things and I believe that is why I am excited for my classes.

Post Navigation