To start your way to becoming an amazing web artisan, read and watch the below links, in order, and complete the projects listed afterwards.
- https://youtu.be/a5KYlHNKQB8
- https://youtu.be/_2LLXnUdUIc
- https://youtu.be/sByzHoiYFX0
- https://youtu.be/l-S2Y3SF3mM
- https://youtu.be/MELKuexR3sQ
- https://youtu.be/YqQx75OPRa0
- https://youtu.be/dIJxxFKPW-k
- https://paperform.co/blog/principles-of-design/
- https://medium.theuxblog.com/how-form-and-function-play-into-the-rise-of-good-design-88503c206f97
- https://www.keepitusable.com/blog/the-psychology-of-choice-why-less-is-more/
- https://www.kimp.io/color-psychology-in-marketing/
- https://www.interaction-design.org/literature/topics/visual-hierarchy
- https://blog.hubspot.com/marketing/whitespace-web-design
- https://youtu.be/jprHnetPHQo
- https://www.greenbook.org/mr/market-research-news/the-fundamentals-of-layout-design/
- https://www.pinterest.com/mattiecagle/advanced-layout/
- https://www.designmantic.com/blog/infographics/font-moods/
- https://youtu.be/XU1-Rz2Q7-E
- https://www.creativethinkinghub.com/creative-thinking-and-stealing-like-an-artist/
- You must be proficient with digital design and mock-up tools.
- You must know how to use templates and prebuilt art to save time; a designer often works like a conductor, orchestrating premade work to make a coherent whole.
- You must keep up with trends so your work feels fresh (even if freshness comes by going against trends).
- You must reach out to design blogs and magazines for sources of inspiration.
- You must seek guidance from seasoned peers and become part of a professional community. Start early by putting your work on portfolio sites like Dribbble and Behance. Solicit C+R from members of these sites and other communities like Reddit and Discord. Follow your favorite creatives on social media. Subscribe to newsletters.
- https://www.figma.com
- https://shuffle.dev
- https://www.freepik.com/
- https://www.canva.com/learn/100-color-combinations/
- https://envato.com/market/
- http://thestocks.im
- https://unsplash.com/images
- https://www.gettyimages.com
- https://www.wix.com, https://www.weebly.com, https://www.squarespace.com (Yes, it's okay to use site builders...)
- https://dribbble.com
- https://youtu.be/PlUWgs6LYrQ
- https://youtu.be/2xc9YKdlLW0
- https://www.thisiscolossal.com
- https://tympanus.net/codrops/
- https://godly.website
- https://thefwa.com
- https://www.awwwards.com
- You must understand how to properly sequence your design processes to make on time deliverables for your clients
- You must understand how to move from ideas, to sketches, to low fidielity wireframes, to high fidelity mock-ups
- You must understand how to iterate and solicite feedback in a collaborative manner
- https://uxmastery.com/ux-designer-workflow/
- http://www.jjg.net/elements/pdf/elements.pdf
- https://xd.adobe.com/ideas/process/
- https://www.springboard.com/blog/design/ux-design-principles/
- https://youtu.be/00rzg3y6hJc
You must understand what interface components work best for a given set of requirements.
- https://developer.apple.com/design/human-interface-guidelines/
- https://docs.microsoft.com/en-us/windows/win32/uxguide/designprinciples
- https://docs.microsoft.com/en-us/windows/win32/uxguide/guidelines
- https://docs.microsoft.com/en-us/windows/win32/uxguide/how-to-design-desktop-ux
- http://ui-patterns.com
- https://learnui.design/blog/100-things-ux-ui-designer-know.html
- https://www.usability.gov/what-and-why/user-interface-design.html
Web Page & Application Components
- https://www.w3schools.com/html/html_form_input_types.asp
- https://www.w3schools.com/html/html_blocks.asp
- https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
- https://learnui.design/blog/
- https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/
Admin templates make good references for UX design:
- http://webapplayers.com/inspinia_admin-v2.9.4/ Go through the interface items on the left hand side, one at a time, and consider how you might use each to solve an imaginary user interface requirement.
- https://pixinvent.com/demo/vuexy-vuejs-laravel-admin-template/demo-1/dashboard/ecommerce
- https://preview.tabler.io/index.html
Game interface design can help you think out of the box:
- https://www.toptal.com/designers/gui/game-ui
- https://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-bad--gamedev-3943
- https://superjumpmagazine.com/top-5-best-video-game-uis-db941d6a9357
You must understand digital marketing concepts, strategies, techniques, tests for effectiveness, and terminology.
Marketing channels include, but are not limited to, websites, landing pages, click (sales)-funnels, email campaigns, affiliate marketing (blogs / websites), video advertisements, viral marketing, influencers (celebrity), billboards, and others.
You must understand the concepts of CRM, sales cycles, B2B, B2C, ROI, performance measures, A/B testing, analytics, unique visitors, bounce rate, conversions, sales, and leads.
- https://youtu.be/Xs6FNIIZO1M
- https://youtu.be/1vRx5TYTmYs
- https://www.hotjar.com/heatmaps/heatmap-case-studies/
- https://www.spiralytics.com/blog/digital-marketing-channels/
- https://diggitymarketing.com/types-of-digital-marketing/
- https://www.ventureharbour.com/roi-calculator-how-to-calculate-your-marketing-roi/
- https://youtu.be/zFMgpxG-chM
- https://youtu.be/VSSL5yUnOVc
- https://youtu.be/PT0bkGv8DDU
- https://youtu.be/SlhESAKF1Tk
You must be able organize visual design and verbal content to produce professional quality deliverables (e.g., a video advertisement, website design, email circular, instructional diagram, infographic, etc.):
- https://medium.com/blocksurvey/tips-and-tricks-to-design-a-better-ui-2da44cee6c17
- https://www.youtube.com/watch?v=kkeRVk3s89A
- https://unbounce.com
- https://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/
- https://blog.hubspot.com/service/testimonial-page-examples
- https://yoast.com/optimize-landing-page/
- https://blog.aweber.com/digital-marketing-2/craft-high-converting-landing-pages.htm
- https://youtu.be/2iuuSVfOK8Q
- https://youtu.be/0JT7Lvft63E
- https://youtu.be/a-JmhK9nKJk
- https://youtu.be/c21cHrw5b9g
- https://youtu.be/9i_WVm5LPSc
- https://youtu.be/NyB0x9F9MKs
- https://youtu.be/rl9ZcfKt8sY
- https://youtu.be/uBBmbdPbfhw
- https://visme.co/blog/best-data-visualizations/
You must be able to structure information and write effective, compelling copy:
- https://copyblogger.com/proven-headline-formulas/
- https://goodmancreatives.com/write-great-copy-for-your-website/
Using the design and mock-up program Figma, and the project generator linked below, complete a Branding, Marketing, and UX / Product design:
Create a design for an interactive surf clock using Figma. ⏰ 🌊 🏄
The interactive design should show 1. time 2. date 3. weather 4. wave period 5. wave height information, and 6. streaming video from 7. a selectable list of surf spots. The streaming video does not need to function. Use a screenshot! It's a design.
Create a website to market an idea of your own for a business, product, or service. You may use templates, clip art sites (like Freepik / Unsplash / Canva), website generators (like Squarespace / Wix), or any other tools to help you go faster. Focus on information structure over design customization.
Create a website to market yourself as a digital designer. Add links to your professional social media accounts (LinkedIn, Twitter) and social design profiles (Behance / Dribbble). Avoid personal and private content. You may use templates, website generators or any other tools you like to help. Add customizations to make it your own.