See our nonprofit COVID-19 resources
We're updating our site to improve your experience. We apologize for any issues that may occur.
As a software engineer, the topic of designing can often be a bit of reach when you are used to dealing with the back-end of an application. This same situation is more than often felt by those who are also new to the program and are getting into the design aspect of an application. As a software engineer, there are many tools out there that make it possible to create UI/UX designs that attract the user without having to have years and years of experience. One of my favorites is Bootstrap4, a framework that has built-in elements ranging from forms to buttons to even the way a page adapts when the screen width is changed. Learning this tool has saved me hundreds of hours that would have been spend trying to recreate these same tools. It is a must learn for anyone that is getting into front-end development or just wants to create an application that will be appealing to any user.
I had worked on Ext JS earlier which comes with a wide range of widgets and themes to pick from. the framework is very intuitive as it follows MVC architecture. However, recently I came across Grafana and Kibana which are two washboarding tools. I was able to integrate the UI with a number of database sources (elastic search, mongoldb) as well as json data sources, and create stunning visualizations especially for statistical summaries like graphs, time series charts, bar charts and pie charts. The set up took almost no coding except the queries to fetch data from the data source. They also come with export options whereby panels and entire dashboards can be shared or re-used in different instances.
Thanks for sharing your experience.
Can Bootstrap4 be used to create an appealing website for a nonprofit organization? And since we are a nonprofit community, are there any examples of nonprofits that are using this tool?
TechSoup Community ModeratorDigital Marketing ConsultantYTConsulting.com@yanntol
And can this build fully accessible web sites that meet standards for accessibility for people with disabilities?
-=-=-=-=-=- Jayne Cravens Author, The LAST Virtual Volunteering Guidebook
For UI/UX design specifically, a free piece of software that is great for online collaboration as well is Figma. It's kind of like a combination of Adobe Photoshop and Adobe Illustrator in that you can place and interact with shapes, add images, etc. to create a website, and it's an industry standard for UI/UX design. If you want to design a website that also functions, Wix, Squarespace, and Wordpress are good tools (although note that Wix and Squarespace cost money).
Bootstrap 4 can easily be used to create an appealing website for your nonprofit organization. Here is a website that references many appealing websites made with bootstrap and there are a couple of websites for nonprofits listed on this page as well:https://www.awwwards.com/websites/bootstrap/. Traversy Media on youtube.com has some great resources on how to use bootstrap for a beginner: https://www.youtube.com/watch?v=5GcQtLDGXy8. Hope this helps!
Yeah. Figma is great at collaboration. Unlike Sketch, it's accessible despite the platform you use as it's browser-based. But on the other hand, Sketch possesses the largest plugin selection than any other design tool. And there is a better chance to build a more powerful UI with that amount of useful plugins. In Figma, you do not need to upload your files because they are saved automatically on the cloud. Therefore there is a possibility to share your files with anyone at any time within the Figma tool. In Sketch, you also can share your design file with anyone, but first, you have to upload your files into Sketch’s cloud server, as there is no function of automatic uploading. So, the list may go one. There is a useful insight into both https://ester.co/blog/figma-vs-sketch.
But, what concerns the handoff process. Figma created an API that makes it easier for a developer to reach into a Figma repository and specify a design to use in a third-party app or service. It gives developers direct access to its files. Also, Figma tests some demos, and one of them is set to be capable of converting Figma designs into the working code with the help of React. There are third-party services that can do this, for instance, with Sketch files, but the advantageous thing about Figma is that you will only need a URL and the code will do the rest. Of course, that doesn't guarantee a seamless handoff, but I think it might be interesting.
A note regarding Figma.
I work a lot with with Adobe XD files. Adobe XD is a UI/UX design tool. Unfortunately, XD files don't play nice when you import them to Figma. Many elements don't get converted in the process. This is really unfortunate. I'm hoping Figma will bring us the ability to easily import and convert XD files. The only real way to do this now is by using a third-party paid conversion tool, which costs about $50 per XD file converted to Figma. Pretty pricey if you have lots of files to convert.
Close this window