Art 575: Graphic Design in the Digital Environment: September 2011

Friday, September 30, 2011

I picked another site in the same genre as the others I have posted because I figured after our critique on Wednesday, these references of CSS and HTML might actually help us fix what we have done and add to what we will be doing here again for Project 3.

http://www.webmonkey.com/2010/02/html_cheatsheet/

So I thought that since we're going to be starting javascript here pretty soon I'd try to find some basic info on that. I found a lesson online. Now its really long but its also very in depth. I know I had problems with css so I thought hat maybe if some of you had time over the weekend going through this will be helpful for next week when we dive into it. It talks about browsers, how to write it, IO programs, coding and how to operate it etc.... Anyway I hope this is helpful for some of you!

http://www.educator.com/computer-science/java/hillstrom/introduction-to-java.php?ss=12

Thursday, September 29, 2011

Button Maker!

We have all spent a lot of time learning about CSS and HTML. It is important that we know these things because we may be in a situation in a future career where we are asked to design websites, and it will be helpful to have a background in coding. Although this information is important, some great features online are available for us to make our lives easier. On a blog I ran across I discovered this button maker program that you can design the button you want and customize it, then apply the custom CSS to your code. I’m looking forward to trying this out on our next project!

http://css-tricks.com/examples/ButtonMaker/#

Julie

Saturday, September 24, 2011

www.westciv.com/style_master/academy/css_tutor ial/

I thought that since this was our last week to work on css that I'd post this last thing on it. This takes you through pretty much everything basic about it and farther. I like how it introduces some new property/attribute/value things we haven't gone over that we can now apply. It even talks about user interface and such whatnot! Enjoy!

comedic therapy

Hey everyone. I've been thinking a lot about how to design my website and what makes a good UI. To bring some levity to the situation I found some comics for this week's blog post.

More UI comics

http://line25.com/articles/10-common-validation-errors-and-how-to-fix-them

This is an article about validation errors and why we need to validate our sites. Also, this website has a lot of other that seemed interesting and helpful.

User Experience

This video is an interesting look into the User Experience. Marc Hassenzahl discusses his views on the user experience and how he dislikes the term. To him, experience is way more than what you simply see and the ease on which you navigate a website. You must also include psychology, and what it would mean to design towards an actual experience as apposed to designing strictly to an aesthetic point of view. This video really brings into light the different aspects that go into making a great user experience.

Hi, I found this explanation of sprites. I posted it in our group of facebook, but I thought it would be helpful on here too. It just explains sprites and the code. The actual company that posted it is {e} House Studio. Their blog is pretty interesting, besides the sprites tutorial they post info about business and design. I hope you find the link helpful and be sure to check out the rest of their stuff.

Sprites

Speckyboy Magazine

There's a design magazine called “Speckyboy”- It revolves around citing resources, new trends and competitions for web design. There's even a link to see some before and afters of web blogs, including one for “Web Designer Wall” - the blog we see a lot in class. I've never really looked around for a magazine that isn't strictly for print material so I think this one is a good find!

http://speckyboy.com/

PS, this magazine has tutorials, tips and free stuff for Illustrator and Photoshop too :)

http://www.establishednyc.com/main/index.php

Here is a cool type website. I thought it was good inspiration for this project because it is pretty much all type. It is giant text and giant buttons, and that’s pretty much it on the front page.

I am posting a website that is a helpful CSS site because since we are still beginners, I have a hard time knowing how to do what we should be doing. Hopefully this helps!

http://artypapers.com/csshelppile/

Good typography websites

I found this site helpful while looking for website inspiration! These sites are very aesthetically pleasing. They have used typography very well and have showed how a simple site with a good color palette can be successful!

Not only are these sites pretty to look at but they are also very user-friendly and easy to navigate, which is the most important function of a website!

http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/

Friday, September 23, 2011

Linotype

Linotype: The Film

This takes you back to the beginning of type. It is very interesting to watch and to think about how much it has influenced our world today. You can tell that the people interviewed are very passionate about it. And I thought they were precious! There are several more videos linked to this one that I would recommend watching as well.

Thursday, September 22, 2011

Five Principles for Choosing Typefaces

As we design things we all come to the point where we have to choose a typeface to fit the thing we are designing, and sometimes it stumps us. I know that I've been in that situation. Here's an article about choosing typefaces, whether it be for websites or print materials. It talks about when to use certain typefaces and when/what typefaces should be mixed and matched together.

http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

8 Deadly Sins of Site Design

This is a neat thing I stumbled across this week. Since we are continuing to work on our website redesigns, I found this link particularly relevant. It is a neat info graphic on why people will leave a website and how you can fix it as a designer. It touches on topics such as bad navigation, bad content structure and poor legibility. This is a well-designed graphic in-and-of-itself and also relays important info about web design.

http://visual.ly/8-deadly-sins-site-design

Julie

Wednesday, September 21, 2011

Fun Fact

(this doesn't count as my weekly blog post, but I wanted to share...)

Pandora has switched from being a Flash based site to HTML5. Neat!

http://blog.pandora.com/pandora/archives/2011/09/new-pandora-for.html

Julie

Monday, September 19, 2011

Good Structure

In web design there are things that you should and should not do. Using "cheater" code or cutting corners with HTML coding can cause not only occasional problems with the functionality of the website but can also limit its full potential. To go along with this, I suggest that a web designer/ coder do research every once in a while to keep up to date with new code standards and which actions might be discontinued or suggested to not use because Browsers get updated and changed.

Saturday, September 17, 2011

Organizing Content

This is a helpful website that talks about good ways to organize content when creating and designing websites. It relates to our first project since we’ll be re-doing cluttered and inefficient websites and making them more user-friendly and organized.

http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

Good Morning Marketers

So this week’s video is from Good Morning Marketers. It’s about four minutes of an interview with a graphic designer about web design. The video is clear and concise and has some good advice. They mention the “three-click-rule,” which means you only have to click three times to get anywhere on the site. Some site examples are also shown. I hope it’s helpful.

http://www.youtube.com/watch?v=lkn1Xa8UI2k

CSS Image Shuffling Display

Image Shuffling Display

This website shows step by step how to create a CSS photo gallery with vertical thumbnails. I found this interesting because I thought it might be a nice feature on a portfolio page or something like that. The nice thing about it is that the code didn't seem too complicated. It might even be something you'd be able to modify to work exactly how you want it to size and shape-wise. Enjoy!

This is a great article talking about the importance in flexible web design. I think every web designer should take in consideration the fast changing technology we see today and how it affects our web layout.

http://www.onextrapixel.com/2011/02/04/the-rising-importance-of-flexible-web-layouts/

"Cascading Style Shit"

http://cascadingstyleshit.cocoagrove.com/

I'm really diggin' this site. I found it to be one of the more useful sources for finding trendy and successful stylesheets/website layouts. It gives out different galleries to look through. I've also been checking out the color swatches throughout each site to get ideas!

http://www.google.com/imgres?imgurl=http://www.webdesignstuff.co/wp-content/uploads/2011/07/solo.jpg&imgrefurl=http://www.webdesignstuff.co/2011/07/10-typography-web-design-for-inspiration/&usg=__8lXhrmrjNjVtRHYf5f1nwfxSW7A=&h=587&w=1252&sz=115&hl=en&start=6&zoom=1&tbnid=aP1EvUUW8vuarM:&tbnh=70&tbnw=150&ei=kFx1Ttj2K-mPsQK0w7mMBQ&prev=/search%3Fq%3Dcool%2Bweb%2Bdesign%2Bstuff%26hl%3Den%26gbv%3D2%26tbm%3Disch&itbs=1

I picked this site because it has some good examples of text websites and that is what our project is. They are some fun examples.

So, I am a bit dyslexic (I really am, which makes reading html code really interesting for me...), and all this grid-960 stuff has gone over my head a bit this last week. I wanted to find some more info on the grid system that would spell it out for me more. I found this explanation about 960 that helped simplify things a lot. It also has links to grid based design galleries that I found interesting as well. I hope you enjoy this page, cause it helped me.

960 Made Easy

Friday, September 16, 2011

The Bigger Picture

http://www.slideshare.net/whitneyhess/10-most-common-misconceptions-about-user-experience-design?type=powerpoint

Here yet again is another post about user interface and what it actually means. Even though by now we all know what UX is and pretty much understand the concept I feel like it is important to keep reviewing it. Maybe this is just me, but I have too keep reminding my self what it is that I am doing throughout a project because it seems like we get blinders put on us and get totally consumed in our design sometimes because that is what we do. It’s who we are. But this process is something that needs to be looked at as a bigger picture. Slide number 42 on this site explains it pretty well. Take a look to keep yourself on track.

Website layout tutorials and inspiration

Since this week we touched on CSS3 and HTML5 a bit more, I thought this inspirational website would be appropriate. Also this is good timing because our homework this weekend is to begin creating website layouts, and that is exactly what this link is about! This site has information about web templates, techniques, designing layouts, and tutorials on how to do everything. I found this site particularly helpful to start thinking of ways to create good layouts for our second project,

http://acrisdesign.com/2010/03/html5-website-layout-tutorials-and-inspiration/

Julie

I found this site about CSS and the thing that I really like about it are all the different things it links you too. There are basic tutorials, references, forums for fellow users that have questions and a couple links to pages with some nice examples of work done with css. You may have to explore a little bit to find the good chunks but I think it will be a good reference point too future questions and even some we're having now.

http://www.webstandards.org/learn/external/css/

Thursday, September 15, 2011

The Influence of Print Design

Here is a video about some of the major differences that are noticeable between the mediums of print and web design. The web designer speaking in the video talks about how he takes his knowledge and experience in print design and brings it into his web design projects to create a more visually appealing design.

http://blakemccreary.com/2010/04/the-influence-of-print-design-jason-santa-maria-talk/

Learning Animation in CSS

This is kind of cool and I don't know if we are quite there yet and ready for this stuff but it looked easy enough! Its ways to make your text, images, drop down menus and so on animated on your screen using CSS. The original site that opens up just click on the links that say the cool stuff and it sends you down the page to see how to do it. Take a look see!

Monday, September 12, 2011

Web Design Breakdown

Even though web design is just the distortion of HTML text with the help of css and some php, there ends up being more time put toward solving other problems with coding and getting angry than you do actually designing the website. I have worked with HTML for a while now and i must agree that the problems in making a good website lie more in figuring out the small things. Coding can be complicated and making sure that it reflects the design your wanting in all internet browsers makes 90% of your time spending making your website.

Saturday, September 10, 2011

Typography in web design

This site has some good tips about typography on the web. Since our second project is primarily focused on typography, I thought this would be a helpful site to post. It discusses popular typefaces used on the web, differences between print typography and typography for the web, designing in CSS, and also provides a few well-designed sites as examples.

http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/

css help!

So, searching for CSS help on the web, I found this site called GoSquared. It's pretty much a blog that is dedicated to helping people run websites. They want to encourage people to sign up for a fee, but they also give some free help. The first link on this post goes to the site, where you can find the link to a pdf cheat sheet for css. It has reminders of what and ID is and many others all together and easily browsed. The second link should take you directly to the pdf, should you want to skip going to the site. I thought this type of thing might be helpful to everyone . Hope everyone finds it useful.

CSS HELP!

pdf sheet

Stereotyping

So I found an interesting article about web-designers. With nearly every profession comes stereotyping and those stereotypes aren't typically posistive. The ones listed on this page are pretty funny, as long as I don't turn into this person. I don't think any of us will end up this way... at least I hope. I personally like the one about being greasy ;)

http://freelancefolder.com/8-stereotypes-about-freelance-web-developers-busted/

Psychological Study of Web Design

Found this on one of my favorite sites, Abduzeedo. This post taught me a lot about what all goes into a site to make it look good not only to designers but to anyone that would visit it. It taught me that most people make an instant opinion of whether they like or trust a site as soon as they see it, so design and functionality are the most important things to plan out before starting a site. It also goes into the psychology of certain colors and things like that, that make people respond certain ways to certain sites. Really informative and cool.

http://www.webdesignfromscratch.com/web-design/10-best-designed-web-sites/#1

I liked this site because it shows the really well designed sites, and most of them are very trimmed down to the basics. This is exactly what we are doing for are next assignment so I thought they could be helpful. WE can study them and get examples and ideas for how we change the websites that we find need help.

50 tips for web design

50 Tips to a User-Friendly Website

I chose this site because I think there are some really valuable basic rules on here that I wasn't aware of. Knowing some of these tips before we begin to take on some of these more comprehensive projects could save us a lot of frustration and make our sites look much more complete and professional.

Week 3 Blog Post

I found this tutorial online and thought that it may be helpful to some of us who may be struggling with getting the hang of web design. I think that if offers some helpful hints for beginners. There's a few links that talk about html, css and even java script. Hope it's helpful to us as we continue figuring everything out!

http://how-to-build-websites.com/

The Brads

I came across this and thought it was funny because I relate to it a little too well. I often get so sidetracked with looking up cool things about designers and other work that has been done that I forget what I began looking at them in the first place for. This particular comic is from a series called "The Brads." "The Brads" is about two web designers and play off of web design humor and events that are going on today.

Friday, September 9, 2011

I found this site that has a few articles for CSS beginners. As I'm an ultra beginner some of it is a little over my head but reading through some of these articles I found them informative and I'm sure as we go along it will make (more sense and) a nice reference point for the future. There are a few good ones though that talk about things we've touched on like the box model, and the way different browser interpret CSS differently, and divs.

http://line25.com/articles/15-must-read-articles-for-css-beginners

Difference of UX and UI

I found this little video while looking up information and tutorials on youtube about writing code for html and css (which I am currently not a fan and if you have any video or websites to help me understand they would be most appreciated). The video is very short and very introductory but it is the foundation to ux and ui. If you are still struggling with this idea then this video is for you. I hope that if nothing else this video makes you laugh. Take a study break and enjoy!

http://www.youtube.com/watch?v=2wZUTe70w1Y

Designing websites on a grid

Here is a site with some tips about designing a website based on a grid structure. It should be relevant to the upcoming Project 2. It seems strange that website grids can consist of anywhere from 8 to 20 columns whereas in print design we use at most an 8 column spread.

http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

http://www.youtube.com/watch?v=sG7HxNztNNQ

This is a cool video showing the progression of web design. How fully integrated web will be in the near future. Web is such a rapidly growing field and touches everyone's life is some way around the country and even world-wide.

cssleak.com

I found this cool web design gallery that is all about show really interesting web designs. It has a great news feature that showcases tutorials, and tips for web design. I found it pretty informative, and the web pages they feature are really cool.
CSS Leak

HTML5 Video Player Tutorial

http://www.splashnology.com/article/how-to-make-your-own-video-player-on-html5-video/2654/

So we are just beginning to enter the world of coding and web design, but this advanced tutorial is an exciting look into what kind of things are being done with HTML5. We saw that website in class that had special effects without using flash and also got to do our own research into non-flash-based sites that still offer great design and effects. I ran across this tutorial on how to use code to create a video player with HTML5. I think it is really exciting to see how typing in simple text and characters can turn into a video player when viewed online. It is important for us to keep up with these developments so that when we enter the professional world of design we have a good understanding of how the web design world works.

Julie

Thursday, September 8, 2011

Devlisting.com

www.devlisting.com

Devlisting is a site that contains all of the resources you might need when you're lookin' around the web world for inspiration, tips or tools. It's great because you can 'pin the ones you like, and just skip over the ones you know. It has a whole section devoted to CSS. I recommend “clean CSS” and “HTMLDog”. The sites are easy to navigate and I think they're pretty helpful to answer random design and coding questions.

An interesting article that I think will help a lot of us understand css.

http://friendlybit.com/css/beginners-guide-to-css-and-standards/

CSS with more depth

I really think this website is right on cue with what we talked about in class. It has very cool ideas as well as telling you how to do them with CSS. Click around, check out some demos! Maybe some of this will appear on our personal websites!

http://css-tricks.com/