Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

First webpage design attempt

Featured Replies

I've attached my first attempt at designing a homepage for a bicycle store (it's not for a real site, just practise). If anyone feels they could offer me some tips or ideas then I'd greatly appreciate it!

 

Largely I think the header is ok, but not the content area, particularly the orange 'company info' style box in the middle which looks a bit out of place, and I'm not really sure how to go about changing that to make it more subtle (it looked even worse with plain text on the white background). The logo is very basic, but at the moment I'm just concerned with the page layout, styling and such.

 

Everything was done using Photoshop CS3, and I had some real difficulty getting photoshop to accurately display text as a web browser would, is it at all possible?

 

 

cheers!

post-34219-0-57391700-1318440675_thumb.jpg

I've attached my first attempt at designing a homepage for a bicycle store (it's not for a real site, just practise). If anyone feels they could offer me some tips or ideas then I'd greatly appreciate it!

 

Largely I think the header is ok, but not the content area, particularly the orange 'company info' style box in the middle which looks a bit out of place, and I'm not really sure how to go about changing that to make it more subtle (it looked even worse with plain text on the white background). The logo is very basic, but at the moment I'm just concerned with the page layout, styling and such.

 

Everything was done using Photoshop CS3, and I had some real difficulty getting photoshop to accurately display text as a web browser would, is it at all possible?

 

 

cheers!

For a first attempt, pretty good. but a few comments.

To busy, much too busy. Everythign looks cramped. Some spacing between the left hand menu items. Needs a bit of white space.

would you mind if i make some notes on your image? i have a few key areas it might be easier to show you than try and explain it

  • Author

hi guys thanks for your feedback

 

For a first attempt, pretty good. but a few comments.

To busy, much too busy. Everythign looks cramped. Some spacing between the left hand menu items. Needs a bit of white space.

 

very good first attempt i agree with kree8or

 

aye on reflection it is far too cramped for a homepage, much of the central content could probably be offloaded to an about page

 

 

would you mind if i make some notes on your image? i have a few key areas it might be easier to show you than try and explain it

 

sure if you've the time, I'd be happy to see any suggestions. Feel free to be highly critical, I won't mind ;)

Edited by Cheezle

Everything was done using Photoshop CS3, and I had some real difficulty getting photoshop to accurately display text as a web browser would, is it at all possible?

 

 

You need to go to the text properties and select sharp, this is how font appears on the net.

 

if that's what you mean.

 

Charlotte

did a quick highlight of areas... my opinion but food for thought :)

post-33898-0-62378600-1318449209_thumb.jpg

Edited by Gaelen

  • Author

You need to go to the text properties and select sharp, this is how font appears on the net.

 

if that's what you mean.

 

yeah I tried the different anti aliasing options, but also the numerical font sizes in photoshop don't seem to match up with the font sizes in the web browsers, though I did a bit of googling and think it's a dot per inch issue.

 

 

did a quick highlight of areas... my opinion but food for thought :)

 

great tips cheers for that. SO I think the best conclusion is the homepage is too busy, so I'll shift some stuff to an about page and focus on the spotlight products and creating more white space.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.