Web Design
Web Design Top 10
** Pixlr ** | * Sketch App * | * Canva ** Sketch * | * Figma * | * Editor X *
Quickdraw w/ Google |
Google Drawings on Google Drive
** Creative Market *** Creative Market Project Template *
Visme | Venngage
GIMP and GIMP Tutorials
GIMP Org | YT GIMP TotorialImages
Unsplash Business | Pexels | UnsplashPixabay | * Market Pixlr Stock Video Images and More *
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 GuideIcons
The Noun Project | Icons 8 | Flat Icons | Icon FinderSVG Pro | Ico Moon | Tabler Icons
Squircly
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
* Top Wireframe Tools * | ** 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..