Finding the right tools and resources for your design projects can be challenging and sometimes overwhelming.
What websites are reliable?
Where can I download high-quality photos, fonts, & icons for free?
I need this app just for this one project, but I have to upgrade to the PRO version to use all of its benefits…and I can’t afford to pay for the PRO version right now.
I need to create prototypes and mockups, where can I do them?
I DON’T KNOW HOW OR WHERE TO START MY WORK.
I was lost, too. It wasn’t until my third year that I was able to determine which guides I’d keep going back to and which ones I wouldn’t need. Because of my financial situation, I also had to search for tools that were free or at least allowed me to complete my project before having to upgrade. For the most part, I was still able to submit good-quality work without having to pay extra for certain programs.
The tools & resources mentioned are based on the classes I took from my Web Design & New Media program; however, some of these may be beneficial to your specific program. I have personally used all of them and found them helpful throughout my design journey, some of which I still use today for my blog!
*There are multiple upgraded plans to some of the items listed, but because this is a guide for students, I will only be listing the plans that I find to be suitable for students. If there’s no price listed, the website or app is free to use.
To help decide what plan is right for you, always take note of whether or not you truly need the tool, how often you feel you’ll be needing it, and your financial situation. Every resource, except Adobe Creative Cloud, is accessible and can be used to some extent for free. Any advanced features will be accessible for upgraded plans.
Adobe Creative Cloud
Adobe Creative Cloud is probably the first and most important software that students should get. It will be the most heavily used software throughout your design journey, even after you graduate.
Check with your university if you can obtain ACC with your ongoing student account to avoid paying the individual plan.
Adobe Creative Cloud includes over 20 creative apps, but I’ll be listing only those I’ve actually used for my projects.
Adobe Acrobat DC
Allows users to view, create, edit, print, and manage files in PDF (Portable Document Format). Almost all of my assignment submissions and presentations are in PDF. I find them clean and professional, plus I can usually notice errors better when I’m viewing my work on here and make the necessary changes before submission.
Adobe Illustrator CC
A vector graphics software application used to create logos, icons, book illustrations, product packaging, and billboards. This is my ultimate favorite software I’ve used for almost all of my design work. Aside from designing my official logo and icons, AI came in handy when I did my rough digitals for web design, portfolio, and AE illustrations. It’s very simple and easy to use. AI also makes the creation and variation of typographic elements fun to play with. I still use it to this day for other design projects.
Adobe InDesign CC
A publishing and typesetting software application used to create posters, flyers, brochures, magazines, newspapers, presentations, books, and ebooks. I’ve used ID mostly for my graphic design and advertising classes. I’m also thinking about using it for other professional projects in the future. I find it very organized and useful when placing elements across multiple pages at a time.
Adobe Lightroom CC
An image organization and manipulation software that can be used to view, edit, organize, tag, share, and import large numbers of digital images. It’s no surprise that Lightroom had become my official photo editing software and app. It took time getting used to, and I’m actually still getting the hang of what everything does. One of my favorite features is being able to copy all of the settings from one picture, pasting it to another, and making additional changes without affecting the previous photo.
Adobe Premiere Pro CC
This timeline-based video editing software application is best for turning raw footage into polished storytelling for film, TV, and the web. Although this runs similarly to AE, I was able to understand and work with this better and quicker than AE. I love working with this software to allow my written stories to come to life. Still, having the proper equipment to film your story is a big must as there’s only so much fixing that software can do to your raw footage.
Adobe Photoshop CC
A raster graphics editor that can be used for photo editing, compositing, digital painting, and graphic design. PS is the only other software that I can’t seem to do well in. I spent about six hours on my first Photoshop project, which got me a C. I admire those who mastered Photoshop because I’m completely not cut out for it. This is the first software where I’d use it only if it’s needed for a class project.
Adobe After Effects CC
Focuses on digital visual effects, motion graphics, and compositing application, and is used for the post-production of film, video games, and television. I’ll be honest – I’m terrible at using AE and barely passed my Motion Graphics classes. Don’t get me wrong, a lot of students find it easy to use and create interesting animations with AE. I love seeing 2D animation come to life and understanding how a lot of the animation films were essentially created. But everyone has their weak skills, right? This is mine, and it is the second software that I’ve used only when taking the classes that require them.
Inspiration
We’ve all been through some creative drought. Or sometimes we just don’t know where or how to begin. The websites below have helped me when I’ve been stuck. I’d look at multiple designs, liking, and selecting certain elements of various designs to morph into my own visions and style of work.
Remember to use these websites only as sources for inspiration and to never copy one full design and claim it as yours. You are your own unique individual, so you can definitely create your own unique designs.
Other than the websites above, I’ve learned to use my frequently visited social media accounts to keep me inspired as well. I began following accounts that aligned with what I’m interested in and what classes I took. Below are some of my favorite Instagram accounts that are related to typography, motion graphics, UX/UI, branding, and web design.
Branding Design Inspiration (@branding.mob)
Motion Graphics Collective (@motiongraphics_collective)
Typetopia (@typetopia)
Daily UX/UI Inspiration (@ux_trends)
Web Design Inspiration (@welovewebdesign)
Brainstorming
I used to dislike brainstorming mainly because I procrastinated enough to never really go through this first phase of a project. I felt that I worked better if I began my digital roughs right away and skip any sketching or deep research.
I was wrong.
Brainstorming has allowed me to quickly jot down ideas while they’re still fresh in my mind. I love using a medium-sized notebook/journal for quick and easy writing and sketching.
I avoid digitally designing my projects automatically, and now prefer researching and journaling ideas, notes, and sketches as the initial phase of my creative process (which is technically already the general initial phase of any project).
Physical Materials
Sketchbook
Digital Software
Google Docs
Microsoft Word
Collaboration & Task Management
You’re going to have at least two group projects during university. There’s no running away from that. You may or may not know (or like) the people you’ll be working with, and that’s completely understandable. But, personal feelings aside, you’ll need to collaborate to create projects that will impress your instructor, peers, and yourselves. Remember that it’ll be your project too. Your name will be on it, and you’ll be incorporating your skills and knowledge into the project.
First step to collaborating with your peers is to find a communication platform where you’ll be communicating throughout the project duration. Using the platform, you can send messages, upload/download files, keep your work organized, and revisit them (even years later, as long as they’re not deleted).
I first heard of Slack at my Web Design 3 class when we were advised to sign up for it because our instructor would give additional tips on there, and it’s where we’d submit our assignments. After that, almost every other class I took advised students to use Slack. What I love most about Slack was easily communicating with my instructors outside of class. I lose any worry about having to send all that I need to say in one go because I can just chat with them.
I’ve also used Slack for group projects. Most of the time, I’d get nervous about asking for my peers’ phone numbers to communicate. Slack reduces the hassle of having to ask and name them “First Name + Class Name” on my phone. Through Slack, we were able to share our parts of the project and communicate as a group or one-on-one.
I’ve only used Zoom a couple of times when I was in school, but I do find some of its features interesting. One feature I love is screen sharing. I am a visual learner, so with screen sharing, I can understand my instructor’s lectures better without physically being in class. I talk more about Zoom classes in my Online Learning post.
15GB of Google Drive is automatically available once you’ve signed up for a Gmail account. I’ve been using Google Drive since high school, and it has been one of the best platforms for not just collaboration, but for storing backup files as well. I upgraded to the 100GB plan during my second year at AAU, and it stored all of my projects for all four years.
Other than storing files, I’ve had classes where I had to upload my assignments through Google Drive, and I’m also able to access additional worksheets and sample layouts for our work.
When you access Google Drive, you also gain access to Google Calendar, Keep Notes, and Google Tasks, three other platforms that are simply amazing – and free!
Google Calendar is great for keeping track of special events (i.e. birthdays), project due dates, exams, bill due dates, blog post upload dates, etc. I can customize these events into different colored tabs, so I know the type of event coming up.
Keep Notes is handy for really anything random. I store there my grocery lists, cooking recipes, short-term goals, quotes I randomly hear/see, blog prompt ideas, etc. I’ll be transferring a lot of these to my BuJo journal by 2021, but for now, I love that I can keep these types of notes around.
Google Tasks is the tough one, only because it keeps me on my toes every day. Yes, I use Google Tasks as my daily task reminder and schedule. I have things scheduled from the time I (try to) wake up at 4:00 AM until the time I (try to) go to bed at 8:00 PM. For the most part, I follow it pretty well.
Color
As fun as it was coloring in my coloring books when I was a kid, I struggled a lot with colors when it came to design. If it weren’t about type, it was color that would get the most feedback, mainly about having to play around with them more. Although I’d like to tell myself that I’ve improved with my color choices, I know I still have a lot to work on, especially if I really want to be bold and exceptional. When choosing a color palette, you almost never have those initial colors to be your final colors. I usually end up changing color hues or saturation to better fit my style and/or project.
The websites below helped me with picking out colors or color palettes, and they also typically provide their HEX, RGB, and CMYK numbers.
Icons, Vectors & Graphics
Ah, now this is where we have to pay attention to what’s free and what’s not because most of the time, icons, vectors, and graphics are provided by individuals who could offer to provide their work for free or get paid. Access and signing up to these websites are free in general, but you’d have to pay for some of the artwork shown.
I’d use icons for almost all of my projects, especially for UX. When choosing icons, I typically look for ones with a family or set to keep things balanced. For the most part, I either try to create my own graphics or not include them at all.
Icon Finder is a search engine for over 2 million vector icons in SVG, PNG, CSH, and AI format. Similar to other websites that provide free legal downloads, free account versions are limited to the number of icons offered, as well as the number of downloads allowed. Whereas if you upgrade to pro versions, you’ll have access to more icons and have higher amounts of downloads per month, as shown below.
The Noun Project is a website with millions of free icons or unlimited royalty-free icons with a pro account, uploaded by graphic designers all over the world.
Mockups
I did my best to take my own photos for the mockups, but sometimes I find it much easier to look for free ones online. I’ve had to use mockups a couple of times, and I’m still learning how to improve my mockup skills, no matter how easy they may seem for others.
Similar with icons, pay attention to mockups that are offered for free and those that you have to pay for. Most mockups are available in AI and PS.
Stock Images
According to Webopedia, stock images are “professional photos of common places, landmark, nature, events or people that are bought and sold on a royalty-free basis and can be used and reused for commercial design purposes.”
I’ve used photos for mood/style boards, personas, placeholders, brand guides, and inspiration. The majority of these photos were taken by me, and it is something I highly recommend others to do when needing a photo for their design work. You have full ownership of your photos, meaning you can use them wherever, whenever, and however you wish. Do be cautious of taking photos of strangers, as it’ll be a different story when it comes to using their faces without their permission.
If situations prevent you from taking your own photos, visit websites that offer stock images. They’ll often say if their photos are licensed and free to download. AVOID DOWNLOADING PHOTOS FROM GOOGLE SEARCH IMAGES, especially if you plan on using them for your design work. Most are often subject to copyright.
Unsplash offers thousands of free professional photos contributed by over 100,000 photographers and is under the Unsplash license.
Typography
Typography is interesting, to say the least. It is my biggest weakness when it comes to design and something I often decide on last as I always struggle on choosing the appropriate type for my projects. Others are able to create beautiful type and I admire them for that. I’ve taken a typography class and as much as I enjoyed the process of creating my own typeface, it was definitely challenging. When I’m able to, I’m going to do my best and improve the typeface I started out with and make it an official typeface.
When it comes to type, I used to always go for the scripts and handwritten types. In fact, I still do, but now only on special occasions. I began focusing more on Serif and Sans Serif typefaces, with Roboto being my favorite one. I’ve learned so much about typography and if it weren’t for the classes and the incredible instructors who love type, I probably would have still been careless about the kinds of fonts I use for my work.
Learn About Type
Type Terms is an amazing website for basic typographic terminologies, such as Serif, Ascender, Ear, and much more. The website itself is clean, simple, and includes helpful animations.
**Moments with Typography Unfortunately, this site is currently unavailable. I’m not sure when it will be back up, or if it will be up again.
Moments with Typography is a comprehensive website to learn just about everything about typography. It covers the different typefaces, the appropriate font size for different screens and responsiveness, kerning and tracking, best font pairs, best practices, and more. The website provides tons of visual examples and helpful tips to guide you along your typographic journey.
Kerning and tracking are two type terms I often mix up. According to Moments with Typography, kerning is the “art of setting visual space in between letters to create visual harmony,” while tracking “sets the space in between letters at an exact equal distance from one of another.” Kern Type is a fun game to learn about kerning.
Free Download
There are dozens of websites that offer free downloadable fonts, but really I used only one:
Google Fonts is a huge online library of over 900 free licensed font families. What I love about Google Fonts is that they include embedded codes to quickly copy and paste into my HTML and CSS. I love the wide range of selection, along with the 5+ styles that most fonts include.
Browser Extensions
Browser Extensions provide customization for a web browser. I’ve been using Google Chrome for years, and I haven’t installed any extensions except for WhatFont, which was suggested by an instructor.
WhatFont is a free Chrome extension that inspects web fonts by activating the extension (you can exit it at any time) and hovering over the desired font. Hovering shows only the font name, but when you click on the font, you can expand its information, such as the style, weight, size, line height, and color.
Placeholder Text
When creating digital drafts or wireframes, you’ll need placeholder texts that showcase the visual form of a document or typeface without needing meaningful content. The text is widely known as Lorem Ipsum. Below are two websites I often visit for my placeholder text.
Hipsum is the ‘hipster’ version of lorem ipsum. Most of their sentences make absolutely no sense, but they will make you chuckle more than regular dummy text.
Lipsum is another site that provides placeholder text. The UI is interesting and relatively fun to play with.
User Experience / Interface
I admit, my UX/UI skills started out rough, and I practically didn’t know what I was doing. It wasn’t until my last UX class that I began to fully love and appreciate this industry. I have my UX instructor to thank for this. There are only two instructors who I greatly admire and owe a great deal of gratitude towards throughout my design journey, and my UX instructor is one of them. He not only made the learning environment professional and challenging but fun and creative as well. A couple of the tools and resources listed below were suggested by him, and I’ve even included sources that were created by him. For now, the three tools below are what helped me a lot with my UX/UI classes.
I’ve always used AI for designing my UX projects. It wasn’t until my last UX class where I was introduced to Figma. I was stubborn about using it at first because I didn’t want to change my routine, but as time passed, it made my life much easier. Creating multiple screens of similar designs was quicker to accomplish and I didn’t have to worry much about elements being out of place. I love that I get to have my prototypes done in the same window as well. Its interface is also very clean to look at.
Miro is an online collaborative whiteboard platform. Although there are multiple uses for Miro, I specifically used it as a digital sticky note-taker for user interviews, testing, and clustering for my UX class project. It’s very easy to navigate and I personally enjoyed looking at all the colorful sticky notes when I completed inputting all the information.
InVision is a digital product design platform used to create the best user experiences. InVision was the first app I went to for all my prototyping needs. I found it simple and easy to use. The only downside, in my opinion, was having to export my AI files into separate boards and uploading them on here. Still, I enjoy using it.
Web Development
I have a love-hate relationship with coding. I’m not going to lie and say that coding classes were ones that I was not looking forward to when I signed up at AAU. Yes, I know it’s a design school and coding will be learned more in-depth in other tech schools, but I was still ecstatic that I get to code and design my own website.
Through my Web Design classes, I was able to learn HTML5, CSS, SASS, and WordPress + PHP, as well as build websites from scratch. I also have basic knowledge of Susy Grid, Bootstrap, jQuery, and JavaScript. I am nowhere close to being an expert at coding, but I can at least read, understand, and code the basics. Below are the main tools that helped me with web development.
Text Editors
Atom is an open-source text and source code editor that supports HTML, CSS, JavaScript, and Node.js. I began using Atom because I loved looking at the colors when I saw my friend coding from it. After a while of using it, I found that the UX/UI design actually made coding more enjoyable. My favorite part about using Atom is their Pane Split feature, where I can see both of my HTML and CSS at the same time, making coding much quicker and easier.
Sublime Text is a source code editor that supports many programming and markup languages. This was the first text editor I’ve ever used and switched out of it when I began using Atom. Because it’s been so long since I’ve used it, I can’t exactly remember my favorite features, but I do remember how easy it was to use.
Tutorials
CSS Tricks provides daily articles about anything related to web design and development. I’ve used it numerous times when I needed explanations for CSS, HTML, JS, and grid guides. It’s simple to use and navigate, and they provide tons of coding examples.
W3Schools is an educational website for web development. It is my OG tutorial website as I’ve learned most of what I know now about coding through this website. I love that they have a “Try It Yourself” feature that allows users to view and edit code to test out how the code will look on the user’s preferences.
Online Learning Community
CodePen is a free online code editor where users can create code snippets (or “pens”), test them, and allow others to view and learn from them. CodePen has helped me a lot throughout the years, from seeing how others code to testing and operating my own codes without messing with the main text editor.
GitHub is another free development software where users can host and review codes and manage projects. I personally don’t use GitHub much because I never really immersed myself in it, but similar to CodePen I love that I can learn various types of coding from others and receive additional help whenever I’d get stuck on something.
Extra
What CSS to Prefix is a website that showcases the prefixes needed for newer CSS versions. I’ve had to go to this website multiple times to double-check if certain CSS still needs to be prefixed or not, and it’s been super helpful.
Many of these design tools have greatly helped me throughout the years and I feel deserve to be recognized, even if I no longer use some of them.
Remember to always follow your instincts, style, and designer’s eye in choosing what resources to use. Also, pay attention to your financial situation. If you see your classmates having flashy projects because they purchased items that helped them, don’t feel pressured about purchasing anything that you’re able to work your way around. Sometimes the best designs are created from the simplest elements.
Let's chat!
What are some of your favorite and least favorite design tools, and why?
