Hello,
I’ve ‘thrown’ my page together over the last couple of days. I’m sure there’s a lot of extra work that needs to be done. Should I consider re-designing to make it more aesthetically ‘colourful’?
Have a look and let me know.
Many thanks,
Chris
EDIT: I should probably add the link for it really shouldn’t I?
Hello Chris,
I like how you have started off your portfolio project. Here are a few things I would improve.
The first thing I would add is variation. Between all of your sections, the same gray background color is used. I would suggest creating a variation between gray, white and black sections.
For example, on my tribute page (link) I used a variation of plain colors to break up the page sections without the need for lines.
In this area of the page I go from white, to gray, to black, and back to white in order to break up the page. Despite having no horizontal lines, I was able to create distinct areas of the page. I also added box shadows to the images and decorative lines to make them pop.
The reason I use black, gray and white is because they are some of the few colors that can provide contrast without being too colorful. Going from pink, to green, to purple, even if you provide enough contrast, doesn’t look very good. Basic background colors should not be distracting.
The second part you need to work on is the text color. The white heading text is hard to read and does not have enough contrast to the background.
This is the first of a few steps if you follow along with my advice. Some other things I will go over in future comments if you want to continue are:
Hi, thanks for taking the time to look and reply.
I thought the same but wanted to get the base of it done. I’ll have a play with colour options etc shortly.
Can you show me where you’re having text overlap and having to scroll horizontal to read text? Or is that not what you meant?
I’m not finding this issue across a range of devices!
Cheers,
Chris
What I was referring to (My bad, didn’t provide enough detail) was how the content was spread out across the page. The user needs to read one long string of text from one side of the page to the other.
The text and content should be grouped together in the middle 50% of the page.
For example, in this image overlay test (link), I displayed all of the content in the center of the page
This later became the frame work for my tribute page I mentioned before. Note: I used text-align: justify; to make sure my text takes up the provided width.
Your text is spread out across the entire page width, requiring the user to read across the page. This is straining to the user when reading large amounts of text.
Bring these projects closer together to the center. The project test font size is too small. I would also group the project name in the same text container as your project description such as with the overlay I linked.
I would also increase the font size of the paragraph text itself describing the project and include more detail.
Put this text in a small width but more height paragraph element and put it next to a image of yourself or something you like (such as in the example I linked before).
I also would suggest removing the gray margin around the edge of the page. I would also add box-shadow: 2px 2px 5px black; to your navigation bar. Make the white sections/ gray full width of the page.
Thank you for taking the time for the in depth reply!
What resolution are you viewing the page in that screenshot? I (stupidly) never considered a larger display than I was using and only adapted for a smaller display!
I’ve amended the colouring of sections. As such I’d prefer the keep the outside border. (which is now only border for 2 sections)
I’ll have a play with shadowing too. First things first is to correct that text alignment. That’s awful!
Thanks again
One of the tricks I like to use is to hardcode using pixel widths.
For example, I will set the width of a image to 700 pixels. A text paragraph will be hard coded to 400 pixels.
Then I used a media to check when the screen is 700 pixels (or less), and set that image’s width to 100% so it scales down with the webpage size. Otherwise, it still stay at 700 pixels. Same thing goes with the 400 pixel paragraph.
You can then put that 400 pixel width paragraph next to a 700 pixel width in a row, center that row using flexbox, and now your content never gets wider then 1100 pixels.
Add * {border: 1px solid black} to your css to highlight the bounding box of every element. Good for debugging.
Thank you again for another in-depth reply!
All useful information and great tips.
I have had half an hour spare this morning and amended some lines accordingly.
Does it look any better on your huge display yet?
Many thanks for all of your help and wisdom!
I would suggest adding more content to fill up the about section (image next to text that can wrap to a column on smaller screens).
Add a gap between the project image and text (if using flexbox, use gap property).
Increase the size of the text in general, especially for the titles.
The white background with a white “projects” title does not have enough contrast. I would use black text instead of white. Use white text on a black (and/or dark) background.
I would suggest switching out the gray for black. Making text that contrasts well with a dark gray background is not easy. White does contrast, but it doesn’t look good. Black text contrasts, but it is hard to read. You are also using two different colors of grays for the page, which does not contrast well for the color scheme. Use black, white, and a light gray. Using white, gray and darker gray does not separate the page well.
For example, on my product page (link) I used a black background on white text and was able to create a good contrast:
If I did use gray, it was a very light gray:
From tribute page:
My gray colors background-color: rgb(223, 223, 230);
All the RGB values are high in this color, resulting in a color that is high in brightness. This allows for a gray color without becoming too dark to defeat the purpose of using black.
I only ever used black on my tribute page to create breaks in the page (the quotes).
It acts as a good division and stopping point for the user. It also helped me to divide up big white sections and big gray sections.
Most of the text should fall under white or light gray backgrounds. Too much reading of white text on a black background can strain the users eye after a while, so it should only be used for bold content. If you look at my product page, I used a black background to make the video more bold. This pulled all of the attention away from the other sections and focused it on the video, creating a better experience. It also provided a good transition to my products section.
As a result of this, try making your about sections either white or light gray, rather then a black background (if you do decide to follow my color recommendations). I would suggest creating a new black background section between a white/ gray about section and the white/ gray projects section. In this new section, include a quote, picture, or something else important that all attention should be on it. This can help break up the page.
Nav bar will have box-shadow: 2px 2px 5px black; Also make that logo smaller. Use only the “designs 63” part of the logo, as we already know your name from the opening part of the page. This will make your nav bar have less height and be less intrusive. Then make the nav bar text bigger and center it more.
Use text-align: justify to force text to take up a certain amount of space in a container.
For example on my tribute page (link) I wrapped the text in a div and gave it a set width such as in my diagram above (last reply).
I then gave it a justify alignment so it took up all of the space.
Find a better font. Use google fonts (https://fonts.google.com/) and search for a font style you like in order to best fit the theme.
I would suggest using space mono:
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
body {
padding: 0;
font-family: 'Space Mono', monospace;
margin: 0px;
}
It is a font that looks more futuristic/ computer science related over the text you would read in a virtual book.
Use developer tools to test your webpage on different sizes.
Your page looks good @Chris6316. Some things to revisit;
overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.