Streaming live at 10am (PST)

Not quite finished, but looking for some feedback!


#1

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)?

Here's the public: https://webflow.com/design/bigfallsfish?preview=1d720dd77d732a0a308e33dfecb5f9c9

Thanks to cyberdave for his tremendous help!


#2

Good job @ag3nt7, looks great ! Makes me want to go fishing smile


#3

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 (:

Actually even 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.

Scale 1:1 detail :

That was my two cents smile

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.


#4

Hi vincent - thanks for the pointer - I extended the margins and padding. Could you explain a bit more re. the "fade-loop"?

And I will address the font, etc. - I'm still so new to the semantics. I'll try to understand that some more and apply the changes.

Thanks!


#5

I edited my previous post 5 times be sure you got it entirely wink

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 wink )


#6

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.


#7

I like doing things right - and I always learn from my mistakes (quickly!).


#8

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?


#9



http://www.goodwebsiteinspector.com/en/semantic-rules-use-headline-tags-img-within-headlines-semantic-html-tags
W3schools is a great reference site http://www.w3schools.com/html/html5_semantic_elements.asp

But my best and funniest link will be https://www.codeschool.com/paths/html-css

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.


#10

Thank you! I will check this out.


#11

Very nice tips, @vincent. Nice job suggesting some breathing room for that text. smile

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.

http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824


Here was my first from scratch Webflow project. Would love some creative direction!
#12

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!


#13

I'm actually reading about this now, thanks for pointing out my rhetoric is a bit outdated, don't be sorry smile


#14

Craig, second part of the article should be a post in itself, it's a very good piece. Thanks.

Also your personal site is one of the nicest Webflow site around, very good job.


#15