Design for e-Commerce in a Mobile-first World

Looking to design an online store? In this course, you'll learn best practices when designing for e-commerce. You'll learn the most important bits to include in a store design, most efficient tools and process, and a bit about shopper behavior. Software required: Visual Studio, Google Chrome, Photoshop CC.
Course info
Rating
(18)
Level
Intermediate
Updated
Jun 21, 2016
Duration
2h 39m
Table of contents
Description
Course info
Rating
(18)
Level
Intermediate
Updated
Jun 21, 2016
Duration
2h 39m
Description

Overwhelmed with the task of designing a responsive online shopping experience? If you're used to working in a static creative process, this course Design for e-Commerce in a Mobile-first World, will ease you in to designing in-browser. First you'll use a stable of online tools to generate responsive store mock-ups. Next, you'll learn a bit about different types of online shopping experiences, and how to meet varying needs of shopper demand in with our store design. Finally, we'll generate a site style guide and cross-device store mock-ups. When you've completed this course, you'll have a better understanding of varying requirements for e-commerce, as well as a knowledge of the most efficient tools and frameworks to design in a browser-based environment. Software required: Visual Studio, Google Chrome, Photoshop CC.

About the author
About the author

Megan Young is lead user interface designer and front-end developer for AspDotNetStorefront in beautiful Ashland, Oregon. Megan has worked in the design industry for over 15 years and has spent the last 6 years specializing in e-commerce and front-end development.

More from the author
Photoshop CC Adjustment Layers
Beginner
2h 7m
Sep 26, 2017
Photoshop CC Working with Curves
Intermediate
2h 0m
Mar 2, 2017
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Megan Young and welcome to my course, Design for e-Commerce in a Mobile-first World. I am a web designer and front-end developer at ASPDotNetStoreFront, an enterprise level. net e-commerce platform. With over 300 stores designed and implemented under my belt, I'll share with you some of what I've learned over the years about design process and shopper behavior. Designing an online shopping experience is both challenging and rewarding. We'll learn about different types of stores and shopper behavior, as well as efficient ways to work in a browser-based design environment. Designing an online shopping experience is both challenging and rewarding. In this course, we are going to cover essential content to include in a store design and create a site style guide. We'll do this in a browser-based design environment. We'll also explore different types of stores and shopper behavior, and finally, we'll learn all about responsive images. By the end of this course, you'll have a better understanding of how to approach the complex task of designing an online shopping experience across many different devices. Before beginning this course, you should be familiar with HTML, CSS, and the Bootstrap Framework. I hope you'll join me on this journey to learn more about e-commerce with the Design for e-Commerce in a Mobile First-world course at Pluralsight.

Design for e-Commerce in a Mobile-first World
Hello my name is Megan Young. In this Pluralsight course, we'll dive into Design for e-Commerce in a Mobile-first World. As mobile use continues to grow with online shoppers, it is important as web designers and front end developers that we understand how to design not only for a shopper on a mobile device, but for users across many different screen sizes. With so many possibilities and constraints at the same time, this can seem overwhelming to grasp. Especially if you're used to designing in static programs such as Photoshop. I will show you how to take a lot of the guess work out of design for e-commerce by using Boilerplate framework such as Bootstrap, and designing directly in a Google Chrome browser window. By the end of this course, you'll have a better understanding of essential e-commerce content to include and how to take into account different styles of stores and shoppers. You'll also be able to deliver a site style guide to a developer or a content creator, as well as create mock-ups and deliverables across many different devices to clients using a simple set of browser-based tools. So let's dive in.

Frameworks, Built-in Grid Systems, Style Guides & Font Services
In this module, we'll get started with a style guide, and introduce and implement web font services, such as Google Fonts and Typekit. We'll also use elements in the Bootstrap system, to start laying out our mock store. Let's get started by opening up our Solution in Visual Studio. In the course files, you'll find that I've added a file called StyleGuide. html. Let's go ahead and open that up. We're going to do a similar thing here that we did, when we first got the template up and running, and that's connect this to our custom. css style sheet. That way, our main store mock-up, index. html, and our style guide, are pointed at the same custom overrides for our mock store template. I'm just going to change that, and save it, and hit Control + F5 to build the store, so I can preview this. We're still going to get our debugging issue, until we add a web config file, so OK. Here we go. This is our basic style guide. It's as basic as they get, but it's running off of the Bootstrap framework. A lot of the work is done for us with typography, grid styles, colors. We just need to modify this for what we want our store to be.