Guide: Designers Toolkit

daniellex0 commented 3 years ago

Overview

We need to create a UX/UI Designer Toolkit so that designers at Hack for LA can find many helpful resources to reference in one place.

Action Items

[x] Gather examples of design resources used by UX/UI designers at Hack for LA
- [x] Reach out to design team on each project sharing with them the list we have so far (the resources section of this issue) and find out if they have any other resources they use. Keep annotating the list to prevent designers from spending time on duplicate documentation.
- [x] Once done, remove the "Guide: Gather Examples" label and add the "Guide: Draft Guide"
[x] Create a draft Toolkit document, either in markdown format in this issue or a google doc in the [ux/ui google drive]
- [ ] Once done, remove the "Guide: Draft Guide" label and add the "Guide: Review Guide" label
[ ] Review the Toolkit document with UX/UI community of practice
- [ ] Once done, remove the "Guide: Review Guide" label and add the "Guide: Leadership Review" label
[ ] Present to the Hack for LA leadership team for sign off
- [ ] Once approved, remove the "Guide: Leadership Review" label and add the "Guide: Place Guide" label

Resources

Update issue hackforla/product-management#15 with the name of item you are working on

Resources gathered so far (suggested content)

We either have links to each of these things or they will be detailed in another guide, which can be linked to:
- Full Page Screenshot Chrome extention
- How to setup figma for teams for free (this will be a guide on the admin team repo https://github.com/hackforla/admin/issues/19)~ in the meantime see admin channel and ask for Bonnie to meet with your project leads to setup your teams figma
- Color picker chrome extention
- How to setup Miro for teams for free (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/knowledgebase-content/issues/7)
- Accessibility Guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/UI-UX/issues/16)
- logo guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/UI-UX/issues/20)
- Brand Identity https://github.com/hackforla/UI-UX/issues/1
- Free Enterprise Design Thinking course and certificate IMB Enterprise Design Thinking Course and Certificate
These items will need to be more detailed in the guide:
- image use guidelines
- all images used in the project need to have documented source and how they are licensed.
- if licensed via providing credit on the website, then the website must have a credits page. See hackforla.org/credits.
- make sure the image you choose is available in high resolution and ideally as an .svg
- Types of images to use and why

Projects to check to see if they have suggestions for additions

Data Organization

daniellex0 commented 3 years ago

Potential resources to include in toolkit:

full page screenshot chrome extension
How to setup figma for teams for free
Color picker chrome extension
How to setup Miro for teams for free
Accessibility Guidelines
Types of images to use and why
logo guidelines
image use guidelines

ExperimentsInHonesty commented 2 years ago

Hana and Danielle from the design systems team said: "This guide does not relate to what we are currently working on [design system]."

Bonnie Update: https://github.com/hackforla/design-systems/issues/89#issuecomment-947803040

ExperimentsInHonesty commented 2 years ago

This is Danielle's list, annotated by Bonnie. I am moving the content here to the resources at the top of this issue.

We either have links to each of these things or they will be detailed in another guide, which can be linked to:
- Full Page Screenshot Chrome extention
- How to setup figma for teams for free (this will be a guide on the admin team repo https://github.com/hackforla/admin/issues/19)
- Color picker chrome extention
- How to setup Miro for teams for free (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/knowledgebase-content/issues/7)
- Accessibility Guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/UI-UX/issues/16)
- logo guidelines (this will be detailed in this guide and this guide should link to it https://github.com/hackforla/UI-UX/issues/20)
These are the remaining items from Danielle's list that need detailing
- image use guidelines
- all images used in the project need to have documented source and how they are licensed.
- if licensed via providing credit on the website, then the website must have a credits page. See hackforla.org/credits.
- Types of images to use and why

ExperimentsInHonesty commented 2 years ago

Sent the following message in slack

So it is important to capture those resources and notes about them in this issue, so that later we can add them to the toolkit section of the hackforla.org website and that their can be a guide  (divided up by type of resource) that would be useful for new volunteers.  Please paste your :pray:helpful links and details here https://github.com/hackforla/UI-UX/issues/25

kvnw2020 commented 2 years ago

Resource

Link Title: IMB Enterprise Design Thinking Course and Certificate
- Link: https://www.ibm.com/design/thinking/page/courses/Practitioner
- Summary: Free Enterprise Design Thinking course and certificate

ExperimentsInHonesty commented 2 years ago

Resource:

Link Title: Reimagining Atlassian Design System - Jennie Yip (Schema 2021)
- Link: https://www.youtube.com/watch?v=_pfyLVXTVSQ
- Summary: Atlassian's Lead Designer giving a talk about how they build, maintain and evolve their Design System across the portfolio of projects.
- Notes: Just watched the Reimagining Atlassian Design System - Jennie Yip (Schema 2021) video that the Design Systems team was watching and my favorite quote that Jennie referenced was
- Quote: "A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a simpler system" John Gall, The Systems Bible

Rabia2219 commented 2 years ago

Rabia from the Internship team found the following resources:

Digital Accessibility Foundations Free Online Course W3C's Web Accessibility Initiative Article on Accessibility of Remote Meetings

And Priyanka from the Internship team found:

Article on Figma plugin for accessibility

Just mentioning them here in case they are useful.

designer2209 commented 2 years ago

Hello @Exonkenz this is a list of plugins that I use, so I will be commenting their names and what their functionalities are as well the links.

Unsplash
- This plugin allows you to use high quality stock images with just a click.
Iconify
- Import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 100 icon sets containing over 100,000 icons) to Figma document as vector shapes.
Material Design Icons
- Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips.
- Search icons by name or scroll through the entire list. Filter by category, change style, size, and color. Available in all styles: outlined, filled, sharp, rounded, and two-tone.
Icons8 — icons, illustrations, photos
- Icons: consistent, pixel-perfect, in 40+ styles, made by the best icon designers
- Illustrations: flat and 3D, vector and raster, created by top Dribbble artists
- Photos: people, objects, and animals, ready-to-use shots, and background-free elements, taken by a movie-scale crew
- You can search by keywords and sort by styles and categories
Lorem ipsum
- Generate ‘Lorem ipsum’ to fill your text layers with dummy text.
- Select all the text layers you want to generate ‘Lorem ipsum’ for then click ‘Generate’ — it will generate for each layer uniquely.
- ‘Auto-generate’ will automatically fill the selected layers with the perfectly amount of ‘Lorem ipsum’ to fit their existing frame.
Vectary 3D Elements
- Vectary 3D plugin for Figma is adding the missing third dimension to your 2D designs. Place your Figma design into a predefined 3D mockup or your custom 3D element. Set your desired perspective in 3D and place the result into the scene with one click.
Fig3D
- Convert shape and groups to 3D by extruding in Z - plane.
- Render realistic images with soft-shadows from the 3D models.
- Control view direction for the output render.
- Adjust height and shadow direction and other light properties.
- Switch between perspective and orthographic(isometric) projections.
- Adjust object roughness and metalness.
- 3D Bevel and emboss. (Corner)
- 3D model export for external renderers.
Clay Mockups 3D
- Run Clay Mockups 3D from the plugin menu
- Choose a device model
- Select any layer to render it on the device's screen. For best results select a layer that's close to the device's screen dimensions (or the same aspect ratio). If it's not exact that's fine, images will be placed similar to Figma's 'Fill' setting for image fills. To create a frame with the right dimensions click the "Create Empty Frame" button.
- To change the camera angle select an angle preset or click and drag over the device. Alternatively you can set an exact rotation in degrees on the right. You can also modify the rotation of the model itself there.
- Choose a device color. If you have local color styles click the color swatch to choose one, or manually enter a hex code.
- Click "Save as Image" to render the current view as an image layer in Figma.
- To edit the mockup after it's been saved, select the layer and click "Edit Mockup" under Plugin on the properties panel. This will allow you to apply any updates made to its screen layer, or change any of its other settings.
Mockuuups Studio
- Super-easy mockup generator with over 1300 various scenes. The plugin is packed with everything you need to create product mockups, outstanding marketing materials, even visual content for social media or blog posts.
- Select a frame, and Mockuuups Studio takes care of the rest. The plugin automatically inserts & scales the selected frame into hundreds of previews. Pick your favorite and export the mockup as a file or place it right back into the document.
NB Charts
- It can be generated Line charts, column charts, bar charts, pie charts, radar charts, scatter charts,bubble charts, ring charts, maps, candlestick, gauge…
UI Faces
- UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. The avatars are aggregated from various sources. You can filter by age, gender, emotion, etc.

ExperimentsInHonesty commented 2 years ago

@Exonkenz Please move this document: Designers Toolkit Draft Document that you have started to the UI/UX community of practice guides folder. It should not be in your personal drive.

See How to Format a Guide - WIP

Exonkenz commented 2 years ago

I have just done that now. Thank you Bonnie

ExperimentsInHonesty commented 2 years ago

Fill out spreadsheet and add any notes that will help us get the website team moving forward on the changes we need on this issue https://github.com/hackforla/website/issues/3357

Exonkenz commented 1 year ago

I have filled out the spreadsheet and included a summary of value in all resources.

the-techgurl commented 11 months ago

A tool that could help test color combinations and see if they have adequate contrast is a Figma plugin stark https://www.getstark.co/figma/

hackforla / UI-UX