Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Next »

Key Points


References

Reference_description_with_linked_URLs_______________________Notes______________________________________________________________


https://www.javacodegeeks.com/2021/04/a-6-step-website-
design-checklist-to-follow-in-2021.html
Website design checklist process ***


https://www.flaticon.com/free-icons/libraryfree icon sets
https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302/2list of wireframe tools - some free
https://dzone.com/articles/27-open-source-web-ui-mockup-toolsWire Mockup tools-  open source
https://icons8.com/articles/how-to-open-sketch-file-on-windows/Free Windows Sketch File viewer

Invision UX design tool

Draw.io diagram tool

Libre Draw

Libre Impress
https://publicdomainvectors.org/en/search/car%20outline/5free clipart 1
http://clipart-library.com/car-outlines.htmlfree clipart 2
https://www.freepik.com/free-photos-vectors/car-outlinefree clipart 3
https://extensions.libreoffice.org/extensions/creative-commons-clipart-galleryfree clipart 4





Key Concepts


Website Design Process 

https://www.javacodegeeks.com/2021/04/a-6-step-website-design-checklist-to-follow-in-2021.html




Potential Value Opportunities



Sketch CX Wire frame design tools


Sketch for MAC OS



Sketch Freebies - sample sketch files etc

https://freebiesbug.com/sketch-freebies/


Free Windows Sketch File Viewer

https://icons8.com/articles/how-to-open-sketch-file-on-windows/





Potential Challenges



Candidate Solutions



GIMP - best open source desktop tool for image design, management

https://www.gimp.org/

GIMP is a cross-platform image editor available for GNU/Linux, macOS, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.

Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done.




Tango Chrome Extension to Record real time web videos


https://www.youtube.com/watch?v=v-kwW-oM4BE



Video Explainer Tool - Open-Source solutions


https://www.explainervideomakers.com/blog/free-software-creating-explainer-videos/

video-explainer-tools-list-videomakers.com-Free Software for Creating Explainer Videos.pdf. link

video-explainer-tools-list-videomakers.com-Free Software for Creating Explainer Videos.pdf file

Free software is code written and it is maintained by community members and volunteers. Over the years, open-source programs have seen massive acceptance and growth in the business world. There are several reasons why businesses should use open-source software when creating their explainer videos. Here are reasons to adopt free software for creating explainer videos for your business.

PowToon– consists of excellent ready-made templates for producing superior quality animations.

Wideo-has over 50+ music tracks and 1300 images allowing you to create the best full HD explainer videos with ease.



Canva online free video explainer tool





Wire Frame Mockup Tools List


https://dzone.com/articles/27-open-source-web-ui-mockup-tools


https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302/2


some are free


draw.io


some have limited free versions

invision

lucidchart



Figma = Sketch + Google Docs shared model in a browser

https://www.figma.com/files

jm9y

Lth$yn

https://www.figma.com/files


Figma review

https://uxdesign.cc/goodbye-sketch-b9e66e1c287b


https://www.figma.com/pricing/



Registered for starter kit ( 3 projects, 2 editors )

user   jm9y

S$


FIGMA Alternatives - Penpot - cloud and desktop

https://alternativeto.net/software/figma/?license=opensource

https://itsfoss.com/figma-alternatives/ << good, quick PenPot video tutorial on UI design




Protopie Visual UI Designer

https://www.protopie.io/

Protopie - $120 per year per user

Windows, MAC OS

only designs for Mobile not Web UI

protopie single screen layout video


protopie component video


Learn Basics

https://www.protopie.io/learn/basics/


Micro-interactions demos

https://blog.protopie.io/video-series-beginners-guide-to-microinteractions-in-protopie-2a90f97039b4


More Udemy courses

ProtoPie - UI animation and prototyping

Practical guide to prototyping with the ProtoPie

4.1 (16 ratings)

60 students enrolled

Created by Ruslan Sharipov

Last updated 9/20

https://www.udemy.com/course/protopie-uiux/


Gravit Designer - EOS - try it

https://www.designer.io/en/pricing/

community is free, enterprise is $49 per year

rich set of features

https://www.designer.io/en/features/

many features

can run in cloud or download on any platform

https://www.designer.io/en/download/

online docs

https://documentation.designer.io/basics/?utm_source=intercom&utm_medium=mamsg&utm_campaign=welcome-msg


questions for community edition

  • can I create a reusable parts page? yes
  • can I export my pages for someone else to import? only as pdf, png, jpg


To get you started, check out our Gravit Designer Basics walkthrough or watch the overview video below:



draw.io - free browser plugin



Libre Writer Web Form extension

https://extensions.libreoffice.org/extensions/gui-widget-prototyping

extension adds basic forms and form controls to Libre Write

open the related toolbar views to use the forms

you can create multiple forms on a "large" page and then link them with hyperlinks as needed

exporting the document as html should create a set of logical pages as 1 real page with hyperlinks as needed



Plant UML diagram extension

https://extensions.libreoffice.org/extensions/libo_plantuml

requires Libre Office 6x+

The extension can be found on the extension website: https://extensions.libreoffice.org/extensions/libo_plantuml or on Github.com: https://github.com/lodahl/Libo_PlantUML/ .

encoding issue

When inserting PlantUML from external source you might meet some issues with encoding. Default encoding the source as UTF-8 will import and link with errors, as LibreOffice is considering the content as ISO (in my case ISO 8859-1) and the diagram will be wrong encoded.

If you encode the source file with the same encoding than LibreOffice, the the imported or linked files will render correctly.

On Windows I use Notepad++ and encoding in UTF-8 BOM without problems.

Graphwiz missing

On Windows I have discovered that sometimes PlantUML is complaining about Graphwiz not being present.

Download Graphwiz from here and install it. That solved the problem for me.

Compile

Just run ./make.sh Libo_PlantUML (on linux)


pencil - free download for web ui

http://evolus.vn/en-US/wiki/products/pencil/pencil.html

http://pencil.evolus.vn/

free sketch tool for web ui

http://pencil.evolus.vn/Downloads.html

http://pencil.evolus.vn/Features.html

supports basic controls for web forms

can create ui flow for pages with hyperlinks if pages in same document

provides diagramming support as well

many web, mobile templates to download

http://pencil.evolus.vn/Stencils-Templates.html


Sketch - UI Design on MAC only - billable

This WebUI mockup tool is popular among designers who prefer to work in MacOS. The reason behind its popularity is its simplicity. Undoubtedly, the tool is more intuitive than Adobe Photoshop and makes prototyping an easier and less time-consuming job. If you have the idea ready, you can make it alive by just "Sketch"-ing it.

For personal usage, the pricing starts from $99 for a single user per year with $89 for additional devices.





Step-by-step guide for Example



sample code block

sample code block
 



Recommended Next Steps



  • No labels