Category

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!

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.

Updated site

By | Design | No Comments

It’s been a fun adventure translating my personal portfolio site over to WordPress. While I do have a background in graphic design and media communications, I’m focusing my portfolio on web site design. I believe the caliber of website design has become increasingly more complex and and engaging. This level of complexity within web design is what draws me to it.

Currently, I’m working at Ideaville, a small design studio in downtown Portland, OR, located within the Union Station. Working with other like minded designers has given me so many amazing opportunities and challenges. Challenges that include content creation for clients, ideation of core values, visual extrapolation of abstract ideas, and a slew of other design specific opportunities.

#OnwardandUpward