Category

Web Design

Web Designer Resources

By | Design, Web Design | No Comments

Even with a conventional graphic design degree under my belt I have tended to gravitate toward designing for the web. Coding sites at an early age on Geocities helped me realize how cool it was to make something out of absolutely nothing.

Today, sites have become ever more complex and visually robust. Nowadays most websites are developed with the help of a web developer who’s sole focus is coding and not designing. With that being said, I think it’s incredibly valuable for a creative designer who understands how websites are developed and who can stylize their web site projects using layout and css.

With print mediums becoming more and more rare, and digital devices becoming more and more incorporated into our lives, I think it’s super important for graphic designers to try and become as knowledgeable within the website design process as much as possible, which is why I’ve devoted this blog post to showcasing some of my favorite places to go to for web design knowledge and inspiration.

So without further ado let’s get to the list:

 

Google Material Design


Essentially, Google’s Material Design is a Codex for web / digital based projects. It’s a reference, guide and tool that Google developed in order to create a standard cohesion within the digital design space. Whether you’re working on an app or a website, you can use this comprehensive guide to implement ideas and practices into your project.

google-material-design

 

Zurb Design Triggers


The guys and gals over at Zurb are responsible for creating one of the best website design frameworks out there. Foundation was originally created in house for use in their website projects. Eventually they decided it worked so well that they ended up releasing it as an open source download for the public. They also have a pretty cool site that showcases what many people are doing in the web design scene. Utilizing design aesthetics coupled with the psychology behind why things work the way they do gives you a clear sense of web design approach. Through this site, Zurb does a great job at giving you a visual representation of how to solve many design problems.

 

W3C Schools


The World Wide Web Consortium (W3C) is the international standards organization for the web. What does this mean? It means they know their stuff and they regulate what the best standards are for web development. If you’re at all interested in learning web development this is a great place to gain a ton of knowledge. The W3C Schools website will teach you the essentials for starting to learn web development. You can even pay for certification for certain courses which is a great way to boost your credibility.

 

Khan Academy


This slick website is a platform where teachers, students, or anyone for that matter can learn  valuable skills online. With a multitude of free courses and an impressive ui that tracks your progress for each course, it’s got the right mix of approachability and usability. They also try to incorporate levels of gamification into their system, allowing you to earn badges based on achievements you gain along the learning process way.

Khan Academy Badges

 

InVision Blog


InVision is a powerful online mockup tool that lets you as a designer upload multiple images in order to create a superficial prototype for your website, app, emails and other web projects. This platform is uber intuitive and awesome, and if you haven’t gotten a chance to check it out definitely do so. These guys also have an outstanding blog that goes into detail behind the psychosis of why we interact with our digital mediums how to use effect design tactics to engage the audience.

 

Webdesigner Depot


This site is a mecca for anything web design related. With a regular batch of good articles, free downloads and inspirational content, this site is generally all around awesome. If you haven’t bookmarked this site yet do it now!

 

So there you have it folks, some of my personal favorite web design go-to’s. If you have questions or would just like to talk about web design feel free to drop me a line using my contact form. Happy designing!

Crafting good content in your web design projects

By | Content, Web Design | No Comments

 

CONTENT IS KING

The key to a great website is a good user experience. The key to a good user experience is how a user interacts with the content. How do you ensure good content from a client? More importantly, how can content creation for web design be brought into your design workflow?

There’s no one right answer. Creating good content in your web design projects isn’t easy and lately in my web design projects I’ve been pushing hard on content first before design. I think we as designers know that content matters but I think the gravity of its importance is often overlooked by the designer, and in the clients case, the user isn’t considered enough when creating content.

As a web designer, I’m constantly questioning whether the content is going to resonate with the user and if the content is there for a good reason. In the past, companies have put their entire 20 page manifesto on their website. Probably dishing out some huge budget to make sure “who they are” is properly represented in the language. Over the years this has posed more and more of a problem. Why? People are reading less and less, and scanning more and more. Which is all the more important to get the user the content they’re looking for.

However,  it is important to showcase who your client is. Currently, companies like Apple, Salt., and Olympic Provisions are doing this via alternative methods such as amazing photography, or large bold text. Images, video, catch phrases all can help convey a brand. Look at apple for instance. When you walk into the Portland, OR Apple store, there are no words to describe their brand to you, only images. Those images convey meaning far better than anything they could flat out tell you.

So with that being said I’ve come across a few helpful tricks in order to help create content that’s user centered:

REMEMBER THE BIGGER PICTURE

What is it you’re trying to get your user to do? Do they need affirmations that the service is sound and trustworthy? Pictures tell a thousand words and can persuade a user to act in a certain way but be sure the path you lead them down makes sense and directs them to what they want. Remembering what the user is there for will help keep the word count low which leads me to..

KEEP THE WORD COUNT LOW

Like I said earlier, users are reading less. Here’s a great article explaining the idea that we’re reading less and less far better than I can. If you must have a lengthy chunk of text look for other solutions that can work such as implementing accordion jQuery. Here’s a another great article by web developer Preston Schmidt which looks further into accordion styles using jQuery.

KNOW YOUR USER

It’s a great idea to create a user persona for any web site project. What’s their name? Do they like slow jazz or house music? Do they own any pets? These sound like silly things to think about when designing content for a site but it can help you make decisions on how to craft the content. Knowing your user is a step in designing a better experience for them.

USE A DYNAMIC COLLABORATION SYSTEM

I firmly believe Microsoft Word should be retired and all offices should incorporate Google Docs into their work flow. But why use Google docs? It does the same thing word does. Wrong. Google Docs has dynamic live features that allows users who’ve you shared the doc with to make comments, edits, revisions, suggestions, all on the fly. No more 20+ version Word documents. Think of it as a living breathing document that is always changing and reflecting your clients big picture. If you haven’t checked out google docs features here’s a great video by social media guru, Laura Roeder.

 

 

I urge all our clients at Ideaville to use Google Docs. It helps make the collaboration process richer. Collaboration is key and I wouldn’t want to ever go back to something else. I hope these tips help you create better content with your clients so you can help give your users the experience they’re looking for.

Marvel.com Navigation and Media Queries

By | Design, Media Queries, Responsive Design, Web Design | No Comments

Every so often I come across sites that I become really enamored with, and in the age of responsive web design it pays to pay attention when sites do it well. Marvel.com is one of those sites. Upon landing on Marvel.com, you’re greeted with a clear navigation system, which is something that we as cultured users of the internet have come to expect. Looking more closely, Marvel.com’s navigational system(on desktop view) offers a hover state, which is something we’ve also grown accustomed to.

 

marvel.com hover state

 

But in the age of mobile and responsive web design, how do web designers solve the issue of mobile devices not being able to perform hover states? Web designers are now turning to media queries to create custom functions depending on the size of the screen the content is being viewed on. Notice in the mobile version of Marvel.com, they are using an accordion style for menu items which are nested inside it’s parent page.(instead of using a hover state)

 

marvel mobile navigation

 

 

Marvel.com Nav Tap State

 

What is a media query? Simply put, it’s a line of code that makes part of a website act in a certain way. For instance, you may have an h1 media query for screen sizes that are meant for desktop viewing that would look something like this:

@media only screen and (min-width : 1224px)

{

h1 { font-size: 50px; }

}

What this line of code is saying is that at screen sizes of no less than 1224, the h1 tag will be displayed at 50 pixels. Let’s say 50 pixels is too big for mobile devices, so we can create a custom media query just for mobile that would look like this:

@media only screen and (min-width : 320px)

{

h1 { font-size: 30px; }

}

While this is only one example of a custom media query, the most functional sites out there on the internet use hundreds if not thousands of custom media queries in their code. Gone are the days of creating websites intended just for viewing on a large screen. Nope, designers must now take into account all screens as well as knowing behavioral patterns that are specific to those devices. Knowing how users interact with their online devices will help you design content that looks good but more importantly functions at an appropriate level.