Streaming live at 10am (PST)

New Columned Website


#1

Hi guys!

I am a high schooler and I have a neat Chemistry Class. We were assigned a safety tool in the lab. Our team got Eye Wash. Everyone else was either making a poster or video, so I asked if I could make a website instead. She said yes, but "make sure that it is entertaining."

If there are any recommendations that you have, let me know!

http://chemistrysafety.webflow.io


#2

AWESOME SITE love the unique layout!


#3

@Arthur Thanks, I appreciate the feedback!

Any suggestions? smile


#4

Hey @MinewireNetwork great work! The only thing i can suggest is perhaps a different font weight (heavier font weight) for the Titles to help bring out a little more. Also I'm not sure if "Lato" and "Comfortaa" make a good combination... Lato as long form body text usually works quite well. Why not use Lato for Headings and Body copy?

Just my two cents, love the animations!


#5

Thanks @tim

So you mean Lato for the body and Comfortaa for the heading?


#6

I would personally recommend Lato for both but a bolder font weight for the headings. Experiment maybe Comfortaa works well as the heading. Visually i just didnt think the combination worked very well. The design may actually benefit from a single typeface.


#7

@tim Alright, I'll try some stuff out. By the way, when I visited your portfolio site, it stayed on the loading animation and never showed any content even when the page was finished loading. I used to fonts to make text stand out against other parts of text, though. I tried to reverse the effects of text (large header text with thinner weight, smaller paragraph text with larger weight.)

This is the text with your recommendations. Compare the screenshot to the actual site.


#8

wink I'm working on a new portfolio, that screen is not loading anything it's just a holding screen before i launch my new portfolio. smiley Sorry if it kept you waiting for it to load!

And very nice! like the new version!


#9

Oh ok @tim.

It's not like I was staring at for 5 minutes, but maybe you should make it a bit more apparent that it is coming soon. Like for instance, writing COMING SOON on the page smile


#10

like the gifs. Where did you grab those from?


#11

@jdesign I am not sure where I found them, they were stored on my computer from an earlier time. Here are the links. Some of the images may look different because they were either enlarged or multiplied. They are in the order of the sections


#12

I cant stop looking at the last one! smiley amazing


#13

Here's another you can't stop watching smile


#14

This is excellent work, I love how you've implemented the video backgrounds! Also the floating 'eye wash' circle to return to the home page is excellent as it follows you through the experience and guides you home.
Double thumbsup thumbsup for a job well done! smile


#15

It's an explosion in an explosion in an explosion in an explosion.... to infinity LOL!


#16

@jorn THAT'S going in my Gif folder right now.

That one caught my eye as well @tim. smile You never replied to my reply about the font change, though.

Thanks @Godweeno! I wanted to create navigation that was unobtrusive but was also obvious and natural. You can't get any better than a button that always stays on the screen.

Along with gifs and videos in the backgrounds, cinemagraphs will catch your eye because one part of the picture is moving while the other parts are not. If you would like to make a site like this but maybe your client doesn't want it too flashy, cinemagraphs are the way to go. wink

In case anyone wanted to know, I used a design technique (not sure of the name) that is used when working with low quality images.

I downloaded an image of a black dot and set it to a width of 3 or 4 (depending on how it looked). It masks the image making it have a cool effect. This is very useful when you want a speed optimized site that also looks good.


#17

One last note that I'd like to make. I didn't make this for my cousin, I made it for me. I am a high schooler and I am presenting this for my class. I guess I wanted to feel like an adult in a forum with a majority of adults. Next time, I'll be honest.


#18

Never feel like you have to be someone else. I love it when I meet people I didn't expect to meet. Like you said majority here are adults and now a high schooler making a killer website smiley

Great work!


#19

Christ alive you're in high school and you can do that?! Bloody hell I barely knew what a website was when I was in secondary (high) school, never mind how to build one! Congrats, it looks incredible.

My only point would be that I find (totally just personal preference, this) the hover state on the landing buttons a bit invasive as they shrink down quite a lot. Maybe just the line that you have around them when you hover is enough? Or a brightly coloured line maybe? Alternatively you could do some colour blocking like these guys http://www.impossible-bureau.com/, it's very bold but I (personally) just find it a bit slicker than shrinking buttons etc.

Oh and love the gifs. Sick work!

Ta,
Jamie


#20

I love the the site @MinewireNetwork smile Well done smile You should get A+ with bonus points for creativity smile