Key Points

References

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

Recommended Next Steps

Related articles