A website for a Record Label with an Online store

Hi guys! First of all I want to thank to everyone one who had helped me to get into blocs, is getting more fan every day to use this piece of gold app.
I have quite finish the website of music project, is a record label that donate all the income to help kids from third world countries.
Here is the web, I will like to get some feedback from the expert if possible :slight_smile: Also I added a music store using snipcart, I will be posting soon a tutorial of how integrate the app to blocs, is not that hard :smiley:

www.lostonyoumusic.com

there are still some stuff I didnt figure out, for example how to remove the html form the url because I have a ssl protection but will figure it out :blush: hopefully blocs 3 will bring this featured to us :smiley:

I know you have been working hard to make this site and you like the design layout but it’s about as poor of a site in the readabilty category as I’ve seen.

I can’t hardly read the top menu, footer links and social icons. Why would you use such a dark picture/background and have small text with gray colored text links? They need to be white so customers can read them.

On the mobile side I not only can hardly figures out what the pictures is, I can’t even read the menu.

The artist page just seems to run together. It needs some more padding, especially on the mobile side.

On the order page the cost and buy buttons again are almost impossible to read.

I think you should rethink the site to make it more about the users experience. Don’t you want users to buy your products?

Caseyt

So in the hover I should make the text in white right? The dark picture was my idea for having a minimal site! Is a underground record label and we release techno music :slight_smile: should I change the sizes of the buy button? How big should they be? I can make the menu on the mobile site bigger with a custom class right? What pictures do you have trouble to see?

My idea was to make the mobile site like this but didn’t find the way if how to do it because for example when you clic on the name of the song it will play on the music player and on the three dots you buy it

Any idea of how to do it?

“So in the hover I should make the text in white right?”
I think you should make it white all together. Even if you do it just on hover its just to hard to read.

“The dark picture was my idea for having a minimal site! Is a underground record label and we release techno music :slight_smile:
I get that you are going for that look. If thats what you want then it’s ok.

“should I change the sizes of the buy button? How big should they be?”
Big enough so that you can read the price, the text is just to small. The button should be a target you want people to click on, so it should stand out. Maybe a different color.

" I can make the menu on the mobile site bigger with a custom class right?"
Yes a class will give you the ability to adjust the mobile text size (16px white or a bolder font)

“What pictures do you have trouble to see?”
The main hero picture on the mobile side just does not get it for me. On a big screen it’s ok but on a smaller phone there’s just not enough detail to even see what it is.

Hope this helps.
Casey

Ahhh you mean the main picture from the home page? Maybe i can have a different version of that picture for the mobile version!
Another question! Do you know how could i make the design as those two pictures I just post? Is a bit complicate but maybe can be done! If you go to www.beatport.com with your mobile and clic at any release then you will see how does it work :slight_smile:

The Beatport.com looks good to me. The regular site on the mobile is what really needs some work. At the very least change to menu and footer text to white and larger text. I could live with the photo if thats what you want but you should be able to read the text easily.

Casey

Ok but do you know how to make the same as Beatport page?

Hi! So I fix the mobile version of the store and the buying page! What do you think?

Just realised it should have more margin between the pictures because there is an effect missing!

About the main picture the dark kid Im having a problem because I used it as background imagen as I dont know how to make a picture fill the whole screen as it is on the web

How can I do it?

You have done a nice job on the readability front. I think the social icon are still to dark, if your set on that effect at least have them be white on roll over. Nice job.

On the image, you can either use it as a hero bloc which will fill the screen or use a carousel. You can also use it as a background image in a bloc.

Casey

Im uploading new icons in whiter color! Let me figure out about the background :slight_smile:
Thank you so much for all the corrections :smiley:

2 Likes