Monthly Archives: November 2015

Instructional Resources-Web Design

Instructional Resources-Web Design

Blogs

Line 25

Web Design Blog

http://line25.com/

Responsive Layout Testers

A very helpful couple of tool for checking the how your website displays at different screen resolutions.

View Like Us

http://viewlike.us/

 

CyberCrab

http://cybercrab.com/screencheck/

Free Customized Feedback Form Wizard

http://www.thesitewizard.com/wizards/feedbackform.shtml

The above site is an excellent wizard that walks you through creating a simple PHP based contact form.

Informational Articles

Topic: Responsive Design

http://alistapart.com/topic/responsive-design

 

Responsive Web Design by ETHAN MARCOTTE May 25, 2010

http://alistapart.com/article/responsive-web-design

 

Wireframes | Mockups | Prototypes

http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898

 

10 Commandments of UI Design

http://www.designmantic.com/blog/infographics/the-10-commandments-of-ui-design/

 

Page Speed Load Checker

http://yslow.org/

Browser Checker

Open Source resource to check your sites browser compatibility

http://browsershots.org/

Mashable Post: List of some cross browser compatibility checkers

http://mashable.com/2014/02/26/browser-testing-tools/

 

HTML Email Info

HTML Email Article

http://www.leemunroe.com/building-html-email/

 

Hambuger Menu for Mobile

http://blog.g-design.net/post/42617934013/create-an-accessible-toggle-menu-for-mobile

 

CSS Only Dropdown Menu

http://red-team-design.com/css3-dropdown-menu/

 

Cool Web Page Galleries

www.coolhomepages.com

http://bestwebgallery.com/

 

Cool Portfolio Pages

http://www.danielwarrenart.com/

 

CSS Instructional Information

Introduction to CSS Selectors

http://www.creativebloq.com/css3/introduction-css-selectors-61515320?ref=webdesignernews.com

 

Web Frames Works

Kube Web Framework

http://imperavi.com/kube/

 

Responsive Grid System

http://www.responsivegridsystem.com/

 

960 grid system

http://960.gs/

 

Bootstrap

http://getbootstrap.com/

 

Skeleton

http://getskeleton.com/

 

Homework—Nov. 25

Assignment

Based on the in–class or outside testing you did of your low-fi wireframes create a series of hi-fi wireframes.
Remember you are walking the user through their initial sign-on and successfully completing one single task in your product.
Remember you have to be aware of what happens when the user makes a mistake. How do you guide your user to making the correct choices in your product and also provide feedback when an error is made.

For a quick reference on wireframes check out usability.gov:
http://www.usability.gov/how-to-and-tools/methods/wireframing.html

Online Prototyping APP

Marvel App

Marvel makes it easy to switch PSD files into usable prototypes. The product links to DropBox and picks up PSD layouts and then you use their easy-to-use editor to build prototypes in a matter of minutes. There’s a handy feature that lets you send out links to the prototype to others. There’s support for iOS, Android, and other operating systems too – so that you can ensure that the recipient can use the prototype. Best of all – it’s free to use!

https://marvelapp.com/

What is User Interface Design?

What is User Interface Design?

“User Interface Design is the process of crafting a visual language and hierarchy that allows someone to use and engage an application.”

At Fresh Tilled Soil we get this question quite often from prospective clients: What is User Interface Design? What does it entail? What does it mean? So many people define it in so many ways.

http://www.freshtilledsoil.com/what-is-user-interface-design/

10 UI Design Patterns You Should Be Paying Attention To

This is an article from 2009. While the article itself refers to these as UI (User Interface) design patterns most of them are more related to UX (User Experience) Design.

Smashing Magazine

10 UI Design Patterns You Should Be Paying Attention To

Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well.


http://www.smashingmagazine.com/2009/06/10-ui-design-patterns-you-should-be-paying-attention-to/

UI, UX: Who Does What? A Designer’s Guide To The Tech Industry

UI, UX: Who Does What? A Designer’s Guide To The Tech Industry

PLUS: HOW APPLE, FACEBOOK, GOOGLE, AND MORE TECH-WORLD HEAVYWEIGHTS DESCRIBE THEIR DESIGN JOBS.

Design is a rather broad and vague term. When someone says “I’m a designer,” it is not immediately clear what they actually do day to day. There are a number of different responsibilities encompassed by the umbrella term designer.
Design-related roles exist in a range of areas from industrial design (cars, furniture) to print (magazines, other publications) to tech (websites, mobile apps). With the relatively recent influx of tech companies focused on creating interfaces for screens, many new design roles have emerged. Job titles like UX or UI designer are confusing to the uninitiated and unfamiliar even to designers who come from other industries.

http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry

Signup for an InvisionApp Account

Invision APP

I spoke with the educational coordinator at Invision and they sent me this link and signup code to get a student account with 3 free projects. You have to sign up with your NYCCT email account and it is good until 6 months after you graduate.
If you already have an account let me know and I can put you in contact with Invision’s educational coordinator.

The world’s leading design collaboration platform

We help companies of all sizes unlock the power of design-driven product development. That’s why teams at Evernote, Adobe, Airbnb, Salesforce, and many more fire up InVision every day.

InVision gives teams the freedom to design, review, and user test products—all without a single line of code. With intuitive tools for prototyping, task management, and version control, it’s your entire design process, all in one place.

http://www.invisionapp.com/education-signup

Signup Code: 56-73-13-19

7 common mistakes in UX portfolios

7 common mistakes in UX portfolios

Here’s what not to do when creating a UX portfolio.

Design managers want to like your portfolio. They want to be impressed by your work, your process, your skills. But they can’t do this unless you let them.
After consulting with CEOs, chief product officers, and UX designers, we’ve compiled the following list of what not to do. Here are seven mistakes to avoid the next time you’re brushing up your UX portfolio.

http://www.creativebloq.com/netmag/7-common-mistakes-ux-portfolios-111517629