Join Emily Kay for an in-depth discussion in this video Style guides, part of Photoshop for Web Design.
- [Instructor] One of the ways to ensure…that your team is on the same page…when designing separate parts of the website,…or handing designs off to developers,…is to create design documentation…or a website style guide.…It is beneficial to have a style guide…in order to create a cohesive experience…among different pages.…Also, it helps to ensure that future development…or third party production will follow brand guidelines.…The style guide is going to define all of the…little ins and outs of your design.…Here are some elements that I've included…inside of my style guide.…
Your style guide may differ depending on your project.…And of course this is all customizable…so think about the things that you want to be consistent…in your design and make that part of your style guide.…I like to start off with having some sort of logo treatment…so in my case,…sometimes my logo appears in a white background,…sometimes it appears on a colored background.…And you can see that this is how I want it treated.…The next section that I have is the colors.…
Author
Released
1/17/2018- Setting up workspaces and artboards
- Using libraries
- Responsive design tips and tricks
- Setting breakpoints
- Creating navigation elements
- Creating textures and backgrounds
- Embedding or linking smart objects
- Making custom templates
- Creating reusable UI elements
- Saving and exporting for the web
- Using Generator
Skill Level Intermediate
Duration
Views
Related Courses
-
User Experience for Web Designers
with Chris Nodder1h 49m Beginner
-
Introduction
-
Welcome1m 38s
-
What you should know4m 15s
-
-
1. Set Up Your Project
-
Document setup3m 12s
-
Workspaces8m 12s
-
Artboards5m 18s
-
Color modes and settings2m 47s
-
Libraries9m 3s
-
-
2. Design Responsively
-
What is responsive design?3m 11s
-
Set breakpoints1m 41s
-
Design tips and tricks7m 22s
-
Layer comps7m 51s
-
Creating navigation elements3m 41s
-
Smart objects: Embedded5m 9s
-
Smart objects: Linked3m 7s
-
Preset templates3m 26s
-
Custom templates8m 22s
-
Styles panel5m 28s
-
-
3. Process
-
Mood boards4m 8s
-
Wireframes11m 22s
-
Reusable UI3m 43s
-
Create comps6m 37s
-
-
4. Collaboration
-
Style guides5m 33s
-
Client review comps4m 57s
-
-
5. Image Considerations
-
Retina displays2m 33s
-
Image types for the web3m 57s
-
-
6. Export Assets for Development
-
Legacy save for the web3m 18s
-
Quick Export3m 46s
-
Export As4m 39s
-
Using Generator3m 48s
-
-
Conclusion
-
Next steps52s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Style guides