The Gridulator!

One of the coolest things I’ve discovered in searching for great things to blog about have been all the neat, free tools online that are designed to make web-designing easier!  This is an especially neat find because we were just talking today about making mockups and how it’s important to see how things will look when they are actually applied to the grid.  The first link below is an online tool where you choose the grid you’re using (in our case, 960) and the number of columns.  It then allows you to preview it and download a .png!  Below that link is the link to the article that lead me to the grid helper.  Both are fantastic resources!

http://gridulator.com/

http://designreviver.com/general/three-cool-and-fresh-design-tools/

Julie 

I guess you can apply this to many different things but mostly this is about web design. Its good to give you're users plenty of information but its bad when its overwhelming. This article talks about working on the flow of information and how it makes users feel. It mentions the kind of images you should use as well as layout and when its appropriate to have a challenging website vs a simple one.

http://www.boxesandarrows.com/view/design-for-emotion

Here’s an interesting site that talks about the basic trends in sites today, such as keeping the layout simple, using mostly neutral colors (along with some stronger colors), and utilizing white space in designs.

http://www.webdesignfromscratch.com/web-design/current-style/

Web designers

http://www.selfseo.com/story-18143.php

The content of this article is about how even a beautiful web site doesn’t mean a thing it doesn’t get any traffic and on the other hand an ugly web site can be successful just on the basis of getting people directed to the site. It says that most people who make websites either tech savvy or only design savvy and this is the reason that this is the reason most sites suck. That is why I feel that this class, (Art 575) is beneficial even if it is a pain to learn.

Don't Fear the Internet

After the frustration of project three, I’m happy to share this week…Don’t Fear the Internet: Basic HTML and CSS for Non-Web Designers! It’s a compilation of videos made by Jessica Hische (designer/type-extraordinaire) and Russ Maschmeyer for designers who need to know html but just aren’t web designers. Sound familiar? Anyhoo, here’s the link. Hope you enjoy:

http://www.dontfeartheinternet.com/

http://sixrevisions.com/web_design/website-introductory-text-tips-examples/

A good article on how to make our websites standout more. I think this can help us all, since we are starting our portfolio website.

Week 10

This website shows the web design trends from 2011. I thought it would be helpful as we start our portfolio projects. It can give us ideas on our layouts as well as other style elements.

http://webpagebynumbers.com/web-design-trends-2011-2012

CSS3 & HTML5 Templates

So this is a pretty nice site in and of itself.  This particular article links to a number of free HTML5 and CSS3 templates.  Since we are learning, it is important that we are making our own sites for now, but these sites are great for inspiration and learning how to accomplish some of the things we want to with our own designs.  Some of the elements used for these sites will be particularly useful when we begin to design our personal portfolio website.  There are many different ways for us to display our works and this website can be a good reference for when we are ready to design our own page.

http://www.designrshub.com/2011/10/50-fresh-free-html5-and-css3-website.html

Julie 

Blog Post 10

We are always talking about trends and I thought this was a great way to lay it out visually for all of us visual learners. Trends of 2011!

week 9

Thought this was a helpful site. It is tutorials on everything from basic html to javascript!

http://www.tizag.com/javascriptT/

Web Typography

Here’s a great site dealing with web typography. It has a lot of cool examples of effective and interesting typography on websites and also discusses why the typography works for the websites.

http://webdesign.tutsplus.com/articles/typography-articles/web-typography-case-studies-january-2011-edition/

JQuery Demo's

So, while looking up different ways to use JQuery to fade photos in my webpage, I found this sitewhich I found really cool and helpful since there are demo's, which is always nice, and some of the things they have are pretty interesting to just look at and play with.

These designs are similar to what I am sure a lot of us are wishing we were doing in CSS and HTML instead of the simple sites we have been coming up with. Thought if we saw some more it would just be more of a motivator in gearing us in the right direction.

http://designshack.net/gallery

Periodic Table of Elements

http://joshduck.com/periodic-table.html

A sweet and may I say organizationally awesome way of listing relevant html elements, what they do, and linking to top reference websites.

http://www.noupe.com/design/what-popular-movies-can-teach-us-about-design.html

A very cool article on how we can get inspiration from other medias besides other websites.

Corporate Ladder

As much as we would like to hope this chart isn't true, it is very much accurate to the corporate world. As you work your way up the ladder in a business you will slowly work your way out of true design and more to the supervising and management positions. Basically in our degree i feel we are learning to get into a company that we like. From there we take our knowledge and use that to look over people and become supervisors of the next generation. It's all a big cycle and we rotate according to our base skills and our strive to go higher in the corporate ladder.

I found this article about understanding different kinds of users that get the information online. There are novices that don't know much about what they're searching for or don't understand a lot about computers, and then experts that do. The article has a few different personas it uses to illustrate its point about the different users needs and ablilites. There are also a couple of suggestions for you when designing for these two general types of people.

http://www.boxesandarrows.com/view/novices-orienteer

CSS for online books

http://www.webmonkey.com/2011/10/css-paged-media-brings-book-smarts-to-the-web/

So your reading one of your favorite books from an online source on your brand new iPad and it dawns on you, “Hey, I really hate that this site makes the reader scroll continuously down to get from page to page. Why cant they just make some CSS tool that will make the site behave like a real book and let me turn the pages!?” Worry no more, because the creator of CSS has now proposed that websites will be able to do just that. This article explains the details and how it will be built off the existing HTML rel=next/prev tags. Its all real technical so I’ll just let you read about it. Enjoy.

HTML5 & Facebook

I think all the developments with html5 are really exciting and I’m glad we are entering the web world when we are.  There are so many new opportunities and things that we will have time to learn and experiment with in our futures.  I ran across this neat site from Facebook offering HTML5 information for people interested in creating content for Facebook (and for the internet in general) in the medium.  It is easy to navigate with a “build,” “test,” and “distribute” sections that make it simple to learn and share with the world.

https://developers.facebook.com/html5 

Julie 

Trends

For this week I picked a site that has multiple examples of web design trends of 2001/2012. I think it’s worth a look for inspiration and ideas about what works and works well in the real world. Plus it’s always good to keep up to date with the latest design trends.

http://webpagebynumbers.com/web-design-trends-2011-2012

Here's an interesting site about designing effective homepages. The site addresses a lot of the basics of a homepage such as logos, navigation, content, and search boxes, along with the purpose and personality of a page. This site also talks about the differences between user objectives and business objectives with web design.

http://www.onextrapixel.com/2011/08/17/the-anatomy-of-an-effective-homepage/

I found this article on user interface. The ideas it speaks of can actually stretch across several design platforms like websites, applications, phone aps etc. The main idea behind this is to think about the user—not just the obvious things but others as well. Like it doesn’t matter how smart the user is because other factors weigh in and can effect how people use your deign. So you need to make S.T.U.P.I.D. (stressed, tired, untrained, passive, independent, distracted) users S.M.A.R.T ( make you’re design simple, memorable, accept users tendency to go on ‘autopilot’, give the user a chance for recovery, and test your website in realistic situations). I thought this article was pretty helpful with going beyond just saying ‘keep the user in mind’ and give you specific things to think about and therefore helps you think of further things. I hope you find it useful too!

http://www.boxesandarrows.com/view/are-your-users-s-t-u

Serif Typography

Let's face it, I'm a fan of huge typography in web sites. I've found a website that has some super cool sites with great uses of typography. It's nice to look though these to see different layouts,  element interaction and color selection.

http://line25.com/articles/showcase-of-web-designs-with-sexy-serif-typography

I would take a look at the rest of the line25 website as well, the other articles are pretty interesting and it's another resource that includes tutorials!

Cheers.

Tips for Becoming a Successful Web Designer

Here is a website that has some good tips about how to be a successful web designer. A lot of these tips can be applied to the print side as well.

http://webdesign.tutsplus.com/articles/general/12-tips-for-becoming-a-successful-web-designer/

Web Typography

Web Typography

I chose this article because I've been realizing a lot lately how much typography sets an amateur piece apart from a professional piece. It gives some good tips on readability on a web page and mentions several tools you can utilize to add hierarchy.

http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html

If any of us want to spice up our navigation menus, here is an awesome article that has lots of tutorials on jQuery navigation menus.

Week 8

This site talks about some principles in making good design. It talks about how, anymore, every one has a website but there are certain things you can do to set yours apart and make it a good website. It touches on things such as color, grid, weight, etc. Thought this could be a helpful place to look at to make some choices about our sites!

http://www.noupe.com/how-tos/7-key-principles-that-make-a-web-design-look-good.html

Importance of web design... maybe.

http://www.newfangled.com/importance_of_website_design

I found this web site while searching thought some design interface sites. I don’t know if I completely agree with the concept that the author is arguing for. He states that web design and more importantly the eye-catching nature of web sites is not important or necessary at all. While I do agree with the fact that these sites are actively looked for by the viewer and do not have to scream for your attention, I still believe that it is necessary for the sites to have an ease of flow and an aesthetic appeal because if not the viewer will leave just as quickly as they got onto your web site.

Week 8 Blog Post

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

I wanted to attach a link to wireframing. This is an hour long tutorial and information video on wireframing and how to make the more efficient. There are also interviews with others that have insight into wireframing and how it is helpful to making a good site.

personal web site coolness

So while looking up examples of java script I happened upon this nice site Go diego!
I'm starting to think about what I want to do for my own site down the line and I really like how simple his is, and how it's interactive (cause that always makes things fun). I found it in a list, on PSD best of HTML it has a lot of other interesting sites you should check out.

Good News!

So according to this poster we have the highest job availability...not too sure how accurate that might be...but it's a positive thought for the day!

Color in CSS

One of the things I am still struggling with is deciding on a color palate for my websites.  I feel like I choose colors that look good together on Kuler, but when I try to apply them to my website they do not have the same effect that they did originally.  This article delves into the issue of color and gives tips on using color in CSS.  It explains opacity, web-safe colors, and color notations.  This is a great reference tool for all things color in CSS.

http://sixrevisions.com/css/colors-webdesign/

Julie

Blog Post 8

I was not really sure if this even applied to us but I thought it was interesting all the same. Go to any website and clear the address bar. Paste - javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 - then just hit enter! It reminded me of the javascript we were using in class where we could move the objects around by hand only this can be done on any page. It was really fun to give it a try! For example I went to this page and typed this in: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Change this... Now this...

Sometimes in the design world, you could be working on a project for hours on hours. And then at the very end you find out that the change is minute compared to how long you spent changing the design over and over again. Working with customers in the real world can sometimes be easy. They will know what they want changed and you can change it in a reasonable time to the expectations that are asked. But other times the customer might not know what they are looking for and there for a design could change 15-20 times before an agreement has been made.

What is JavaScript?

This week, the link is to a youtube video entitled What is JavaScript? It’s a little slow, but it’s helpful in that it points out what features on some common sites, like Yahoo, are enabled using javascript. The only thing I think he fails to mention is like we learned in class, some people may inadvertently turn off their javascript, so that’s something to watch out for. All in all, good for getting a basic grasp on what javascript does on the most basic level.

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

Check it.

Here's a link for a sweet blog that revolves around good navigation techniques to think about when we're creating out legendary website beauties. It goes though how to achieve effective page break ups, menus and tabs and more -->
http://www.psd2html.com/blog/modern-web-navigation-trends-best-practices.html

On this blog I clicked around to find this: http://www.psd2html.com/blog/17-trendy-websites.html. Exactly what the link implies: trendy websites. I think the best way for us to figure out what could work with our upcoming website project is to look at good examples.

Click around on the categories on your left. They're.. pretty neat.  

I was thinking about what Mike was saying about designing websites for mobile devices and decided it would be something interesting to look into. I found this blog post by a guy explaining some things that may not have occurred to us newbies. Also, while the article itself is good to read the comments at the bottom (not all of them mind you) can be helpful to some sending readers to other sites with merit. Although we wont really be touching on this subject I think it's something we should keep in mind while design--'graceful degradation' and such whatnot.

http://www.stemkoski.com/how-to-design-websites-for-mobile-phones/

http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

There are some facts in this article about reading a website. I think this might help some of us with our persona's and scenarios.

How to Pick a Domain Name

How to Pick a Domain Name

This site brings up a few interesting things about buying a domain name. While some of the points aren't relevant, I think some of them are key. Especially the one about keeping them short. I know I prefer not to type long domain names so I think keeping it short and memorable may be even more important than making sure it's completely relevant, especially if your full name is taken already.

Wireframe

I thought it would be fitting to post about web wireframes, since that what our assignment for the weekend was. This website is good because it talks about how to make a wireframe, what to include in your wireframe, and why they are beneficial.

http://sixrevisions.com/user-interface/website-wireframing/

JavaScript Effects

Since we're starting to talk about javascript, here is a page with some interesting javascript effects. I think that most of them can be found in javascript frameworks like JQuery. The ImageFlow effect is kind of cool.

http://sixrevisions.com/javascript/10_ajax_effects_website_fanciness/

Beautiful Color & Layout

In starting this second website-redesign project it is important to keep researching and looking for inspiration.  I learned from the last project that I need to think more about color and how that works with the overall design.  I am also paying more attention to layouts of websites that I visit.  This link is a perfect source for some fresh inspiration.  There are a few examples of really beautiful sites with great color and layout.

http://djdesignerlab.com/2011/10/07/20-beautifully-colored-and-layout-web-design/

Julie 

Bubble Interactive Experiment

http://vimeo.com/10601371

Derek Anderson created an interesting experiment with interactive web design. This is an experiment that uses only HTML, CSS, and Javascript. It is amazing that this was created without using Flash or images. The shapes wheither it is dots or squares follow your mouse as it skims over the page. To active this with your own coding only takes 15 minutes.

Designer Small Talk

It seems that whenever i designer is in the work place the other co-workers always seem to ask the designer for simple computer tasks. Fixing email, cant find or open a file, mundane tasks as such. This flow chart just gives a couple examples of what would happen if you goto a designer for help. Although it's exaggerated and humorous, it can be pretty true sometimes. I have worked in a workplace where i ran into similar questions.

I liked this site because it kind of sums up a few things that are becoming popular in web design. It lists a few trends from 2011 as well as possibly some upcoming ones for 2012. The biggest thing that sticks out to me is that web designer are really paring down information and fluff on websites and making everything a lot cleaner and easier to navigate.

http://webpagebynumbers.com/web-design-trends-2011-2012

Help with Moodboards

Moodboard Article

I don't know about you guys, but on my projects, when we need to have a moodboard ready, I never really know what to do for that. I end up slapping visuals of all sorts of random things on the page with a couple fonts. This article gives you some direction of where to go with your moodboards. While it might not make a big difference now when we're in control of the entire project from start to finish and can have all of the specifics figured out in our heads, it may be helpful in the future when we have jobs that require showing a client the direction you want to take their project. It also mentions that having a clear mood board can cut down on revisions by helping the client quickly figure out what they do and don't like, thus saving you a lot of time. Enjoy.

Digital art

Here's a good site on usability for web design.
http://sixrevisions.com/

padding and margins

So, following project two, I was still having issues with padding and margins. And, as we’re moving on from css, I thought a better understanding of it would be beneficial to me and possibly all of you. I found this site that has an image that shows how margins and padding take up the web page. Also, it has various ways code for margins can be written, since we know there isn’t just one way to do one thing when it comes to css.

http://www.simplebloggertutorials.com/2010/05/how-margin-and-padding-works-in-css.html

http://www.youtube.com/watch?v=7TM6bmvIa7E

This is an interesting video on how to use html on myspace. You can add more information about yourself and make your site more interesting. I thought this was pretty interesting because people thought it was just showing the normal way to update your myspace site.

So, I was on the web today, then I went to the CATS GAME because I love cats mwauuuuhh. Then I got on the web again, then I went to aggieville because I love aggieville mwauuuuuhh. So, now I'm here and here are some cool facts:

http://cats.about.com/

Now, I was actually looking at some innovating css design and I found this page, there's an example on here of a 3D puzzle created using only css code. I've sat down and conversed with my parents about the unfortunate realization that I'll never be able to comprehend nor create such a genius master piece.

http://css-edge.blogspot.com/2008/11/innovative-and-experimental-css.html

HTML tags

HTML TAGS

This link contains a page of the html tags. I thought it was nice to have it all together in one place. Sometimes I have a hard time remembering what the code for everything is so it is nice to have one area to look at and find all of them. I'm sure this will come in handy in the future as we keep learning new things and ways to use them.

UX Design Principles

Here's and article about some of the guidelines that User Experience designers should follow. The same could be applied to web designers as they have to make user friendly sites.

http://www.uxmag.com/design/guiding-principles-for-ux-designers

An interesting read about popular debates with web design. I found myself siding with camp 2, for most questions.

http://line25.com/articles/top-5-web-design-debates-that-cause-the-most-riots