Learning Path: Real-World Web Design

Brush up your front-end development skills with real-world examples

The pressure to make every user experience unique and engaging is only going to rise as UX innovation raises the bar. Stay updated on the latest design tips and techniques and apply them to your own work straight away with this practical Learning Path.

Joshua Miller

Joshua Miller is a freelance web designer, college professor, and interactive artist living in eastern Pennsylvania. He has taught courses in animation, web/graphic design, video game design, and programming at a variety of schools, including Lehigh University, Northampton Community College, Drexel University, Lafayette College, Montgomery County Community College, and Lehigh Valley College. He currently holds a tenure-track position at Kutztown University, where he teaches web design, graphic design, and interactivity. He also teaches part time at Lehigh University, and runs a successful freelance design business in his downtime. His true interests lie in the intersection between design and programming, specifically with the creation of digital interactive work.

Ben Fhala

Ben Fhala discovered his passion for data visualization seven years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geek.com, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Chris R. Becker

Chris R. Becker is an Imaginative and creative Sr. UX designer/IxD/design thinker and educator, a creative thinker with the ability to design across media platforms from the web to iOS and Android as well as SaaS and service design. He is a versatile designer and systems thinker with problem solving skills for User Experience Design, organized and passionate with a passion for following design problems from concept to finished product. He is well versed in Agile product development methodologies but flexible with the waterfall techniques as well. He applies LEAN UX methods to rapid prototyping, design research, and user testing to take ideas from the drawing board to the real world.

 He leads Design thinking workshops and UX deliverables, all the while using communication skills both in the class room and for client presentations. Participates in making through Fine Art & Graphic Design background, which leads to a variety of creative thinking, design thinking, human center design research, user testing, and problem-solving skills. His studies have included courses in rapid prototyping, usability/heuristics, human centered design research, design thinking, painting, sculpture, drawing, print making, archetypes, graphic design, typography, systems theory, media theory, programming, drawing, motion, and art history.

Specialties: Design thinking, user experience design, information architecture, branding, identity design, conceptual modeling, rapid prototyping, user interface, brainstorming, product design, advertising, retail design, interactive art director, wireframes, application GUI design, multimedia presentations, production artist, web master, social media, UX strategy development.

Brock Nunn

Brock Nunn is a frontend web developer from Tulsa, Oklahoma. Brock works full time as a graphic designer at Rovi Corporation. Over the past six years, Brock has taken part in web projects big and small. Self taught, Brock has a passion for teaching others with a simple and personal approach. Brock married his wife in June of 2009. When he is not neck deep in code, Brock enjoys making great food for his family, including his puppy Sugar.

A core understanding of HTML and CSS syntax

Build a responsive site from start to finish, from mockup to HTML and CSS implementation

Understand the advantages and disadvantages of RWD compared to other web design techniques

Learn to build a fluid layout starting from a digital mockup

Create breakpoints in a layout and write the code to modify the layout of your site at each breakpoint

Understand techniques to test and maintain your responsive code on different devices

Format headers, footers, and column layouts in a way that will adapt to different browser sizes

Target specific viewports to present an optimized view of your website for a given device

Get an in-depth knowledge of media queries—the heart of responsive web design

Create advanced design strategies for different devices, aspect ratios, and resolutions

Work with the Twitter Bootstrap framework to build effective designs

Make your design backward-compatible and expand support to IE9 with HTML5shim

Enhance the user experience using relative measurement types

Stay up to date with all the future developments in web design and discover CSS4 media queries

Understand the important concepts of human psychology, HCI, design and product thinking that make up UX

Build a website structure keeping in check user flows and sitemaps

Exploit wireframes and build a solid one for responsive web design

Get to grips with UX best practices and incorporate them in your web design

Apply heuristics and usability to create a successful web plan

Learn how to build a clickable wireframe prototype to enhance responsiveness

Apply user testing and design iteration to ensure smooth web experience

Master web layouts using a modern and popular front-end framework

Implement custom layout elements such as page layouts, image carousels, and list styles

Easily manipulate a grid-based layout system with the Twitter Bootstrap grid

Extend Bootstrap using custom icon fonts to produce retina-ready graphics for any device

Build a unique homepage while learning about the visual hierarchy to lead the eyes of your users to what they need to see

Integrate the LESS preprocessing language to take full control of Twitter Bootstrap

Use deployment techniques that will make your site simpler and easy to manage

Optimize and deploy your website using modern techniques and a few easy tricks