Norwood website designers
Hello and welcome to this website designers Web Designer Norwood video tutorial.
I’m Owen Corso from Google.
And today, we’re going to build a rich media expandable creative with video.
Let’s start by selecting file, New File.
This opens a dialog box where we will set up our ad.
First, let’s make out high of project.
We have four options– The default is Display & Video 360so we will leave that as is.
Does Going to the Dentist Make You Nervous?
KENT: My name is Kent.
I'm the creativespecialist on the Google Web Designer team and I'd like to review dynamic exits in Studio A dynamic exit refers to the URL loaded when a dynamic ad is clicked on It's usually related to the product being shown and that URL comes from yourdata feed This video describes the workflow for setting up dynamic exits in Studio Now the simplest case is an ad which doesn't use a gallery or carouselcomponent Here's an example from another one of my videos titled Dynamic inStudio - Google Web Designer You'll see my creative contains only placeholder content But when I preview it in Studio you'll see it loading data from my feed Refresh it Now we're seeing product number 0 Look at my feed for product 0 we're seeing this name, this image and here is the URLfor my exit for this product Now when I set up this ad, I used the simple static exit So when I click anywhere on the ad it'll load a static URL like a landingpage What we want to have happen is this to exit to the URL associated for that product Let me show you how to do that in Google Web Designer First thing we'll do is select the current event and delete it Then we're going to look over inour components panel and open up Interaction and grab a taparea Then with the Transform control selected I'm going to stretch this out to cover the ad And in my Dynamic panel I'm going to click the plus icon to make a new binding We'll select that tap area We're going to look for Exit override URL And we'regoing to drill into our feed the first item, exit URL, and get the URL Click OK and we'llpublish this Now when that's done we'll switch over toStudio We'll reload our creative I'm going to click on the ad Now I'll see we'regetting product one Just to make sure this is really working let's reload itand get another image Here's number five Let's click on that Here's product fiveso that's good Now next thing you might want to do is combine static and dynamicexits in a single ad so you might want to have a logo up here which goes to a home page and maybe some disclaimer text down here which goes to a legal page So let's see how we can do that Back in Google Web Designer I'm going to double click this newtaparea and give it a new name exit-default then I'll copy and paste it I'm going to call that one exit-product and this layer is on top So I'm going tomake this just cover the product area and I'm going to select exit-default andchange the exit on that Now one trick over here in the Dynamic panel I can choose Selection and now I would just see the binding on that selection I'm going to select it and delete it With it still selected I'm going to move to the Events panel click the plus icon and add a new event Google ad, exit ad, gwd-ad I'm going to put an arbitrary ID in here and I'm going to put a full URL to mylanding page OK and we're going to publish again Now when that's done, we'll switch back to Studio and reload the page Now when I click in the corners I'm getting my static URL And when I click on the product I'm getting the correct product That concludes this demo, dynamic exits in Studio Thanks for watching.
Norwood website designers
Next, we can select the type of ad.
We want to make an expandable, so we select Expandable on the left.
Next, we can set again ad’s dimensions.
We are building a 320 by 50that expands to 480 by 250.
So I will make those changes.
We then assign the Norwood creative a name.
I will leave my Save ToLocation as the default, and leave the talk about set to Quick.
Once I’m happy with my settings, I click OK.
Google Web Designer creates the initial pages of the ad for me with the dimensions I defined.
The collapsed page already contains a Tap Area event to expand the ad and an expanded pageNorwood with a close tap area to collapse back down.
From product design to virtual reality
OWEN CORSO: Hello and welcometo this Google Web Designer video tutorial.
I'm Owen Corso from Google.
And today, we're goingto build a rich media expandable creative with video.
Let's start by selectingFile, New File.
This opens a dialog boxwhere we will set up our ad.
First, let's chooseour environment.
We have four options-- The default is Display & Video 360so we will leave that as is.
Next, we can selectthe type of ad.
We want to make anexpandable, so we select Expandable on the left.
Next, we can set upour ad's dimensions.
We are building a 320 by 50that expands to 480 by 250.
So I will make those changes.
We then assign thecreative a name.
I will leave my Save ToLocation as the default, and leave the animationmode set to Quick.
Once I'm happy with mysettings, I click OK.
Google Web Designer creates theinitial pages of the ad for me with the dimensions I defined.
The collapsed page alreadycontains a Tap Area event to expand the ad and an expandedpage with a close tap area to collapse back down.
It also has added all theinitial code needed for the ad to talk to the ad server andcollect tracking metrics.
Those metrics are builtinto the components, and we can assign uniqueidentifiers to each component as we go.
So now I can start adding thegraphic elements I've already prepared.
I drag a backgroundimage or initial ad state and drop it onto the stage,then align it to the stage, and layer it behind the taparea by sending to back.
Now, let's switch toour expanded page.
Let's add a background imageby dragging my image file to the stage.
I can also add abutton to the stage by dragging theTap Area component.
Let's make a backgroundexit tap area.
I will size, align it, and thenI will give it a unique name.
To add functionalityto the button, I will add an event using theplus button in the event's toolbar.
This brings me tomy Actions panel, where we assignall of the metrics to our ad instead ofcoding them manually.
I'm going to selectthe tap area I just named BackgroundExit from the list.
Choose Tap Area, Touch/Click as the event.
Google Ad, Exit ad.
On the Receiver panel,I select gwd-ad.
Lastly, I give it an exitidentifier and a destination URL.
For more in-depth detailson the event model, check out the Eventsand Metrics video.
Next, let's add avideo component.
You drag it to the stage,then give it a name and size it properly.
Tell it how to behave.
I want it to autoplay and start muted.
And you target thevideo file here.
This component has allof the metrics built in, so you can avoid handcoding them in the ad.
Let's preview our ad.
On page load, we seeour collapsed state.
When we click, the adexpands to our expanded page.
Our video behavesas we told it to, and clicking on the backgroundexits to our landing page.
Once the ad is built andfunctioning as you want, it is ready to publish.
Go to File, Publish.
And you're presentedwith a few options-- Publish Locally,to Google Drive, and, finally, toStudio.
Let's choose Publish Locally.
This is where you cancontrol how the ad is output.
For instance, youcan add polite load to the ad, which delays thead load until after the page content loads.
You can also set itto minify the code and add browserprefixes automatically.
We'll leave all thesesettings as to the default.
Click Publish, and Web Designerwill wrap up all of your files in a nice little zipfor uploading to Studio.
Now, let's testit out in Studio.
Let's make a newcreative of expanding type.
Drag the zip file to uploadour creative to Studio.
Now, let's preview our creative.
As you can see, I can expandthe unit, play the video, and trigger thebackground exit we added.
You can see these eventslogging to the output console.
And that's an overviewof Studio integration features in Google Web Designer.
Using Autocomplete for Optimal Form UX - Designer vs. Developer #24
This reading list is for anyone who wants to learn or deepen their knowledge in the disciplines of User Research, Usability, Information Architecture, User-Interface Design, Interaction Design, Content Strategy or Experience Strategy.
The list is broad and includes books that exemplify design thinking, processes, methods, principles and best practices. Some of the books on this list are over 20 years old, yet still relevant more than ever.
There’s not a day where I don’t find myself applying the ideas from these books. Each has helped shaped the designer I am today, helped me advance my craft. I hope that you too, can extract the same value.
Last updated 09/10/2017
My Top Ten
- The Design of Everyday Things, Donald Norman
- About Face: The Essentials of Interaction Design, Alan Cooper
- The Elements of User Experience: User-Centered Design for the Web and Beyond, Jesse James Garrett
- The User Experience Team of One: A Research and Design Survival Guide, Leah Buley
- Manage Your Day-to-Day: Build Your Routine, Find Your Focus, and Sharpen Your Creative Mind, Jocelyn K. Glei, 99u
- A Practical Guide to Information Architecture, Donna Spencer
- Designing Together: The collaboration and conflict management handbook for creative professionals, Dan M. Brown
- Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences, Stephen Anderson
- 100 Things Every Designer Needs to Know About People, Susan Weinschenk
- Lean UX: Applying Lean Principles to Improve User Experience, Jeff Gothelf and Josh Seiden
More Must-Reads On Thinking, Methods, Principles and Best Practices
I find it helpful to choose what to read based on what’s relevant at the time. Applying what you’re reading, as you’re thinking and making is a great way to solidify concepts, reflect and learn.
Some old, some new. All important reading, in no particular order.
Last updated 09/10/2017
- The Shape of Design, Frank Chimero
- Mental Models: Aligning Design Strategy with Human Behavior, Indi Young
- Practical Empathy: For Collaboration and Creativity in Your Work, Indi Young
- Interviewing Users: How to Uncover Compelling Insights, Steve Portigal
- Designing Web Interfaces: Principles and Patterns for Rich Interactions, Bill Scott, Theresa Neil
- The Laws of Simplicity (Simplicity: Design, Technology, Business, Life), John Maeda
- Information Architecture for the World Wide Web: Designing for the Web and Beyond, Peter Morville, Louis Rosenfeld, Jorge Arango
- Sketching User Experiences: The Workbook, Saul Greenberg, Sheelagh Carpendale , Nicolai Marquardt, Bill Buxton
- Well Designed: How to Use Empathy to Create Products People Love, Jon Kolko
- Thoughts on Interaction Design, Jon Kolko
- Linchpin: Are You Indispensable?, Seth Godin
- Don’t Make Me Think AND Rocket Surgery Made Easy, Steve Krug
- Designing Interfaces, Jennifer Tidwell
- Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests, Jeffrey Rubin, Dana Chisnell
- Designing Interactions, Bill Moggridge
- The Visual Display of Quantitative Information AND Envisioning Information, Edward R. Tufte
- A Project Guide to UX Design: For user experience designers in the field or in the making, Russ Unger & Carolyn Chandler
- Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers, Dave Gray, Sunni Brown, James Macanufo
- The Mobile Frontier: A Guide for Designing Mobile Experiences, Rachel Hinman
- Design Is the Problem: The Future of Design Must be Sustainable, Nathan Shedroff
- Prototyping: A Practitioner’s Guide, Todd Zaki Warfel
- Making Meaning: How Successful Businesses Deliver Meaningful Customer Experiences, Steve Diller, Nathan Shedroff, Darrel Rhea
- Content Strategy for the Web, by Kristina Halvorson, Melissa Rach
- Just Enough Research, Erika Hall
- Design Is A Job, Mike Monteiro
- Designing for Emotion, Aaron Walter
- Creative Workshop: 80 Challenges to Sharpen Your Design Skills, David Sherwin
- Letting Go of The Words: Writing Web Content that Works, Janice (Ginny) Redish
- Designing the Obvious: A Common Sense Approach to Web Application Design, Robert Hoekman Jr
- Designing the Moment: Web Interface Design Concepts in Action, Robert Hoekman Jr
- Designing for the Social Web, Joshua Porter
- Undercover User Experience Design, Cennydd Bowles, James Box
- Product Design for the Web: Principles of Designing and Releasing Web Products, Randy Hunt
- Designing the User Interface: Strategies for Effective Human-Computer Interaction, by Ben Shneiderman, Catherine Plaisant, Maxine Cohen, Steven Jacobs
- This is Service Design Thinking: Basics, Tools, Cases, Marc Stickdorn, Jakob Schneider
- Resonate: Present Visual Stories That Transform Audiences, Nancy Duarte
- Metaskills: 5 Talents for the Robotic Age, Marty Neumeier
- The Brand Gap: How to Bridge the Distance Between Business Strategy and Design, Marty Neumeier
- Getting Real AND Rework, 37 Signals, Jason Fried, David Heinemeier Hansson
- The Humane Interface: New Directions for Designing Interactive Systems, Jef Raskin
- Simple and Usable Web, Mobile, and Interaction Design, Giles Colborne
- Search Patterns: Design for Discovery, Peter Morville, Jeffery Callender
- Emotional Design: Why We Love (or Hate) Everyday Things, Don Norman
- Neuro Web Design: What Makes Them Click? Susan Weinschenk
- Designing for the Digital Age: How to Create Human-Centered Products and Services, Kim Goodwin
- A Web For Everyone, Sarah Horton, Whitney Quesenbery
- How to Make Sense of Any Mess, Abby Covert
- Radical Focus: Achieving Your Most Important Goals with Objectives and Key Results, Christina Wodtke
- Org Design for Design Orgs: Building and Managing In-House Design Teams, Peter Merholz, Kristin Skinner
- Communicating Design: Developing Web Site Documentation for Design and Planning, Dan M. Brown
- Subject To Change: Creating Great Products & Services for an Uncertain World, Peter Merholz, Todd Wilkens, Brandon Schauer, David Verba
- Hooked: How to Build Habit-Forming Products, Nir Eyal
- The 46 Rules of Genius: An Innovator’s Guide to Creativity, Marty Neumeier
- Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days, Braden Kowitz, Jake Knapp, and John Zeratsky
- Designing with Data: Improving the User Experience with A/B Testing, Rochelle King, Elizabeth F Churchill, Caitlin Tan
- Banish Your Inner Critic: Silence the Voice of Self-Doubt to Unleash Your Creativity and Do Your Best Work, Denise Jacobs
- Design for Real Life, Eric Meyer & Sara Wachter-Boettcher
- Designing Interface Animation: Meaningful Motion for User Experience, Val Head
- Practical Design Discovery, Dan Brown
- On Web Typography, By Jason Santa Maria
- Designing Voice User Interfaces: Principles of Conversational Experiences, Cathy Pearl
- Thinking in Systems: A Primer, Donella H. Meadows
- Creative Confidence: Unleashing the Creative Potential Within Us All, Tom Kelley, David Kelley
More Useful Reading
Reading books is only a partial source of my inspiration and learning. I also frequently read blogs and articles. I highly recommend staying connected to these sources of great thought leadership:
- Eleganthack, Christina Wodtke
- Peter Merholz
- The Year of the Looking Glass, Julie Zhuo
- Bokardo, Joshua Porter
- Information Architects, Oliver Reichenstein
- Felt Presence, Ryan Singer
- Whitney Hess
- Disambiguity, Leisa Reichelt
- Form and Function, Luke Wroblewski
- Frank Chimero
- Aral Balkan
- David Cole
- Seth Godin
- Scott Berkun
- Google Ventures Design Library
- Adaptive Path
- Boxes and Arrows
- UIE Brainsparks
- UX Magazine
- UX Booth
- A List Apart
- Smashing Magazine
- Signal vs. Noise, Basecamp
- 52 Weeks of UX
If you’ve found this article helpful, I would love to hear about it. Comment, tweet me or reach out to share your story: email@example.com
Get My Newsletter
Subscribe to my mailing list and I’ll keep you updated with my latest writing. I’m trying to publish something every 2 months on design thinking and other enriching ideas to help you live a more productive and enjoyable work life.
As part of Intuit’s core initiatives to further cultivate mobile first thinking and accelerate growth into global markets, the Intuit Small Business Group’s Design Org has shifted from a model of designing and shipping prioritized features to a model where every designer is responsible for end-to-end, cross-device experiences, which includes designing for our products and services on desktop web, mobile web, desktop client apps, and native mobile apps.
As a design lead for our ecosystem of native mobile products over the past few years, I started getting a lot of questions around guidance and principles for mobile design. I noticed many of the designers, product managers, and engineers who are new to mobile app design or don’t live and breathe mobile app development on an everyday basis didn’t fully understand the nature of designing for native platforms and device capabilities. To reinforce the notion that “cross-device” and “mobile first” isn’t just about designing for smaller screens and scaling across multiple device sizes, I collaborated with the Design Systems Team to establish a set of mobile patterns and guidelines so that designers can hit the ground running, or run even faster, with mobile design. We recently published some guidelines, tools, and resources on our internal design toolkit that I thought would be great to share some key points and takeaways with a wider audience as the documentation addresses many frequently asked questions around mobile patterns.
Firstly, I want to start off by saying that what I write here is simply for guidance. Our mantra for any kind of pattern guidelines documentation we provide is, “Give me guidance, but let me drive.” We don’t want to be prescriptive, and we don’t want to tell you how to design, but this is a good starting point to get you going on native mobile designs. Why are we calling out native mobile? As we continue to design device-agnostic, end-to-end experiences and features for products and services, we must remember not to neglect the different platforms (i.e. our mobile products are currently offered on both iOS and Android).
1. Respect the platform
We documented patterns and components based on native operating systems that we have apps on: iOS and Android. When designing for native platforms, you should consistently refer to the native OS design guidelines first for maximum quality. Keep in mind that native platform guidelines constantly evolve, so it’s always good practice to stay on top of these guidelines and refresh your memory and knowledge often.
Apple’s Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/
Google’s Material Design Guidelines: https://material.io/guidelines/
2. Focus on the customer benefit
Always design for the customer benefit first. No use case is the same, and many use cases have exceptions. Do not design something simply because you can reuse a pattern or component for another feature. Design patterns help ground us as a system and unify an experience across an ecosystem of products, but they should by no means be the first or last stop in the design process. Always question yourself: How will this benefit the customer?
3. Think device first
Push your thinking beyond “mobile first.” Start thinking about leveraging device capabilities first. The native mobile device has a lot to offer: touch, voice, pressure, location tracking, accelerometer, notifications, etc. You are designing around the device, the platform, the user experience. How can these device features be utilized in our products? How can the mobile device benefit users beyond the screen interface in front of them?
4. Keep scalability in mind
Growing from the previous principle, do remember that a mobile device isn’t just a phone. Scalability across devices, more specifically between a phone and tablet, is a common challenge among designers. When we think of mobile devices, we know there are tablets, phones, phablets (not small enough to be a phone, not big enough to be a tablet). Some of the recurring questions I get asked are: Should there be parity between web and tablet designs? Can we translate the phone patterns to be the same on tablets? How do we design for phablets (not small enough to be a phone, not big enough to be a tablet)? To answer these questions, we researched with users, took an in-depth look at device interfaces and screen sizes, and set some standards. While the phone and tablet share many similarities, users use them very differently.
Mobile interfaces LESS THAN 7 inches width should be treated as a phone. Syntax and layout should be aligned across these devices as much as possible, but we also want to leverage native platform guidelines and capabilities first and foremost.
A fundamental design principle for mobile phones is to include only necessary information. Do not overload the user with more than they need to know or take action on. The phone is a convenient way to consume information on the go. Small business owners use a phone to complete quick actions while they are not in the office, capture data, view content, then perhaps close it out and come back to take a look later.
Mobile interfaces GREATER THAN 7 inches width should be treated as a tablet. Syntax and layout should be aligned across these devices as much as possible, and by no means should they need to align exactly the same as the less than 7-inch interfaces.
Tablet designs should look and feel like desktop web, but they should function like the phone (with tap/swipe/hold gestures, transitions, etc.). Many users view the tablet as a hybrid device. We’ve encountered many small business owners that don’t own a computer, but they own a tablet, and those users treat the tablet as a reliable device they can do work on.
To scale for the future or additional digital interfaces, you should also think about non-mobile touchscreens like TV displays, interactive table displays, automobile displays, laptop displays that you can touch, etc. You want to make sure you can scale for multiple screen sizes, large and small, and not limit yourself to thinking only about the devices your products are being supported by.
Patterns and Guidelines
This list is a small subset of patterns and guidelines that I’ve found designers have been commonly asking around best practices for our mobile products.
One of the major aspects that make navigating content on native mobile platforms so delightful is the transitions between screens. Two questions I get asked a lot are: When should a push (screen pushed in leftward from the right) be used? When should a modal (screen pushed upward from the bottom) be used? We’ve established the following best practices:
A push is essentially the fundamental screen transition to view a new screen that is stacked on top of the previous screen. There is typically a Back button so user can view the last viewed screen. For screens that are primarily for viewing, such as transaction detail screens or lists, we use a push.
A modal is typically used when we are requiring the user to select, edit content, or input data. All of our transaction forms use full screen modals as it requires more user thought due to several form fields on one screen. The titles bars for these screens typically have Cancel and Save or Cancel and Done actions. Then, when you tap Save, you get a push screen because you are viewing (not editing) the saved content.
Call to Actions
This section highlights a question I often get: “Should this call to action be a button or a text link?” In both iOS’ and Android’s design guidelines, text as buttons is the norm and recommendation. However, I feel when we use text, especially with a system font against a dark or light background, we lose out on a major opportunity to incorporate brand elements, such as our ecosystem green color or line iconography. So, we’ve deliberately moved away from using text as call to actions, and instead use buttons with high contrast, which also makes it very clear that it is a call to action and not just part of the screen content.
Our empty state screens provides a first impression to users who are new to our products. It usually consists of an illustration, a brief description, and a clear call to action. A common and current design trend is the usage of gray text on a light background. If you decide to follow that trend, make sure the text is readable and accessible by analyzing the foreground and background colors to meet the WCAG 2.0 color contrast ratio requirements.
Firstly, yes, it’s spelled caret, not carat or carrot. 🙂 Carets are used to promote discoverability. Historically, we try to use carets for every instance we want to indicate that the user should tap into the row to view more. However, in our forms, we are working toward to moving away from using carets and instead utilize the extra real estate by creating visual cues and conversational content design to indicate tap targets to view more. After some user testing with different design treatments, we’ve found that discoverability isn’t as much of an issue as we thought. Users will naturally tap on rows, whether there’s more information provided to them or not. We only want to use carets when absolutely necessary.
General rule of thumb for native mobile design: Use action sheets whenever there are multiple actions associated with a single call to action (that is not a system blocker). Apple iOS guidelines calls these action sheets. Google Android calls these bottom sheets. Use action sheets/bottom sheets whenever there are multiple actions associated with a single call to action.
Cards or Tiles
A card (or tile as other teams may call it) is a component acting as a rectangular container for a certain amount of information: visual elements, instructional text, diagrams, and action triggers. There are two types of cards based on appearance and usage: action card and info card.
We use native system dialogs for critical alerts, permissions related alerts, system blocker alerts, etc. The key word is “alert.” Note that for actions that aren’t related to these things, we try to use action sheets.
The general rule for native mobile design is to use system fonts as much as possible. However, we needed to incorporate our brand and voice and tone to create what we call “QuickBooks Ownable Moments.” For large headlines and sub-headlines, we use our brand fonts. For body text, we use system fonts. For fonts within buttons, we use system fonts.
Toggle switches are used to trigger a binary operation (i.e. turning something on and off). It is used often to replace a web checkbox metaphor. We have a lot of checkboxes in our web products so when we design for native mobile, we want to make sure we are only looking to replace binary checkboxes that allows for things like enabling or disabling content, show/hide content or fields, turn on/off tax, track returns for customers, instead of checkboxes used for selecting multiple items.
Again, these are just a few guidelines to get you started or to accelerate your mobile first design process, especially for native mobile. You are the driver and designer with creative license to define the end-to-end user experience for your products and services. Trust your gut, follow your instincts, but always remember to respect the platforms, focus on the customer benefit, think device first, and keep scalability in mind!
Yvonne So is a Principal UX Designer @Intuit currently crafting meaningful experiences for small businesses around the world. With a passion and mission for making technology more inclusive of everyone, she regularly speaks and writes about mobile UX, accessibility, innovation, and empathic design.