Jump to content
You must now use your email address to sign in [click for more info] ×

Introduction to web design


Liamd88

Recommended Posts

I've been trying to teach myself the basic principles of web design and UI design during my free time.
Using an online course and inspiration ideas from various sources I have been creating a site for my brothers expansive collection of basketball trainers.
It's a 1 page design as there isn't too many things to display but just a couple of things to note - 

  • The 'about us' section will include links to the various social media pages of the photographer/customiser who refurbished the shoes.
  • The 'comments' section will include a scrolling list.
  • In the 'kicks' section, images will appear greyscale until the mouse is hovering over a selection.
    • Once a trainer is selected it brings up the pop up window as shown in the 2nd image attached.

I went for a simple design but this is not a finished project as its only a desktop view, I am currently using some AD tutorials to learn about constraints to create mobile/tablet versions also (and hopefully into a fully functional website). Eventually I will potentially consider designing pages for purchasing a pair of shoes etc as well but I just thought I'd get some views and maybe some things to improve on - so any comments are more than welcome.

 

post-31382-0-13252200-1481463210_thumb.pngpost-31382-0-97625300-1481463269_thumb.png

Link to comment
Share on other sites

Very nice starting point indeed … :)

 

Maybe I would give the logo a second thought. It is not entirely clear how it should read:

 

“Pumped Up Kicks” or “Pumped Kicks Up.”

 

While the latter reading doesn’t make sense, it is suggested by a law of kinship, so to say. “Up” semantically belongs to “Pumped,” but in your design “Pumped” and “Kicks” have the closest formal relation. That seems a bit unfortunate. Furthermore, it is typographically not advisable to stretch letterforms like you did in order to create the logo. I cannot but encourage you to try your hand at drawing these letterforms yourself. By doing so, you could also balance the weights of the letterforms a little better. Just try it … it is a very rewarding way of training your eyes and hands …  :)

 

Well, I hope you don’t find these remarks offending …  :)

Great work, Alex

Link to comment
Share on other sites

Very nice starting point indeed … :)

 

Maybe I would give the logo a second thought. It is not entirely clear how it should read:

 

 

“Pumped Up Kicks” or “Pumped Kicks Up.”

 

While the latter reading doesn’t make sense, it is suggested by a law of kinship, so to say. “Up” semantically belongs to “Pumped,” but in your design “Pumped” and “Kicks” have the closest formal relation. That seems a bit unfortunate. Furthermore, it is typographically not advisable to stretch letterforms like you did in order to create the logo. I cannot but encourage you to try your hand at drawing these letterforms yourself. By doing so, you could also balance the weights of the letterforms a little better. Just try it … it is a very rewarding way of training your eyes and hands …  :)

 

 

Well, I hope you don’t find these remarks offending …  :)

Great work, Alex

I don't find it offending at all, thank you for pointing that out :) any help is appreciated.

I have never done a logo before so I will take your comments on board for sure.

Link to comment
Share on other sites

Glad you don’t mind …  :)

 

I really like your design, the colour theme is nice, and the style is congenial to the subject. Maybe you could have a look at the font sizes and the line heights of the body text as well. They are very small, compared to the rest of your design. To get a feel for the balance of the element sizes, you could have a look at the templates that are provided by services like Squarespace. I attached a randomly picked example …  :)

Link to comment
Share on other sites

  • 2 weeks later...

Glad you don’t mind …  :)

 

I really like your design, the colour theme is nice, and the style is congenial to the subject. Maybe you could have a look at the font sizes and the line heights of the body text as well. They are very small, compared to the rest of your design. To get a feel for the balance of the element sizes, you could have a look at the templates that are provided by services like Squarespace. I attached a randomly picked example …  :)

Thank you again for your advice, I've taken it into consideration :)

I have done a couple of different logos and this below was a preferred option - maybe including some text in the bottom half too (but thats to be decided)

Logo_Designs.png

Link to comment
Share on other sites

Hey Liamd!

 

 

Good to see more fellow UI users on here. Didn't notice the thread until now. I noticed some subtle little changes that could improve the site even more.

 

 

 

Things such as :

 

- Spacing

- Text readability & Colors

- Organizing

 

 

~

 

 

Spacing

 

With spacing I am talking specifically about white spaces. In certain areas some elements could use a little bit more breathing room. An article that speaks more in-depth about this :

http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

 

 

Text readability & Colors

 

Not too much of a problem throughout the design, but caught my attention for the Log In button. I made a little comparison of white vs black in the critique image. And some more info about colors :

https://webflow.com/blog/web-design-101-color-theory

 

 

 

Organizing

 

 

From what I seen, I think organizing your elements well can capture peoples attention. For example, the kicks gallery instead of putting it almost all the way to the bottom, I would put it right below the slider or remove the slider and use big images here and there when peoples are scrolling through.

 

Of course I do not know what elements you guys want to focus more on, but those are the things that comes to mind.

 

 

~

 

 

Best to open the image in a new tab or download it due of the size of the image.

 

post-44238-0-62168500-1482415345_thumb.jpg

 

 

Overall welcome aboard to the journey of Web Design. Its a fun one for sure. 

 

 

 

~

 

Additional information, if you're looking for other websites design to learn from, make sure to check :

http://www.awwwards.com/

 

Has a lot of cool sites with great interactions that you can dissect and learn from. 

Link to comment
Share on other sites

Hey Brian,

 

I just saw your inputs regarding readability and I have to disagree on the 'Login Button' in white.

 

It's a close one but the contrast is higher with the black font instead of the white one

you can see it here with the darkest colour (on the left)

http://leaverou.github.io/contrast-ratio/#%23d64856-on-white

http://leaverou.github.io/contrast-ratio/#%23d64856-on-black

 

and here with the midground color:

http://leaverou.github.io/contrast-ratio/#%23e15d51-on-white

http://leaverou.github.io/contrast-ratio/#%23e15d51-on-black

 

But on a personal preference I'd also go with the white (but not from a readability point of view). ;)

Link to comment
Share on other sites

@JokeRat

Maybe I used the wrong term, but I am speaking specifically which color the text looks best for the specific gradient he's using. Which you can definitely notice that white comes on top, because it becomes more visible in comparison to a pure black or dark gray. 

 

 

You can go darker, but more in the darker red range instead of pure black or gray etc. Which is shown in the example here or can also make the text bolder to make it more visible. 

 

post-44238-0-81693200-1482417387_thumb.jpg

post-44238-0-85683200-1482417389_thumb.jpg

Link to comment
Share on other sites

Well, I think you used the right term then. :)

But "seeing" that white comes on top might be a subjective thing. 

Mathematically he should use black as it should be easier to distinguish for - let's say - visual handicapped people.

Link to comment
Share on other sites

Hey Liamd!

 

 

Good to see more fellow UI users on here. Didn't notice the thread until now. I noticed some subtle little changes that could improve the site even more.

 

 

 

Things such as :

 

- Spacing

- Text readability & Colors

- Organizing

 

 

~

 

 

Spacing

 

With spacing I am talking specifically about white spaces. In certain areas some elements could use a little bit more breathing room. An article that speaks more in-depth about this :

http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

 

 

Text readability & Colors

 

Not too much of a problem throughout the design, but caught my attention for the Log In button. I made a little comparison of white vs black in the critique image. And some more info about colors :

https://webflow.com/blog/web-design-101-color-theory

 

 

 

Organizing

 

 

From what I seen, I think organizing your elements well can capture peoples attention. For example, the kicks gallery instead of putting it almost all the way to the bottom, I would put it right below the slider or remove the slider and use big images here and there when peoples are scrolling through.

 

Of course I do not know what elements you guys want to focus more on, but those are the things that comes to mind.

 

 

~

 

 

Best to open the image in a new tab or download it due of the size of the image.

 

attachicon.gifPart 01.jpg

 

 

Overall welcome aboard to the journey of Web Design. Its a fun one for sure. 

 

 

 

~

 

Additional information, if you're looking for other websites design to learn from, make sure to check :

http://www.awwwards.com/

 

Has a lot of cool sites with great interactions that you can dissect and learn from. 

Well, I think you used the right term then. :)

But "seeing" that white comes on top might be a subjective thing. 

Mathematically he should use black as it should be easier to distinguish for - let's say - visual handicapped people.

Thank you for both the info/discussions - I know it's not up to scratch but putting it on here has helped massively already as I can learn more from people who are experienced in this. I'll look into the links as soon as I can and see if I can add these into the site.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.