Join Emily Kay for an in-depth discussion in this video Wireframes, part of Photoshop for Web Design.
- [Instructor] A website wireframe is a basic visual guide…used in a site's interface design.…It sets the structure and helps maintain…design consistency throughout your project.…They are usually completed before…any artwork is actually developed.…Here's a wireframe that I've setup…for our Aloha Pineapple website…that we're working on.…I have wireframes for the small,…medium, and large screen.…I'll zoom in a little bit so you can take a look.…You can see that I've established…basic positioning places and sizing…for the various elements that are…going to be part of my website.…
All of the elements in the wireframe…are usually displayed and organized…to consider the following.…The content, what will actually be displayed in this page?…The structure, how will the elements…of this page be put together?…The hierarchy, how will these elements…be displayed in regards to positioning,…labeling, and sizing?…And functionality, how are these elements…going to work together?…Then finally behavior.…How do these elements interact with the user?…
- 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
User Experience for Web Designerswith Chris Nodder1h 49m Beginner
1. Set Up Your Project
2. Design Responsively
5. Image Considerations
6. Export Assets for Development
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take 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.