Hi Loa! You said you started off with HTML/CSS/JavaScript, and you post a lot about your website projects. So I wanted to ask if you have any advice for the process of designing a website and making various graphics. I enjoy coding a whole lot, but I've avoided front-end stuff until now because looking into design and tools for it made me feel a little overwhelmed. What would you do if you were to start learning anew web design for your coding job and hobby projects? Thank you a lot :)
Hiya! 💗
I'd be happy to share some advice on designing a website and creating graphics. It's great that you enjoy coding and want to explore front-end development and design, and don't worry, though I love frontend stuff a lot, I still find some things overwhelming e.g. I'm currently learning Django which I have put off from learning because it looked "hard" but now I love learning it. Just give yourself a little push and you'll enjoy it! 😉🙌🏾
Web Design Inspiration
Two key places I get inspiration for my website designs are Pinterest and Behance!
For instance, when I was, and still am, researching Old Web GUI designs, I made a Pinterest board of images relating to what I wanted to design and I used that as a reference when building the design in HTML and CSS. So, I would look at the picture and think "Okay in terms of HTML elements and CSS styling, how can I replicate this? 😉👍🏾". You can check out these boards: board 1 | board 2
Pinterest is the main inspiration place, and Behance is for more in-depth web design components. What I mean is if I need inspiration for a navbar design or a certain card design, I would use Behance.
Now I don't particularly do this, which is bad, but I do recommend making a wireframe for your web designs. I talked about wireframes in a previous post, but to sum it up; wireframes are good because they allow you to stick to your design plans and not go off on a tangent. These are especially good when working in a team at work, for example.
The reason why I don't particularly do them as often as I should is because I see things in my head vividly enough that I won't forget where everything should be - no super power but that's the main reason I don't make wireframes. As well, I change ideas halfway through so there's no real need for me to keep making wireframes if I will change the design 2 minutes later! 😭💔
But that's just me, but you should totally start designing wireframes. Practising drawing up some wireframes will definitely help with being creative in your designs. Take everything around you as an inspiration. The way I think of it is to think like an artist who is capable of painting anything - all you have to do is look around and paint. You can do the same with web development - everything is an inspiration. I saw a person make a whole webpage with amazing graphics... just about water. You can do the same.
If you need help on that part, definitely look into graphic design. I took extra classes in Graphics (which was just graphic design) when in school which involved looking at graphic artists and studying their work, then replicating something with our own twist. You can do the same with web design - study websites online, some you like or random ones. Look at a piece of the website and try and replicate it. That's why I like projects which are like "make a Google clone" or "make a Netflix clone" because it gives you the chance to study other people's codes and you can keep that knowledge for any future projects!
And lastly, study web design principles. There are some principles that good websites all put into their design that make the user's experience good. Read this article about it and this should even give hints to how you could design your next website! Learn about fundamental design principles such as colour theory, typography, layout, and composition. Understanding these principles will help you create aesthetically pleasing and user-friendly designs.
Web Design Tools I Use
Now, what do I use every time I start a new "project", what online tools do I use? I literally have these on my browser's bookmarks, ready to go!
Pinterest (inspiration) - LINK
Behance (inspiration) - LINK
Coolors (colour palette generator) - LINK
CSS Gradient Generator (because I'm lazy) - LINK
Google Fonts (main source for fonts) - LINK
Font Palace (fonts I want but not on Google Fonts) - LINK
Font Awesome (for the little icons) - LINK
Image Colour Picker (if I have an image and I want to pick the colour from it) - LINK
Optional tools:
Bootstrap 4/5 (sometimes I use this for personal projects, definitely use it at work) - LINK
Pattern.css (creates a patterned background for you, again I'm lazy) - LINK
Storyset on Freepik (people graphic images) - LINK
Pexels (stock background and even fake product images) - LINK
Unsplash (same as Pexel) - LINK
LottieFiles (set animations) - LINK
TinyPNG (makes image sizes smaller so less space) - LINK
CSSmatic (4 cool CSS generators) - LINK
That's all I have to say, if I didn't help with your question, message me to help you further but I do hope this helps you!! Good luck! 🥰🙌🏾💗
116 notes
·
View notes
Useful links for (graphic) design
'sup folks, I've compiled a list of links of websites and tools that are useful for designing stuff! They're divided in different sections.
FONTS - All of them are free and easy to use, unless otherwise stated.
https://www.freefaces.gallery/
https://www.fontshare.com/
https://dirtylinestudio.com/freebies/ (These are the free versions only for personal use, so no selling stuff with it)
https://velvetyne.fr/
https://usemodify.com/ (Make sure to check the license to see if it's free to use)
COLORS - Helps you pick colors in different ways
https://colourcontrast.cc/ (Helps you see if your font and colors provide enough contrast)
https://picular.co/ (Type a prompt and it will give you colors associated with that prompt)
https://pigment.shapefactory.co/ (Gives you a wide selection of dual color palette's that have a lot of contrast)
https://t-o-n-e.com/ (Gives you color palette's that have the 60-30-10 applied to it)
LOGO INSPIRATION- Searching for logo inspiration
https://logosystem.co/ (Gives you a big variety of logo's)
https://dribbble.com/search/logo (Dribbble also shows other stuff than logo's)
GENERAL USEFUL LINKS - As the name says
https://freedesignresources.net/ (Here you can find a lor of free stuff like vectors, images, font's etc.)
I'm going to update as I learn and use more of them later down the line on this website that I made: https://design-links.carrd.co/ .
8 notes
·
View notes
Color Converter
At Convert a Color, we understand the importance of getting the exact color you need for your projects. Whether you're a graphic designer, web developer, or just someone who loves to work with colors, our online Color Converter tool is designed to make your life easier. We provide precise and easy-to-use solutions for all your color conversion needs.
https://hexcolor.co/color-converter
9 notes
·
View notes
Hi <3
Innaflash development will probably start after Nov 30th, so soon! That's when my current project for school will end.
First orders of business will be the core functions obv like saving and loading the flashcards. Also making optimizations to my graphics library since it was rushed. I'm so excited :3
Also friend and I need to make sure we know how to use git/github properly. Somebody completely broke our github for our current project 👀
We've never like. Made a project that we intended to be seen by the public before and it's just the two of us so I can't guarantee quality or speedy development. But I can promise that my GUI's absolutely FUCK
13 notes
·
View notes