UI/UX Design
Introduction
Design isn’t something lots of people think of first when creating a website, but it is a crucial aspect. A good designed website generates more traffic and clicks, and a well designed app generates more downloads and usage. Design is the finishing touch that can help boost what you’ve created with your code. If you want a successful app/website/product, good design is essential.
Illustrator
Illustrator is a great tool for designing assets for websites. It is a vector graphics editor, which means that graphics created in Illustrator can be resized without losing any quality. Images can be blown up full-screen (or even to the size of a billboard), and would not lose image quality. The pen tool is your friend. With this, you can create organic shapes for your graphics. You also have the ability to recolor your artwork or add an outline. When you’re done creating your images/texts/assets, export them as PNGs (File > Export > Export for Screens…). Make sure that you have transparency on (if you want your images to have a clear background on your page). From there, you can easily place them in your code to help spice out your app/website. Design tip: blocks of color in the background, or behind text, help for a less static look!
Adobe Illustrator Basics (Pt. 1 of ‘Teach Me to Design’ Series) Pen Tool Guide
Adobe
Adobe programs usually cost money to download, but they are well worth it. Many professional businesses use Adobe to design assets. Some of the most popular programs are Photoshop, Lightroom, Illustrator, and Adobe XD. Photoshop and Lightroom are both photo editors. You can use these programs to help photos match a more cohesive color scheme that fits your app/website design. They are also easy tools to help resize your image. Illustrator (as stated in the section above) is a vector graphic program. This is great for creating illustrations, artwork, or even color blocks to place in the background of your app/website. Adobe XD is a great program for wireframing and website/app mockups. It’s quite easy to learn and use. This is a perfect tool, especially if you want to conceptualize how your website/app will look, before making any serious changes.
Adobe Creative Cloud offers many tutorials on Youtube, specific to the programs you use.
Lots of times, students can get a discounted subscription to Adobe Creative Cloud (offers all the Adobe Suite products). If Adobe is too costly, you can check out these alternatives: Illustrator, Lightroom, Photoshop alternatives Adobe XD alternatives (common ones used are Webflow, Figma, and Sketch)
Webflow
Webflow is a great program for building website design - and it’s free! It’s a quick and easy way to build websites, even for beginners. Webflow even has the ability to translate your built designs into coded HTML5, CSS3, and JavaScript. They even have a fast hosting network that can benefit designs for businesses.
Creating Assets
Assets include Mockups, Fonts, Images, and more. These are the things you put into your code that help spice up the visuals of your app/website. Here are some important things to consider:
Fonts
Fonts are essential. You might not think about it when you are actually viewing the text, but it influences how you feel about the website/app - trust, playfulness, seriousness, etc. Sans serif fonts are clean and tent to be modern, fresh, and playful. Serif fonts are more traditional and give off more serious vibes. Decorative/handwritten fonts are great for titles and subheadings. Of course, all of this depends on what you are designing for.
Images
Images help give your app/website a more dynamic feel, and are great for showing website visitors/app users a snapshot of what they are getting themselves into. These images should show what you are presenting and how it can positively impact their lives. A great way of making images cohesive in your website is picking/editing them to match the color tones of the logo/design.