Web Design

Came across this website and thought it was pretty interesting. It has a lot of cool examples of web design in a variety of different styles.

http://inspirationti.me/

last post

Hey all.

For the last weekly blog I’ve got a fun Halloween themed info graphic about what you should avoid doing on your own website. Just stuff we all now know and can appreciate.

http://mashable.com/2011/10/31/web-design-halloween-infographic/

Web Design Infographic

It's a little late for the holiday, but it gets the point across.

http://mashable.com/2011/10/31/web-design-halloween-infographic/

Why JQuery matters to this guy

Make Your Website Suck Less

http://www.useit.com/alertbox/9605.html

Here's a site I found that gives a brief summary of what can suck in your website. I sure that we have all made at least a couple of these site mistakes in our first web sites. But hey, we're just beginning so learn from this and make your websites suck less.

Changing Up The Fonts

Being designers, our clients are going to expect certain things from us. One of them being that we don't use standard type fonts. Whether it be web design or magazine layouts, we as designers are going to need to keep in mind to change and customize the fonts no matter how small they may be. If we use a common type make sure its for a reason and that it matches the style of the rest of the project. For giant text boxes, for example, it's acceptable for us designers to use more common fonts so that it's easy for readers to understand the text. Keep that in mind throughout our design days.

CSS3 Jquery ToolTips Helper

 As we finish up this semester, we have come a long way in learning web design and coding.  I can’t emphasize enough how many wonderful tools are out there available for us to make coding easier.  I’ve used many different resources to help accomplish the neat elements that I want for my site.  Button makers, pattern makers, jquery, etc.  This link is another cool resource, specifically for editing tooltips.  Tooltips are something I haven’t desired to incorporate yet into my sites, but this would be a great future reference!  The code is easy to read and color-coded and it seems very detailed and simple to follow.

http://www.red-team-design.com/easy-css3-jquery-tooltips

Julie 

Web Trends For 2012

http://www.cprenterprisesonline.com/index.php?option=com_content&view=article&id=96:web-design-trends-for-2012&catid=35:articles

Here is a that should help if you don't exactly know what you are trying to achieve with your web site or are worried that your site is not up to par in the digital and design world. This list lets you know what coming up on the horizon for 2012 as far as "edgy" design goes. Hopefully you can incorporate some of these elements into your own site so that you don't have to go back in 10 months and redo the whole damn thing!

http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/

here are some awesome websites/tools than could be useful for web designers. The WhatFont and ColourBookmark websites can be really useful.

Unpaid Favors

There is one big thing that designers need to make it in the graphic and digital arts careers, and that is motivation. Above is an illustration and some examples of tasks you might be asked to do by friends, or co-workers where you will be spending hours designing but probably won't get paid for. This is one down fall for this field. If your jobless typically companies want to see a portfolio but if you havent done anything its hard to look good to the employer, so most of the time you'll have to do unpaid tasks. But just know that everything that you do can be used in your portfolio and can greater your chance of getting the job your wanting.

clients from hell "feelings and opinions page"

CLIENT: “The word ‘Blog’ sounds too alien. (Does an impression with his arms)’Glip glorp zoop blog, I am a martian’, if you know what I mean.”

ME: “Um, I guess I do, sure.”

CLIENT: “There’s no humanity in it! I want people to associate our company with humanness.”

ME: “So you want to remove the blog page?”

CLIENT: “No, keep it. But can we call it our ‘feelings and opinions space’ instead?”

ME: “Sure. The only thing is, it’s on a ‘blogspot’ subdomain.”

CLIENT: “Just change that to a ‘feelingsandopinionsspot’, sub-dome-whatever. Easy, see? You just have to start thinking like me!”

ME: “…”

PHP for Beginners

 A few weeks ago I posted a link to some more information on PHP, but honestly I am still really confused.  I’m finally starting to grasp HTML and CSS, so this PHP thing is still confusing to me.  I ran across this link recently and I haven’t had much time to look through it, but it seems to lay out some beginner tips and tutorials to learning PHP.  What might be useful are the mail scripts and registration pages.  This might be helpful when we are trying to make our contact pages for our websites.

http://www.wokay.com/technology/10-php-tutorials-for-beginners-tips-tricks-55986.html

Julie 

JQuery stuff- helpful for our sites because we have to come up with the best solution to display our work. This is one that may be helpful...

http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

This article talks about whats important when thinking about interactive deisgn. Its important to keep in mind that its different from other kinds of design. There are a few foundation points that they'd have you keep in mind: time, metaphor, negative space and the intersection in interaction.

http://www.boxesandarrows.com/view/foundations-of

Things that employers don't like to see

http://blog.inkd.com/designers/60-things-about-design-portfolios-that-infuriate-employers"

This site is useful in seeing what potential employers don't like to see in an online portfolio. Since there are so many different opportunities to make a portfolio unique, i found it easier to check out what I shouldnt do, and go from there.

Color Palate Finder

 One way to go about picking colors from an existing site is to bring a screenshot into Photoshop and determine the colors from there.  While seeking out neat online web tools, I ran across this site which figures out an existing website’s color palates for you.  There are a couple different ways to go about using the site, but the easiest way I found was to scroll down the page until you get to an empty box where you can type in the website or copy and paste the URL.  It then comes up with all the numbers of the colors.

http://wearepandr.com/  

Julie

week13-photos

This week I’ve got a site that should hopefully be helpful on our final portfolio project. If you’re searching for creative ways to show images of your work in a gallery or otherwise, this could be an instructive site. Some of the examples use flash but there are others that don’t, which we could use.

Hope you find this helpful

http://www.ahmadhania.com/2007/12/impressive-ways-to-display-pictures-and.html

Useful Web Interfaces

Thought this would be a useful site to maybe help us along!

http://uxdesign.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

Using any font on your Website

I read this article because I was really hoping to be able to use some of my own fonts on my portfolio website. It was helpful because it opens the door to using all of the ttf fonts out there rather than just being limited to google's. I'm guessing it'll make your page load slower but it may be worth it to get the perfect look for your site.

http://sixrevisions.com/tools/google-chrome-extensions-for-web-design-students/#more-4390

A very useful list of tools that us web designers can use. I know some people have problems when your site changes from different screen sizes. The Window Resizer tool would be really helpful. Also, I think the Stay Focus tool is a really neat idea and would be very helpful for all of us.

The Story of the Elephant

http://uxmag.com/articles/the-psychologists-view-of-ux-design

This article is one written by a psychologist about how you have to approach user experience. He uses the story of the elephant in the dark room to explain how each person who touches the elephant experienced it differently. You have to use this approach when you design a web site. This article breaks down the psychological aspects that you have to take into account.

Design Hell

I thought that this was kind of funny. As designers we should try to control things as much as possible. Depending on what we're working on, many people may have vested interest in it.

http://theoatmeal.com/comics/design_hell

Closing Tags

Html can be a pain sometimes when coding for giant sites, but its important to put closing tags for everything otherwise the site won't function the way you are trying to get it to work. The worst part is when something goes wrong and its because of one missing closing tag, and having to go through all the code to look for the one missing tag can be time consuming and stressful. But when all tags are accounted for then the site can function to its full potential.

PHP Templating

As usual, I typically try to find articles that are relevant to what we have recently learned in class.  On Monday we learned a bit about PHP, but I still found it rather confusing.  By the end of the lesson it started to make sense that PHP is useful to save time from not making a hundred different HTML and CSS files.  Then I found this article which goes into a bit more depth on that very subject.  It also notes that using PHP is cheaper and easier for a client to maintain.  This article confuses me a little when it gets to the templates at the bottom since I’m not super clear about how PHP works entirely, but overall this gave me a better idea of what it is.

http://coding.smashingmagazine.com/2011/10/17/getting-started-with-php-templating/

Julie 

Portfolio tips

Some tips in creating good online portfolios. This site shows some downfalls in designing online portfolios and helps you know what to avoid as well as what to do to help!

Hope it's helpful!

http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/

portfolio ideas

Hey all!

The post for this week is in relation to the project we're currently working on. It's a site with examples of some portfolio sites from other people, just to see what others have done and to build on it. Hope it's helpful

http://vandelaydesign.com/blog/galleries/freelance-portfolios/

http://www.webdesignerdepot.com/2011/10/dos-and-donts-of-call-to-action-pages/

an article on the do's and dont's of call to action pages.

Why I am a Designer

Everyone has there own reasons why they are a designer. But whatever the reason the one thing to make sure is that you do it because you love it. Having the love for design can give you the strive to learn and improve the design throughout the world. Design changes everyday and more and more mediums are being created that need to be designed and it takes motivated people to bring the world to the new designs.

Pros and Cons of Frameworks

Within the past month or so in class we've looked at different frameworks and how we can use them in our sites. Here is an article that talks about some of the pros and cons of using frameworks and then lists a lot of different javascript and css frameworks.

http://www.1stwebdesigner.com/design/pros-cons-frameworks/

USB fun

also this:

Found a simple site from this guy Brian Hoff. I liked the color scheme, and the layout, I just thought I'd share this since we're starting to look at what is out there and what we want to do.

week 11

I thought this website provided some good information for our portfolio sites. It's cool to see how people use different things to convey the same work!

http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/

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.