Video, Audio and Animation
Video
Video Top 10
Final Cut Pro | Adobe Premier Pro* Biteable Videos * | * Patatap * | * Sketch App * | * Canva * | * Sketch *
* Figma * | HTML5 Video
Brad Traversy YT Full Screen Video Background - HTML & CSS
Codepen Brad Traversy Codepen Full Screen Video Background - HTML & CSS
Audio
** Bensound Royalty Free ** | Audacity | Logic Pro MacAudio Hijack
Animation
Screen Recorder
* Screen Record on Mac * | Obs Project | Screen Record TechSmithVideo Hosting
YouTube | Vimeo | TechSmith ScreenCast | TechSmith CamtasiaAnimation
Powtoon
GreenSock Animation (GSAP)
GSAP Mike v2 | GSAP Mike v3 |Video Marketing
** The Rise of Video Marketing **Website Design
Adobe Color Illustrations | Wikipedia Design Definitions | Aesthetics | CompositionElements and Principles | Graphics |
Information Graphics | Logo | Outline of Design and Development | Usability and ADA Compliance |
User Experience | User Interface | * Ideation * | Interaction Design Foundation | Golden Golden_ratio
Aspect Ratio Calculator | Color Designer Link to a Palette | * Style Tiles * | Design Inspiration
Style Guide
Style GuideImages
Pexels | Unsplash | Pixabay* Google's WEBP to JPEG or PNG * |
Icons
The Noun Project |Website Layout
W3School Layout | W3 Navigation | W3 Opacity | Align | * BS Examples * | BS Grid Example | BS Templates | Responsive Design 2Responsive Design 3 | Grid Examples | Breadcrumbs
CSS Internal, External, Inline | CSS Float | CSS Animation |
Great High Quality Design Examples
Praxent Website |Mood Boards
Mood boards can be useful in Web design. They can also be useful for the purpose of making presentations, creating physical print projects, or for any type of comprehensive design work. Mood boards are often physical installations that are made with foam board or cardboard, where designers paste or attach individual objects onto the board. They look at these collections of curated objects to start to imagine the unified look and feel of a creative project. For example, someone using a mood board for Web design might start to put together images that all fit a certain style, along with visuals that have colors or color schemes in common. Looking at the mood board gives them a kind of creative road map in terms of designing the final project.
Canva | Adobe Spark | Figma | Wiki Mood Board | Milanote| * Trends *Mockups and Wireframe Design Tools
* Moqups * | Balsamiq | Zurb Sketch | Sketch | Box ModelWireframes Compared to Other Design Documents
Dream Host Wireframing | ** Wireframe cc **The terminology used in design documentation often gets used interchangeably, so let’s clarify the
differences.
Think of wireframes as the skeleton. They loosely shape the final product, giving you a reliable idea of where
everything will eventually go. The content is the muscle (and can be as meaty or trim as you want).
Next comes the mockup—the skin. Mockups are strictly visual. This is the documentation where you solidify your
visual decisions, experiment with variations, and (optionally) create pixel-perfect drafts.
With the prototype, you breathe life into your creation. Prototypes test your interface ideas and generate the
feedback necessary to keep the design headed in the right direction. Prototypes can (and should) be used
during
every stage of the design process, and can be in any fidelity. As we’ll discuss below, you can even make a
lo-fi
prototype by adding interactivity to a wireframe.
Remember that wireframes are only a means to a prototype. In other words, prototypes are the most functional,
useful documentation you can create. Wireframes just help you focus the placement of content for your
prototype.
thought map, wireframe, mockup, functional prototype, coded draft, work in progress site, etc..