My website is for people interested in animation and digital art. It provide guides, reviews and how-to's designed to help out beginners. People who sign up can post their own animation, comics and reviews too!
I taught myself code 2 months & launched the website about a week and some change ago!
Recently I redesigned the whole thing after taking some suggestions (you can see what it used to look like in the "about us" section).
Let me know what you guys think!
https://www.prisimanimations.com
Love the idea and impressive for just starting! Congrats.
Some places to look at:
I see you have bootstrap installed, try using more of the classes they have set up already. (cards).
Styling: make use of the extra space, try using bootstraps rows/columns or using flex in css for mobile first responsive design. Use blank space effectively, sometimes you want it there, sometimes you don't.
Having the card background color be different from the page background color will make it pop more and look less "cheap" Try using a different background color for the page like an off-white or a lighter grey then using white for the background of the cards, (or switch and make the cards darker) make sure to style the text color appropriately.
The cards you set up on each of the pages should be consistent, for example look at your how-to cards vs all the other cards. One has rounded borders while the others don't. Also maybe give each of the cards some padding to keep the text away from the borders. You may have to make a card div then 2 divs within it to contain the image and text stuff separately, then style the picture using "cover" and 100% width to get the image to fit up to the cards edge and adding some padding to the text divs so they don't ride up to the border.
Add some margin around the content of the page so it has some room to breathe away from your nav
Have nested links in the nav instead of changing the nav completely when you go to the community section. While you're at it, you might as well want to just have a "software" nav link with nested links to art, animation and editing. That'll help you clear up the clutter on the nav.
Some extra tips:
Use lighthouse on chrome and inspect your page to see your lighthouse score and fix it as needed.
https://developers.google.com/web/tools/lighthouse/
Just an update, I fixed the nav bar like you said and it looks a lot better! I also change the background to a different color and I like it too. Thanks a lot for your suggestions!
Holy crap thanks for all the insight! I changed the color of the divs and fixed the rounded edges. I’ll fix the nav bar later when I get home. Thanks a lot!!!
Hey Avery !
I like the idea very much, but I think you should look at the design of this one.
For example, on the how-to page the how to word is under the nav.
Edit: Be careful with the contrast of the colors because is going to affect your SEO.
Thanks a lot for catching that one! I forgot to add the code for mobile, feedback like this really helps!
You welcome mate, are you using any framework? because I think your site would look amazing with Bulma.io
100% responsive without js based on flexbox
The Header/nav bar and home page uses framework. I'll consider changing it up in the future, thanks for the suggestion!
Ok thanks for the feedback, I'll try to fix that right now!
This comment was deleted 7 years ago