Hello there,
I made the following Random Quote Machine for the Front End Development Libraries Certification, and I would like your feedback:
It uses Bootstrap and Font Awesome as libraries.
It may look a lot like the example page, but that’s just because I’m not very creative, it was made from the ground up.
I appreciate the feedback!
Would you like some Aesthetic feedback, and some Possible creative suggestions?
I would love that! Thanks
Sorry, this took me a while to composite:
Okay. I just want to give you some easy tips on how to make almost any site better, quickly and easily, even if you are not very comfortable with design. You can use pictures that fit the theme of the Project, or for something like this, Just chose a photo theme that you love.
FIRST:
LARGE, BEAUTIFUL, HIGH RESOLUTION IMAGES CAN IMPROVE MOST PAGES:
If you have a lot of open space on your website, it can be a good idea to fill it with a “hero” image.
THESE KINDS OF HIGH RESOLUTION PHOTOS, CAN BE FOUND FOR FREE USE, ON PLACES LIKE:
PIXABAY https://pixabay.com/
UNSPLASHhttps://unsplash.com/
PEXELS https://www.pexels.com/
CREATIVECOMMONShttps://wordpress.org/openverse/search/image?q=mountains
WIKIMEDIAhttps://commons.wikimedia.org/w/index.php?
search=mountains&title=Special:MediaSearch&go=Go&type=image
SECOND:
GOOD FONT: Good Font can help make a page look more Professional, Elegant, Interesting, Cohesive and usable. In the case of your project, you could play with the size and type of font.
And remember, because in this case the Quote font is the centerpiece of the site, choosing a large, good font, would be a Good Idea…
GOOD FONT:
These days, good font is easy to find, because places like Google fonts make it easy to use, and free.
Here is a VIDEO walk through, on how to use google Fonts if you are not used to using them :
THIRD:
CENTERING:
For a beginner of design, sometimes it’s easiest and most graceful, to use Center alignment of the largest fonts, and main Items on a site.
As a general rule most things look better when centered, though there are definitely some exceptions.
Thank you so much for taking the time to write this! Very useful information!
If, in the future, you feel like you would like to Expand your capacities in design, Let me know, and I would be happy to walk you through the preliminaries that make it easy for someone with little or no interest in Design, to create more visually appealing Stuff.
Be careful about large, hi res images. Unless and until you optimize them, they can really slow down your sites initial rendering.
Images are going to preload, so they will block that first DOM render if they’re really that large and hi res.
I agree that finding great images is key, but then determine your optimal screen size, resolution and compression. Turning a 129MB image into a 620KB png can really speed things up. 
Yes, this is right. Let me Clarify:
HIGH RES LOOKING IMAGES:
Meaning that the original output is in high resolution. That the photo clarity and original px ratio is around 4500 x 3000 pixels.
When we begin with low resolution, the output can be poor, especially at greater widths.
A good size output for a full-screen hero image is from about 1,200 px wide with a 16:9 aspect ratio to 1,800 px. But, we usually start with much higher resolution photos to begin with when we are creating our design.
Thank you for catching that, I’ll make sure to delineate the exact meaning of High resolution Looking Images in the future, and let them know the process for making it “Workable”.
I’ve already given that advice a few times, without thinking about the fact that High Res may be taken at face value.
Maybe I should go back, and make some addendums on those posts.
I think you’re fine, and for most purposes designers will learn about optimization as they go along. There are a lot of them.
If we load seven different Google fonts, each one is a separate load and each will delay initial render, depending on how we load them.
If we load a splash screen image for each tab within an app, and they’re all full res? Massive slowdown.
If we load 60 small images, each 3Kb or less? Still a massive bottleneck because browsers can only open so many connections as a time.
Again, there are some great resources out there that talk about preoptimizing for the web, but I’d leave those as an independent study “research project.”
But that might just be me.
Yeah, it just takes one or two times watching a “slow loading” page, ( especially these days, in the old days, everything was slow load ) For someone to start thinking, “How can I fix that”…
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
