Gaming network (unfinished)

[Snopboy]

Hey, please give criticism and don't say just "it's good/ugly", explain why so I can improve it.
I'm still designing some of the header stuff, didn't get to the content part yet.

Coded HTML5&CSS3:
*It's an hover effect on the navigation*

You must be registered to see links

On Photoshop:

You must be registered to see links

​

 

[Detox]

Everything looks pretty good, expect the text below the logo. That looks extremely ugly, and doesn't fit one bit. You should find another font, or at least take off the bold and the stroke.

Else then that, it looks pretty decent. Also, the menu is to big.

 

[Snopboy]

Everything looks pretty good, expect the text below the logo. That looks extremely ugly, and doesn't fit one bit. You should find another font, or at least take off the bold and the stroke.

Else then that, it looks pretty decent. Also, the menu is to big.

Thank you!
I will change the logo text right away, also I resized the navigation/manu itself and text size, it looks better like that with the effect blends in

 

[NubPro]

Is it me or the image in the slider looks stretched?

 

[Mucski]

First. There is already a core network. Second the site... well, how can I put this gently. It needs a lot of re-work. Basically everything Detox said, plus all the shadows are too ... dark. You need to reduce the opacity. What I do is usually set it to "Soft Light" from "Multiply", and reduce opacity to around 50%. Can also be reduced in the CSS3 version with the "blur" switch.

 

[Snopboy]

Is it me or the image in the slider looks stretched?

No, it's not stretched, I actually resized it to be smaller than the image originally was but I've done it using shift key so it didn't stretch it.
Also I used a few effects and graphical edits to make it sharper and smoother with a better quality than the original pixelated image.

First. There is already a core network. Second the site... well, how can I put this gently. It needs a lot of re-work. Basically everything Detox said, plus all the shadows are too ... dark. You need to reduce the opacity. What I do is usually set it to "Soft Light" from "Multiply", and reduce opacity to around 50%. Can also be reduced in the CSS3 version with the "blur" switch.

I actually had Core Network back in 2012 but it is not Core Network here, it's Core-Gaming & Core Inc. (yes, I do know what inc means and it is not registered company obviously because we are infringing copyrights held by other major companies)
Also I never heard of "blur" in CSS, there is opacity as an attribute and there is rgb's opacity rgb(0, 0, 0, 0.50) the first 3 zeros are 000 - black and the 0.50 is the opacity.
I'll do it

 

[Mucski]

CSS3,

box-shadow:         1px 1px 4px 0px rgba(50, 50, 50, 0.5);

Third one is blur, last one in the bracket is opacity. And you need to adjust the opacity, because blur is = spread in PS. Sorry for the confusion. As for Core "Copyright © 2014. Core Inc, All Rights Reserved." ... It's where I work now xD

 

[Snopboy]

CSS3,

box-shadow:         1px 1px 4px 0px rgba(50, 50, 50, 0.5);

Third one is blur, last one in the bracket is opacity. And you need to adjust the opacity, because blur is = spread in PS. Sorry for the confusion. As for Core "Copyright © 2014. Core Inc, All Rights Reserved." ... It's where I work now xD

Well, yeah box shadow has it but I meant there is no attribute called blur, like "blur: 5px;" or such.
Also, Which Core Inc. you're working for?
Anyway, I own a gaming network and it's brands (not copyrights on the games).

 

[NubPro]

Well, yeah box shadow has it but I meant there is no attribute called blur, like "blur: 5px;" or such.
Also, Which Core Inc. you're working for?
Anyway, I own a gaming network and it's brands (not copyrights on the games).

You must be registered to see links

 

[Snopboy]

You must be registered to see links

W3 are missing the forth attribute of the shadow box.

Also made some changes;

 

[NubPro]

I simply cant understand what are you trying to point out.

 

[Riizq]

The text does not look good in bold ( the nav text )
Work on the logo ( it does not look pro. You want the site to look professional )
You are trying to keep your site simple, that is good.
Keep it going mate

 

[iPhoenix]

This is good start. Not going to lie to you though, you do need to work on this design to make it from something mediocre to something awesome.

Start clean with a layout then start adding graphical modifications (This is called wireframing. Something everyone should be doing). Look around for inspiration. (Stay away from themeforest though. Everything there follows the same poop trends and kills creativity). Mix ideas together, check out the new technologies available to the web and start using them.

Some more advice, start adding some text on your site and some sense of direction. Think, "what do I want my users to do on this page?" Go from top priority to least priority. Then start designing with that flow in mind, for example, "I want my users to see my networks featured game first, then the sub games." What you have now is big one image and three small ones. That doesn't tell me that the big one is your main/special/whatever game. It's just.. there, I don't know if I'm supposed to look at it, click it or go "WOW! Warrock, that game sucks!!" In other words you've got some bad flow going on.

Designing for the web isn't as easy as people (who're mostly out of the field) make it out to be; however, it's also not something that cannot be mastered with practice. The greatest enjoyment in designing a website is the fact that it's a limitless canvas. Whatever you can come up with on paper, photoshop, or even gimp. You can recreate it in the browser. That being said, break out of the layouts already defined and done by others. Be creative!

 

[Snopboy]

The text does not look good in bold ( the nav text )
Work on the logo ( it does not look pro. You want the site to look professional )
You are trying to keep your site simple, that is good.
Keep it going mate

Usually font styling is a matter of taste but not in that case, it goes really well with the bold but the only thing that ruins it is the text shadow (dark) that I added there so I'll remove it.
I'll do my best on the logo or let a professional designer to work on it if I wont succeed making it good.
Thank you very much!

This is good start. Not going to lie to you though, you do need to work on this design to make it from something mediocre to something awesome.

Start clean with a layout then start adding graphical modifications (This is called wireframing. Something everyone should be doing). Look around for inspiration. (Stay away from themeforest though. Everything there follows the same poop trends and kills creativity). Mix ideas together, check out the new technologies available to the web and start using them.

Some more advice, start adding some text on your site and some sense of direction. Think, "what do I want my users to do on this page?" Go from top priority to least priority. Then start designing with that flow in mind, for example, "I want my users to see my networks featured game first, then the sub games." What you have now is big one image and three small ones. That doesn't tell me that the big one is your main/special/whatever game. It's just.. there, I don't know if I'm supposed to look at it, click it or go "WOW! Warrock, that game sucks!!" In other words you've got some bad flow going on.

Designing for the web isn't as easy as people (who're mostly out of the field) make it out to be; however, it's also not something that cannot be mastered with practice. The greatest enjoyment in designing a website is the fact that it's a limitless canvas. Whatever you can come up with on paper, photoshop, or even gimp. You can recreate it in the browser. That being said, break out of the layouts already defined and done by others. Be creative!

You're definitely right but sadly I'm not a professional nor a normal designer level, I'm a web developer mainly, designing is really difficult when you barely know the basics.
I'll see how I can improve it, I lack creativity
Thank you for replying and giving me criticism, I appreciate it!
If you have any suggestions of what do you think I should add there, let me know

 

[iPhoenix]

You're definitely right but sadly I'm not a professional nor a normal designer level, I'm a web developer mainly, designing is really difficult when you barely know the basics.
I'll see how I can improve it, I lack creativity
Thank you for replying and giving me criticism, I appreciate it!
If you have any suggestions of what do you think I should add there, let me know

Developer turned designer, eh?

Take my suggestion. If you're using Photoshop. Stop.

It's a really common misconception that you need a bitmap editor in order to design for the web. People take this the wrong way and create their entire website in Photoshop. Photoshop is a very complicated program and whatever you create in it has high detail and will most likely not look the same (or as good) in the web browser. The result? Well as you can imagine, a huge gap (and waste of time) between quality.

All you need is a pencil and some paper. Sketch a wireframe of what you're looking for on paper. Though if you still love Photoshop too much, get a wireframing kit for it. After you've got a good "flow" going with the wireframe, recreate it in the browser. Give it life by adding colours, images and effects (of both jQuery and CSS3 nature). Add even more graphical work if you still need that "ompf." But all of that should always come in the end.

And lastly, don't think too much on "what should I add." That question is always vague and ends in disrupting the natural flow of the document. The appropriate question would be "Why am I creating this page?" And only you can answer that question since this is your website. Though, it should be along the lines of "To introduce my network and the games that run under it." Then, the next question comes. "How can I introduce my network?" This is generally where the creativity kicks in. "Maybe a big interactive slider!", "Hmm what if I put a video that explains our network?", "Heck even some plain text could do the job if I animate it right!". It takes a while to get this process right but it works.

Here are some other things that help you along in the world of web design & development.

List of inspirational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of informational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of resources and tools:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of.. frameworks.

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of interesting and useful jQuery effects

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

These are front end frameworks that are particularly made for people who're not so good with web design, Especially bootstrap. If you want to lose that "creativity" factor in order to create "good" looking and functional site. You can use Bootstrap. (This isn't to say great creative things cannot be made with Bootstrap, they just generally aren't.). I'm also creating my own framework to use in my own projects. I'm nowhere as good as the guys who develop the above mentioned frameworks though. My framework is incomplete but you can view the status (

You must be registered to see links

).

I rarely give feedback, either on ragezone or anywhere else, but when I do, I make it so it doesn't apply just to your current project but your entire designing process. I want to help clarify your ideas and background so not only do you create a better design now, but always continue to make them. It's up to you to take the most out of the advice I give.

 

[Snopboy]

Developer turned designer, eh?

Take my suggestion. If you're using Photoshop. Stop.

It's a really common misconception that you need a bitmap editor in order to design for the web. People take this the wrong way and create their entire website in Photoshop. Photoshop is a very complicated program and whatever you create in it has high detail and will most likely not look the same (or as good) in the web browser. The result? Well as you can imagine, a huge gap (and waste of time) between quality.

All you need is a pencil and some paper. Sketch a wireframe of what you're looking for on paper. Though if you still love Photoshop too much, get a wireframing kit for it. After you've got a good "flow" going with the wireframe, recreate it in the browser. Give it life by adding colours, images and effects (of both jQuery and CSS3 nature). Add even more graphical work if you still need that "ompf." But all of that should always come in the end.

And lastly, don't think too much on "what should I add." That question is always vague and ends in disrupting the natural flow of the document. The appropriate question would be "Why am I creating this page?" And only you can answer that question since this is your website. Though, it should be along the lines of "To introduce my network and the games that run under it." Then, the next question comes. "How can I introduce my network?" This is generally where the creativity kicks in. "Maybe a big interactive slider!", "Hmm what if I put a video that explains our network?", "Heck even some plain text could do the job if I animate it right!". It takes a while to get this process right but it works.

Here are some other things that help you along in the world of web design & development.

List of inspirational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of informational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of resources and tools:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of.. frameworks.

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of interesting and useful jQuery effects

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

These are front end frameworks that are particularly made for people who're not so good with web design, Especially bootstrap. If you want to lose that "creativity" factor in order to create "good" looking and functional site. You can use Bootstrap. (This isn't to say great creative things cannot be made with Bootstrap, they just generally aren't.). I'm also creating my own framework to use in my own projects. I'm nowhere as good as the guys who develop the above mentioned frameworks though. My framework is incomplete but you can view the status (

You must be registered to see links

).

I rarely give feedback, either on ragezone or anywhere else, but when I do, I make it so it doesn't apply just to your current project but your entire designing process. I want to help clarify your ideas and background so not only do you create a better design now, but always continue to make them. It's up to you to take the most out of the advice I give.

Thanks for replying and giving me advices to improve I appreciate it!
I'm just sort of used to Photoshop, not a pro or anything just used to work with it and yes I'm aware of that issue that Photoshoped images are displayed in a really crappy way and low quality, did you use any bitmap editor to design the fancy designs you have in your portfolio?
They all look awesome and professional!
As a web developer I do use CSS3 when possible but sometimes there are objects where you can't redesign them using css, the kind of where there are images within them or special effects (if necessary) so I'm doing the best I can

Un fortunately, I'm not good on drawing stuff at all, my drawing skills are, umm, lame lol.
I searched up "wireframe" like you mentioned in your post and I got the idea of it so it will be really useful to start every website like that to get a better picture in mind of what I'm going to do and how.

You're right on 100% of what you said, I guess you're really experienced in designing and web development in general.
I'm not using frameworks but if for example I want an error style message or such, I do take it from bootstrap but only a few things and not the whole file/framework.

As for jQuery and CSS, I have no knowledge on that subject but today I actually started to learn basics of JS while creating a dropdown menu and a few other stuff

Thank you for the advices and for your time, I find this helpful and useful so thank you!

 

[iPhoenix]

Thanks for replying and giving me advices to improve I appreciate it!
I'm just sort of used to Photoshop, not a pro or anything just used to work with it and yes I'm aware of that issue that Photoshoped images are displayed in a really crappy way and low quality, did you use any bitmap editor to design the fancy designs you have in your portfolio?
They all look awesome and professional!
As a web developer I do use CSS3 when possible but sometimes there are objects where you can't redesign them using css, the kind of where there are images within them or special effects (if necessary) so I'm doing the best I can

Un fortunately, I'm not good on drawing stuff at all, my drawing skills are, umm, lame lol.
I searched up "wireframe" like you mentioned in your post and I got the idea of it so it will be really useful to start every website like that to get a better picture in mind of what I'm going to do and how.

You're right on 100% of what you said, I guess you're really experienced in designing and web development in general.
I'm not using frameworks but if for example I want an error style message or such, I do take it from bootstrap but only a few things and not the whole file/framework.

As for jQuery and CSS, I have no knowledge on that subject but today I actually started to learn basics of JS while creating a dropdown menu and a few other stuff

Thank you for the advices and for your time, I find this helpful and useful so thank you!

Yeah, I did use Photoshop for the graphical work that is required for game site designs and other stuff in general. I have 8 years of experience with Photoshop, 6 with web development. I began like everyone else, creating crappy signatures.

CSS3 is pretty amazing. With the right technique it's possible to replicate about 75% of modern design done in Photoshop with CSS. The other 25% reserved for graphically intensive images with fancy borders, textures, bevel/emboss, site backgrounds, etc.

You're welcome for the advice and aid. Good luck! Hope to see you update this design soon so I can give more critique!

 

[T0W3L]

Developer turned designer, eh?

Take my suggestion. If you're using Photoshop. Stop.

It's a really common misconception that you need a bitmap editor in order to design for the web. People take this the wrong way and create their entire website in Photoshop. Photoshop is a very complicated program and whatever you create in it has high detail and will most likely not look the same (or as good) in the web browser. The result? Well as you can imagine, a huge gap (and waste of time) between quality.

All you need is a pencil and some paper. Sketch a wireframe of what you're looking for on paper. Though if you still love Photoshop too much, get a wireframing kit for it. After you've got a good "flow" going with the wireframe, recreate it in the browser. Give it life by adding colours, images and effects (of both jQuery and CSS3 nature). Add even more graphical work if you still need that "ompf." But all of that should always come in the end.

And lastly, don't think too much on "what should I add." That question is always vague and ends in disrupting the natural flow of the document. The appropriate question would be "Why am I creating this page?" And only you can answer that question since this is your website. Though, it should be along the lines of "To introduce my network and the games that run under it." Then, the next question comes. "How can I introduce my network?" This is generally where the creativity kicks in. "Maybe a big interactive slider!", "Hmm what if I put a video that explains our network?", "Heck even some plain text could do the job if I animate it right!". It takes a while to get this process right but it works.

Here are some other things that help you along in the world of web design & development.

List of inspirational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of informational websites:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of resources and tools:

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of.. frameworks.

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

List of interesting and useful jQuery effects

• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links
• You must be registered to see links

These are front end frameworks that are particularly made for people who're not so good with web design, Especially bootstrap. If you want to lose that "creativity" factor in order to create "good" looking and functional site. You can use Bootstrap. (This isn't to say great creative things cannot be made with Bootstrap, they just generally aren't.). I'm also creating my own framework to use in my own projects. I'm nowhere as good as the guys who develop the above mentioned frameworks though. My framework is incomplete but you can view the status (

You must be registered to see links

).

I rarely give feedback, either on ragezone or anywhere else, but when I do, I make it so it doesn't apply just to your current project but your entire designing process. I want to help clarify your ideas and background so not only do you create a better design now, but always continue to make them. It's up to you to take the most out of the advice I give.

This ^.

This made me really re-think my design strategy as well. Photoshop really isn't geared toward web-design, and it's been my main design tool since I started. Recently started re-working my framework using OOP PHP, I think I may have to really take a look at CSS3, I was aware of the drop-shadow technique in CSS3, but didn't know how deep that rabbit hole goes.

To the OP: Definitely don't take iPhoenix's post with a grain of salt. That is some good advice right there.

 

[ashleymeah]

Developer turned designer, eh?

Take my suggestion. If you're using Photoshop. Stop.

It's a really common misconception that you need a bitmap editor in order to design for the web. People take this the wrong way and create their entire website in Photoshop. Photoshop is a very complicated program and whatever you create in it has high detail and will most likely not look the same (or as good) in the web browser. The result? Well as you can imagine, a huge gap (and waste of time) between quality.

I also develop and design in code, but to suggest to them to stop using Photoshop is wrong. Photoshop is for graphics, and like you said - you can create anything on a page using the browser. So whats this talk about bad quality? Anyone with a few years experience should be able to make a website match the look in Photoshop to 99.99% if not 100% - pixel perfect. The whole idea of using powerful graphic applications is for layering so you can easily cut up the original graphics and such.

 

[iPhoenix]

I also develop and design in code, but to suggest to them to stop using Photoshop is wrong. Photoshop is for graphics, and like you said - you can create anything on a page using the browser. So whats this talk about bad quality? Anyone with a few years experience should be able to make a website match the look in Photoshop to 99.99% if not 100% - pixel perfect. The whole idea of using powerful graphic applications is for layering so you can easily cut up the original graphics and such.

"People take this the wrong way and create their entire website in Photoshop" Is what follows. Perhaps I came off a bit strong and you've mistaken me for saying "stop using Photoshop completely."

It's fine to create a basic layout and graphical work in Photoshop. In fact it's the norm.

But when the web standard was being formed, they weren't thinking. "Everyone will use a bitmap editor to create websites!" Websites are made in the browser, with a text editor using html, css and javascript. Graphics are made in Photoshop with Photoshop using Photoshop. Web Design =/= Graphics Design.

"So whats this talk about bad quality?" / "Anyone with a few years experience should be able to make a website match the look in Photoshop to 99.99% if not 100% - pixel perfect"

Have you ever tried porting over that typeface from that one Photoshop file into the browser with same style and all the same effects with cross-browser capabilities? Text, pixel perfection and general flexibility in Photoshop isn't ported over to the browser. All those fancy images need to be edited again and again every time you want to update the website. It takes time (and is a waste of) to achieve that "pixel perfection." Regardless of how skilled the coder is. That isn't to say 100% pixel perfection isn't attainable, but then that would mean your website is pretty damn simple.

Photoshop is a tool that can be used to organize your ideas on a big (editable) canvas and to prettify your website. It isn't however the one stop shop to create the entirety of your website in; but don't let me stop you. If you feel like making websites in Photoshop. By all means, go for it.