Hey awesome Webflow community! I’m neither a designer or coder by trade, but love both and have made them my mission! Here’s a site I’m working on for a local aquaculture facility. They wanted to reach both a business crowd and engage locals with what they are doing. Would love some feedback and pointers on how to improve the look/feel!
I did 90% of the photography, etc. too, and am still not able to crunch my images down as much as I’d like (been using RIOT - any other suggestions)?
Nice, I really like the fishes bg video, I actually watched it! (you could make it fade-loop if you have the possibility to edit it)
You like big text (I do too!) so you need big margins and paddings. I took the liberty to edit one section to demonstrate. I thought it needed to breeze a bit more (:
Last thing: Open Sans is a great font but its Bold version is very aggressive, loses the classiness of the font. Try the Semi-bold weight for your subtitles instead. And as you’re bulleting your list, you can try not giving any weight to your subtitle but the bullets color.
Edit : the video is kind of mesmerizing, to give it more power I tried to decrease the opacity of the mask and to let the text stand out I added a letterpress shadow.
Edit2: just a thing about H1s. Semantic HTML is something quite important. It’s a set of rules to respect to make the code accessible, readable without any device. For example for people with lower end terminals, or blind people etc. Also it helps robots, machines, servers to understand your page. Semantic HTML says there should only be 1 H1 by page, and that it must represent the higher level in the hierarchy. So logically, H1 is your logo, in your header, on all pages. And what you consider H1, like page titles, article titles, slogans on home, is actually a H2. On semantic web, text title start at H2.
I edited my previous post 5 times be sure you got it entirely
When you want a video to loop but you don’t have a natural looping point, you fade-loop it. You make the end overlap the beginning during a half or one second. This way, there’s no hard cut, the transition is smooth.
The process: You cut a bit of the beginning of the video, you paste it at the end and make it cross fade with the old end. Do that in Premiere, iMovie, Vegas or even Photoshop (or give it to a video savvy friend )
As much as you’re going to learn about semantic HTML, you’re going to see that’s it’s easy to respect but rare are the designers who do. And that’s not a good thing The web is much more than just gorgeous color screens. And respecting the Semantic HTML is the best thing you can do for your SEO.
Are there any immediate resources that you could recommend for someone who doesn’t have a background in code to help steer me in the right semantic direction?
Even if webflow is a no-code tool, you’ll live a happier designer life if you know what you’re doing. And debugging will be much more easier. HTML and CSS are not hard, it’s not real code, they are no-brainer description scripts. It’s only something to learn.
Very nice tips, @vincent. Nice job suggesting some breathing room for that text.
I did want to mention one thing though. Sorry to throw a counterpoint in here, but HTML5 kind of changes things when it comes to the semantic use of heading tags. And since Webflow produces HTML5 documents, it’s good to know the differences between HTML5 and pre-HTML5.
Here’s a good and fairly easy to read article that might help on the subject.
hi craigteel - thanks for pointing that out. Always good to get balanced views on subjects and make one’s own decision! I think I saw your site on here - “portfolio” or something to that effect - really nice!
The web is much more than just gorgeous color screens. And respecting the Semantic HTML is the best thing you can do for your SEO.