Photo of the Day
Shoutbox

SabedLeepski: Surfin‘ Europe, for surf (related) gigs and events in Europe Big Razz https://sunb...
301 days ago

SHADOWNIGHT5150: I like big reverb and i cannot lie
235 days ago

SHADOWNIGHT5150: Bank accounts are a scam created by a shadow government
235 days ago

sysmalakian: TODAY IS MY BIRTHDAY!
221 days ago

dp: dude
202 days ago

Bango_Rilla: Shout Bananas!!
157 days ago

BillyBlastOff: See you kiddies at the Convention!
141 days ago

GDW: showman
92 days ago

Emilien03: https://losg...
14 days ago

Pyronauts: Happy Tanks-Kicking!!!
7 days ago

Please login or register to shout.

Current Polls

No polls at this time. Check out our past polls.

Current Contests

No contests at this time. Check out our past contests.

Donations

Help us meet our monthly goal:

29%

29%

Donate Now

Cake December Birthdays Cake
SG101 Banner

SurfGuitar101 Forums » SurfGuitar101 Website »

Permalink SG101 v3.0 new site design

New Topic
Goto Page: Previous 1 2 3 4 5 6 Next

DreadInBabylon wrote:

A couple of tips:

Take the color scheme from Fred's logo.
Add subtle gradients and shadowing (all can be generated via CSS).
Clever use of inverse (white on dark bg) for important information.
Maybe that can be a start.
An example:
image
I can supply you with the hex colors if you want.

Try to span the elements wider for higher resolution displays:
Beyond 1170px there's a lot of real estate wasted. That would mean tons of white space on large displays, and very small fonts on high res phones.
At some point, all the fonts need to be increased by % of screen size.
4K will be standard in a few years, so take care of your breakpoints now!

Here's the logo with transparent background for easier implementation.
image

In general I like what you've done here, particularly with the colors, but disagree on the use of gradients, they tend to make things look kinda dark and dingy to me. Flat is in and it's easy too!

On another note: one thing I looked into while at my job was getting our site to look good on Retina screens. Big apple nuts at work (myself not really included). One easy way to make your images look really nice on retina screens is double the resolution (or at least go to 150% the size) then crank up the compression to 50% or so. The high resolution hides the jpeg compression, file size is practically the same, but it looks SO much more crisp on retina screens and higher-end mobile devices. If you're able to, I would do this on the banner and logo. See this for more info: http://blog.endpoint.com/2014/05/supporting-apple-retina-displays-on-web.html

Storm Surge of Reverb: Surf & Instro Radio

Ariel, I was secretly hoping someone would take a screenshot and mark it up with suggestions... and you did! Thanks! I'll look over your suggestions in the next few days.

Hunter, I'm definitely interested in making the site look good on big displays, but it may not be a huge priority right away. Will definitely save that link though for later. Thanks again.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Last edited: Mar 24, 2016 08:15:58

Looking great, Brian!

Checking on an older iPad (iPad2 I think) running 9.2.1 (haven't done this weeks update yet). Handles landscape vs upright and flipping between the two gracefully.

One bug I think I've found is that when I click (tap) a link from the Yahoo Group posts for the first time on the page, I have to tap it a second time to acually go to it. Subsequent links work on first tap. Then, when I go to the second/next page in the Yahoo Group Posts archive, the same thing happens again. And the third page, etc.

Fady

El Mirage @ ReverbNation

Oh, and it doesn't seem to matter if it's a link to a thread. I just tried following the link to SG101 on Twitter in the page footer and had the same issue.

Fady

El Mirage @ ReverbNation

PoTD consistently opens on the first click/tap. Hmmm

Fady

El Mirage @ ReverbNation

I haven't seen any problems like that Fady. What browser are you using?

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

ElMonstroPorFavor wrote:

In general I like what you've done here, particularly with the colors, but disagree on the use of gradients, they tend to make things look kinda dark and dingy to me. Flat is in and it's easy too!

Thanks for your remark, I tend to agree with the approach you presented. I used gradients this case to introduce some movement and variation. Other methods are acceptable as well, it's just a mock-up to trigger the imagination. Once the page is designed, the gradients may well be redundant. Subtle, that's the key...
If we're talking trends anyway, "Material Design" is the in, and actually makes pretty good sense, aesthetically and ergonomically.

Brian, cool. Feel free to email me if you need something specific.
I know how hard it is, almost every aspect of redesigning a site... That's a great start.

  1. Another approach to consider would be to have dark backgrounds and light text, all throughout the site. I personally always use at night an extension that inverts the screen colors, otherwise it's a blinding session. It can be made to look nice and cute still. A radical, emotional change to what we're used to, but for the longer run, easier on the eyes and mobile batteries.
    Either way, never use 100% white for BG, insert some grey or a very subtle texture.
  2. The colors of the current site are OK too as a theme, maybe just a little tweaking.
  3. Section areas and elements consistently - either border lines, or different bg colors. (I know I didn't follow my own advice with the mockup.)
  4. Try rounding most of the square vertices, even more than on the <- left boxes here.

Last edited: Mar 24, 2016 03:24:01

Brian wrote:

I haven't seen any problems like that Fady. What browser are you using?

Safari on the iPad. Just checked it on an iPhone 5s, latest iOS (9.3) and first link opened on first click (so not seeing the same issue).

I'll update the iPad to the latest iOS and test again in the next day or so.

Fady

El Mirage @ ReverbNation

Ariel, if you want to mock anything up with darker colors or otherwise, go ahead. I realize we are all volunteers here, so only do it if it really interests you.

I like the idea of using the colors in the logo for the site. That's kind of how I came up with the current colors. The issue is we haven't really settled on a main logo. I'm just using the Fred Lammers one for now as a placeholder. Maybe I should just go with that until one appears.

Fady: I can't imagine the site doing anything to cause that issue... I do know that my small devices are sometimes fiddly and touching links doesn't always work unless you have the right mojo (capacitance) in your fingers.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Brian wrote:

Ariel, if you want to mock anything up with darker colors or otherwise, go ahead. I realize we are all volunteers here, so only do it if it really interests you.

Sure, and of course! Hope I'm potentially helping rather than confusing...
I wanna try something though on a more content heavy page, so I can have a better feel for how things fit.

I like the idea of using the colors in the logo for the site. That's kind of how I came up with the current colors.

Yep, that's the natural thing to do. Add Black, White and Grey, have variations of the Cyan and Orange 50% darker and 50% lighter, and you're covered.

The issue is we haven't really settled on a main logo. I'm just using the Fred Lammers one for now as a placeholder. Maybe I should just go with that until one appears.

Why? Everybody loves it, I think. It fits, it's cool and already exists on T's and such. I truly love this design. Maybe have a poll?

I can recreate it similarly, only with different composition/aspect ratio it it will fit better, maybe something more horizontal.

Last edited: Mar 24, 2016 11:28:46

I can't remember what it was before but it looks like the little tiny pic associated with the website quick-button on my browser toolbar changed. Kinda looks like a blue Strat angling a bit away from me.

Neat! (I know it's that time of year for the trip to the optometrist but...)
Cool

Wes
SoCal ex-pat with a snow shovel

DISCLAIMER: The above is opinion/suggestion only & should not be used for mission planning/navigation, tweaking of instruments, beverage selection, or wardrobe choices.

Hi Wes, that "favorite icon" thingy hasn't changed (intentionally) in a very long time. It's always been an ice blue metallic Jazzmaster, but it got squashed a bit.

Ariel has been feeding me design ideas and I just need some time to start playing around with them.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Last edited: Mar 30, 2016 21:40:42

Brian wrote:

Hi Wes, that "favorite icon" thingy hasn't changed (intentionally) in a very long time. It's always been an ice blue metallic Jazzmaster, but it got squashed a bit.

Ok, thanks Brian. Maybe I just noticed it more now for some reason; it's cool.

And thanks Ariel for your contributions as well. Coolest website because of talents applied.

Wes
SoCal ex-pat with a snow shovel

DISCLAIMER: The above is opinion/suggestion only & should not be used for mission planning/navigation, tweaking of instruments, beverage selection, or wardrobe choices.

Couple of minor tweaks tonight:

  • On small devices, the logo and banner appear in a carousel.
  • The main menu is now fixed to the middle of the screen as per Hunter's suggestion
  • I added another menu to reduce some clutter. Feel free to critique the contents of each menu; it was hard to decide what would go where.
  • On small devices, the Yahoo Group thread list table will now stack so you don't have to scroll left and right to see everything.

I'll probably do a little more visual tweaking thanks to Ariel sending me some mock-ups, and then spread the new design to some different sections of the site after that.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Made some initial attempts at customizing the default styles and colors:

  • Rounded the side blocks and changed background color
  • Picked some colors for the table
  • Changed the color of links
  • Changed paginator colors

So I need feedback & suggestions on those changes, but also I'm unsure what to do with the gray top bar and main menu bar under the logo. Ariel? Smile

Not sure about keeping the background white or using a color or image.

Thanks!

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Last edited: Apr 05, 2016 20:45:59

The contact form page is now using the new "work in progress" design. Now it's much easier to send feedback on your phone. Smile

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

The store page is now converted.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

The IRC and Member List pages have been converted.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Slowly converting more and more of the site over to the new design. The good news is I can keep doing this even while the new design is still placeholder in many places.

Still looking for feedback, re:

So I need feedback & suggestions on those changes, but also I'm unsure what to do with the gray top bar and main menu bar under the logo. Ariel?

Not sure about keeping the background white or using a color or image.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Update: no visible progress for a while. I started converting the calendar over to the new design when I got fed up with the post box. It just doesn't work on mobile. So I'm designing a new one and it is going to be awesome.

Site dude - S3 Agent #202
Need help with the site? SG101 FAQ - Send me a private message - Email me

"It starts... when it begins" -- Ralf Kilauea

Goto Page: Previous 1 2 3 4 5 6 Next
Top