Off-Topic Hang out with people and talk about whatever. Feel free to suggest a better description for this forum as everyone seems to have an opinion. :D

TrollandToad.com
Reply
 
Thread Tools
  #1    
Old April 17th, 2013 (4:38 PM).
KingCharizard's Avatar
KingCharizard KingCharizard is offline
C++ Developer Extraordinaire
     
    Join Date: Dec 2009
    Location: Pennsylvania
    Age: 29
    Gender: Male
    Nature: Bold
    Posts: 1,250
    As the title say, I'm a developer(programmer) I'm looking to make some cash on the side from templates, but my designs always look old and dated, stuff you could design with html tables. I want to modernize my design skills without actually copying other designs. I can draw, but I can only draw others ppls work. I have trouble coming up with original art, and the same seems to be happening with my designs.

    So What I'm asking is do you guys know any sites, books, articles, anything to help me improve my design skills and become a better designer.
    __________________
    Reply With Quote

    Relevant Advertising!

      #2    
    Old April 17th, 2013 (4:50 PM).
    Pichu2Pikachu2Raichu's Avatar
    Pichu2Pikachu2Raichu Pichu2Pikachu2Raichu is offline
    Yep, that's me
    • Silver Tier
     
    Join Date: Mar 2013
    Location: Hastings, New Zealand
    Age: 27
    Nature: Naughty
    Posts: 309
    Mate, first tables are getting old now but are still widely used. Believe me I am a expert on HTML.

    Might I recommend you try going to a web based web design school. And most of them are free, just Google it. I don't use them so yeah....

    As for helping you with designing, look for fresh inspiration by thinking about what people HAVE NOT done already, that's how I go about designing my websites, and I have a few good CSS ideas too.
    But this is the one thing I can't help you with if you ever need help with HTML, PM me.
    __________________

    Pichu2Pikachu2Raichu
    My favorite evolution series

    Kiwi Land|Thunder Bolt Forums|ProBoards After Dark|New Zealand


    Reply With Quote
      #3    
    Old April 17th, 2013 (4:56 PM). Edited April 17th, 2013 by KingCharizard.
    KingCharizard's Avatar
    KingCharizard KingCharizard is offline
    C++ Developer Extraordinaire
       
      Join Date: Dec 2009
      Location: Pennsylvania
      Age: 29
      Gender: Male
      Nature: Bold
      Posts: 1,250
      Quote:
      Originally Posted by Pichu2Pikachu2Raichu View Post
      Mate, first tables are getting old now but are still widely used. Believe me I am a expert on HTML.

      Might I recommend you try going to a web based web design school. And most of them are free, just Google it. I don't use them so yeah....

      As for helping you with designing, look for fresh inspiration by thinking about what people HAVE NOT done already, that's how I go about designing my websites, and I have a few good CSS ideas too.
      But this is the one thing I can't help you with if you ever need help with HTML, PM me.
      Thanks I'll try your suggestion, I dont use tables myself anymore. I switched to using only css, I am good at HTML5 XHTML, XML, CSS, PHP etc.. lol basically I can develop my butt off but my design skills well they are like im a 60 year old man lol. I dont want to hire a designer for my freelance work so I need to get at least moderately good enough...

      can you tell me more about what you mean by "web based web design school", and how would it be free. is it a site like w3schools?

      If so I dont need programming help, just design help..

      here is an example of one of my crappy designs
      Spoiler:


      I like the simple design, i just think the design is dated. Also I think a homepage should be more than what I have there, I should beable to tell the visitors more about the site, give them more options, eyecandy, and other links all while keeping the design clean and I just cant seem to do that.
      Reply With Quote
        #4    
      Old April 17th, 2013 (5:07 PM).
      Pichu2Pikachu2Raichu's Avatar
      Pichu2Pikachu2Raichu Pichu2Pikachu2Raichu is offline
      Yep, that's me
      • Silver Tier
       
      Join Date: Mar 2013
      Location: Hastings, New Zealand
      Age: 27
      Nature: Naughty
      Posts: 309
      Quote:
      Originally Posted by KingCharizard View Post
      Thanks I'll try your suggestion, I dont use tables myself anymore. I switched to using only css, I am good at HTML5 XHTML, XML, CSS, PHP etc.. lol basically I can develop my butt off but my design skills well they are like im a 60 year old man lol. I dont want to hire a designer for my freelance work so I need to get at least moderately good enough...

      can you tell me more about what you mean by "web based web design school", and how would it be free. is it a site like w3schools?

      If so I dont need programming help, just design help..

      here is an example of one of my crappy designs https://dl.dropboxusercontent.com/u/36346467/temp/index.html
      ROTFL, that site is blocked at my work Proxy server is like NA-AH hahaha (I hate it)! Ahaha lol.

      Yeah use ya
      tags nowadays, links back to the CSS :D

      As for helping you with designing, dont even try, I suck at helping others at designing. And no it's not like w3schools, it's using HTML5 at the mo and is currently in the Chrome experiments list. You might have to look hard for it.
      Reply With Quote
        #5    
      Old April 18th, 2013 (1:20 AM). Edited April 18th, 2013 by Archenoth.
      Archenoth's Avatar
      Archenoth Archenoth is offline
      The arch foe
         
        Join Date: Jan 2012
        Gender: Male
        Nature: Lonely
        Posts: 467
        Heyas KingCharizard...

        Making good designs is really less about the content, and more about user interface design principles. For example, how one would encourage or explain certain actions if there were no text. (Visual cues, icons, etc...) Or common locations for UI elements of different types.

        If you wish to modernize your design skills, you'll need to think about how a user will look at the site. For example, how wide do you think a user would like to read content that is filled in your page? What kind of content do you think people would expect, and where? What would be most familiar to your grandmother?

        I recommend you familiarize yourself with the concepts listed here: http://en.wikipedia.org/wiki/Principles_of_user_interface_design
        This is also a good article: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
        And another: http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
        And this is a pretty nice reference if you get stuck: http://ui-patterns.com/

        Design is an art, so can't really treat it like development. You will find yourself using many of the same concepts other sites do, this is because you want your design to be intuitive, and one thing that people find intuitive is familiarity.

        Also looking through what you've linked I noticed this:
        I also noticed a similar message at the top of your CSS, which is primarily filled with ID selectors, so I presume that is what you were referencing? You'll need to be careful if you keep this mentality since you can really shoot yourself in the foot if you set the same ID for more than one thing. (Could really screw up JavaScript element references in libraries like jQueryUI for example.)
        Reply With Quote
          #6    
        Old April 18th, 2013 (6:48 AM).
        KingCharizard's Avatar
        KingCharizard KingCharizard is offline
        C++ Developer Extraordinaire
           
          Join Date: Dec 2009
          Location: Pennsylvania
          Age: 29
          Gender: Male
          Nature: Bold
          Posts: 1,250
          @Archenoth

          Very good links, I especially loved the smashing magazine article. But I always love their articles. Nice advice too. While I know the philosophy "If it ain't broke don't fix it" I dont want to just follow and copy the intuitive designs that work well for others. I feel my work should be unique, it should feel like me. It should stand out on its own and when someone sees it they say I know who made that. Kinda like when others look at the way you code they can sometimes tell who wrote it.

          I understand its not gonna happen over night, I am willing to put in the time and effort but I dont really know where to start I guess. The links you've provided are a good start and they have been informative. So thanks.

          About the Id's and the naming conventions I use, I don't like the idea of a name being allowed to be used twice, I feel it's sloppy. I understand the risks with using Id's instead of classes but I still plan to use Id's. If I make a mistake in my code, its because I got lazy or sloppy.
          Reply With Quote
            #7    
          Old April 18th, 2013 (3:54 PM).
          Archenoth's Avatar
          Archenoth Archenoth is offline
          The arch foe
             
            Join Date: Jan 2012
            Gender: Male
            Nature: Lonely
            Posts: 467
            Quote:
            Originally Posted by KingCharizard View Post
            Very good links, I especially loved the smashing magazine article. But I always love their articles. Nice advice too. While I know the philosophy "If it ain't broke don't fix it" I dont want to just follow and copy the intuitive designs that work well for others. I feel my work should be unique, it should feel like me. It should stand out on its own and when someone sees it they say I know who made that. Kinda like when others look at the way you code they can sometimes tell who wrote it.
            I share this sentiment... But I think you're getting me wrong here. Guidelines to a good UI are things that I definitely recommend you to try to apply. But even if you follow those, it really doesn't limit your own creative abilities or coding style. Granted it can mean more work for you if you wish to stay within a particular set of stylistic choices within your code, but these rough edges are often a sharpening block for you to develop a more defined and efficient coding style.

            It may be a lot of work depending on your style to make tweaks and modifications to your layouts though. Sometimes it's actually easier to try to work out your interfaces in something like Photoshop, then building it in HTML. That way you can see how elements can be positioned, and what they will look like with minimal effort. (Presuming you utilize layers heavily of course.)

            Quote:
            Originally Posted by KingCharizard View Post
            I understand its not gonna happen over night, I am willing to put in the time and effort but I dont really know where to start I guess. The links you've provided are a good start and they have been informative. So thanks.
            No problem..! There are quite a number of UI design articles and blogs out there, the things I linked you to are a good start, granted, but reading up on practices and then applying them is the best practice you can get. And I mean literally going through blogs and articles, point by point, and trying to utilize everything they suggest on something at least a few times in a few different ways.

            The next time you hack up a little test project or want to try out some new JavaScript code, try making a good interface around it. Wonder how to use a new API? Test it out and give it a good interface. Do this with everything.

            If you are dedicated, you will become good at it in no time..!

            Quote:
            Originally Posted by KingCharizard View Post
            About the Id's and the naming conventions I use, I don't like the idea of a name being allowed to be used twice, I feel it's sloppy. I understand the risks with using Id's instead of classes but I still plan to use Id's. If I make a mistake in my code, its because I got lazy or sloppy.
            Classes and IDs are used for very different things. Classes are things that you can use anywhere for style or code functionality purposes, whereas IDs are definite anchors to particular elements. How you separate your CSS between the two is a large part of making modular CSS. For example, I commonly have highly general CSS classes that I can add to things, like an "error" class that will turn text red, or if it is a particular type of element, to draw a little warning sign next to it. Another common one is "loading" which will change the background with a pulser animation to indicate something is in progress.

            That way if there is an error in validation, the only thing I have to do is get a handle on the element and add the class "error". Also if I am waiting for an AJAX call to return I can set the "loading" class when it starts, and remove it when it's done.

            You can automate an awful lot with CSS classes, because you can use them to reference hierarchies too, so you can have a selector for "div.someclass div.content" to act on anything that was below that element with the class. This means you can make huge graphical changes with a simple adding or removing of a single class from an element.

            Don't neglect tools if they prove useful.
            Reply With Quote
              #8    
            Old April 18th, 2013 (4:21 PM).
            KingCharizard's Avatar
            KingCharizard KingCharizard is offline
            C++ Developer Extraordinaire
               
              Join Date: Dec 2009
              Location: Pennsylvania
              Age: 29
              Gender: Male
              Nature: Bold
              Posts: 1,250
              Quote:
              Classes and IDs are used for very different things. Classes are things that you can use anywhere for style or code functionality purposes, whereas IDs are definite anchors to particular elements. How you separate your CSS between the two is a large part of making modular CSS. For example, I commonly have highly general CSS classes that I can add to things, like an "error" class that will turn text red, or if it is a particular type of element, to draw a little warning sign next to it. Another common one is "loading" which will change the background with a pulser animation to indicate something is in progress.

              That way if there is an error in validation, the only thing I have to do is get a handle on the element and add the class "error". Also if I am waiting for an AJAX call to return I can set the "loading" class when it starts, and remove it when it's done.

              You can automate an awful lot with CSS classes, because you can use them to reference hierarchies too, so you can have a selector for "div.someclass div.content" to act on anything that was below that element with the class. This means you can make huge graphical changes with a simple adding or removing of a single class from an element.

              Don't neglect tools if they prove useful.
              Very good points, especially the error one.

              Another thing I've been considering is following photoshop tutorials about template design. Even though its copying it can give me a better feel for interface/ui design. My project I've been working on now is making a registration/login system with form/processing to log into a simple page. Nothing extreme just enough to design a good login/registration system. Mainly so I can focus on the design.

              Anyone else have any helpful advice or links?
              Reply With Quote
                #9    
              Old April 18th, 2013 (6:44 PM).
              Archenoth's Avatar
              Archenoth Archenoth is offline
              The arch foe
                 
                Join Date: Jan 2012
                Gender: Male
                Nature: Lonely
                Posts: 467
                Quote:
                Originally Posted by KingCharizard View Post
                Very good points, especially the error one.

                Another thing I've been considering is following photoshop tutorials about template design. Even though its copying it can give me a better feel for interface/ui design. My project I've been working on now is making a registration/login system with form/processing to log into a simple page. Nothing extreme just enough to design a good login/registration system. Mainly so I can focus on the design.

                Anyone else have any helpful advice or links?
                Cool beans. I say go for it..! The more you know, the more you can make your own style a good one.

                As for other advice, I can't really say I have too much for just things in general, but I can certainly help out if you want to ask me about something in specific. The only real advice I can say right now is, if you haven't already, get familiar with IRC. It is one of the best places to get help on pretty much any coding topic, including CSS and design. And if IRC fails you, a well-worded and unique question on StackOverflow will almost always get a good answer.

                Though I must ask...

                Since this is a login system, will this include any server-side coding? Because if so, you should also take a look into proper cryptography for storing passwords. It pretty much boils down to multi-hashing with a salt, because it is incredibly easy to bruteforce most types of hashes.

                This little bit of PHP code is often the type I like to use (Often with some variation, sometimes even a loop for a hash factor to make it scalable.):
                Code:
                function password($password){
                  return md5(sha1($password . $this->salt) . $this->salt);
                }
                $salt is a constant string that no one will know except for you, the developer. And $password is the password you wish to hash.

                Either way, good luck..!
                Reply With Quote
                  #10    
                Old April 19th, 2013 (12:14 AM).
                Pixadom Pixadom is offline
                   
                  Join Date: Apr 2013
                  Gender: Male
                  Posts: 17
                  Take a look at the major websites such as Google, Facebook, etc and you'll notice they all usually stay along the same lines - that is, that they all keep things extremely simple with subtle designs. Most notably, they use light colors for most of the elements on the page with an accent color.

                  Eg. On Facebook, everything is light grey / white / light blue, with a Dark Blue header and Dark Blue buttons as accent colors.

                  On Google, it's quite similar, light greys, whites, and a blue accent color with a dark header.

                  Also, try to keep it consistent. If you use rounded corners, make sure you don't throw in square boxes which may throw off the design (unless you intended to square it up a bit in some spots).

                  Best of luck!
                  __________________


                  PIXADOM - FREE ONLINE 2D PIXEL MONSTER MMORPG

                  Pixadom is a free 2D online pixel MMORPG where you can fight monsters, meet new people, chat and play games, explore the virtual Pixadom world, battle with other players, complete quests, earn XP, and more!
                  Reply With Quote
                    #11    
                  Old April 26th, 2013 (3:16 PM).
                  droomph's Avatar
                  droomph droomph is offline
                  weeb
                  • Crystal Tier
                   
                  Join Date: Sep 2011
                  Location: nowhere spectacular
                  Age: 20
                  Gender: Male
                  Nature: Impish
                  Posts: 4,291
                  Okay, I'm not a "professional designer", but I have to say that I'm kinda experienced, having made a couple pages I'm proud of.

                  So I may not know the ins and outs of this business, but I just look at it this way - what would you customers or people using this want? Do they want Times New Roman 404 text on a white background? Or do they want something sleek and simple?

                  Start off with this - find a…"sleek" font.

                  -----

                  This is not sleek. It's default, and kinda boring.

                  …okay, I don't know what's so bad about it. But it's just not "special" and doesn't have THAT feel.


                  This is my personal favorite. Sans-serif fonts in general fall into this category.

                  This is for older computers - if you're a cutting-edge, high-res website, this is probably the worst thing you can do to your website. However, it's best to use if you know for sure that smaller, low-res monitors will browse your website most of the time.

                  This is a good example of a "sleek" serif font. I don't know why, but it just looks, I guess, manly?

                  Every font has its own feeling. Choose which one speaks to your website's goals the "best".

                  -----

                  Then, move on to the boxes around it. Do you want it round, or do you want it straight corners?

                  Then the background. Search up on Google, and find some pictures. Make sure to keep down the website you took them from, because if not, you'll run into a lot of legal trouble. But besides that, what do you want to have on the background? If not to use them explicitly, at least to give you an idea of what you want.

                  Lastly, remember to update often. Every time you add a new line or text box, remember to check it out in the context of your website. That's why I like to work in a desktop app so much - you just need to click it once, and it refreshes for you. Although for a program, it's different, but still.

                  …that's about as much as I know.
                  __________________
                  did u no there r 21 letters in the alphabet
                  o i forgot 5
                  uraqt


                  Reply With Quote
                    #12    
                  Old April 27th, 2013 (1:02 PM). Edited April 27th, 2013 by Archenoth.
                  Archenoth's Avatar
                  Archenoth Archenoth is offline
                  The arch foe
                     
                    Join Date: Jan 2012
                    Gender: Male
                    Nature: Lonely
                    Posts: 467
                    Quote:
                    Originally Posted by droomph View Post
                    This is for older computers - if you're a cutting-edge, high-res website, this is probably the worst thing you can do to your website. However, it's best to use if you know for sure that smaller, low-res monitors will browse your website most of the time.
                    Yeah, I'd actually advise you'd avoid Comic Sans MS. Many people rage when they see that font.

                    Quote:
                    Originally Posted by droomph View Post
                    Then the background. Search up on Google, and find some pictures. Make sure to keep down the website you took them from, because if not, you'll run into a lot of legal trouble. But besides that, what do you want to have on the background? If not to use them explicitly, at least to give you an idea of what you want.
                    If you have an idea of what you are going for for a background (Like maybe some small dithering texture.) it's usually pretty easy to quickly hack up one in Photoshop or GIMP...

                    If you are looking for a background that emphasizes on shapes or lines, vectoring is a very useful skill to have too. (With Illustrator or Inkscape.)

                    Usually taking things off the web unless they are specifically marked as "stock" is a bad idea unless it's for a single page deal like an article.
                    Reply With Quote
                      #13    
                    Old April 27th, 2013 (1:40 PM).
                    droomph's Avatar
                    droomph droomph is offline
                    weeb
                    • Crystal Tier
                     
                    Join Date: Sep 2011
                    Location: nowhere spectacular
                    Age: 20
                    Gender: Male
                    Nature: Impish
                    Posts: 4,291
                    Quote:
                    Originally Posted by Archenoth View Post
                    Yeah, I'd actually advise you'd avoid Comic Sans MS. Many people rage when they see that font.
                    It actually looks better under low-res monitors, so keep that in mind.
                    Reply With Quote
                      #14    
                    Old April 27th, 2013 (2:30 PM).
                    Archenoth's Avatar
                    Archenoth Archenoth is offline
                    The arch foe
                       
                      Join Date: Jan 2012
                      Gender: Male
                      Nature: Lonely
                      Posts: 467
                      Quote:
                      Originally Posted by droomph View Post
                      It actually looks better under low-res monitors, so keep that in mind.
                      Not really...
                      Spoiler:
                      Reply With Quote
                        #15    
                      Old April 27th, 2013 (3:33 PM).
                      droomph's Avatar
                      droomph droomph is offline
                      weeb
                      • Crystal Tier
                       
                      Join Date: Sep 2011
                      Location: nowhere spectacular
                      Age: 20
                      Gender: Male
                      Nature: Impish
                      Posts: 4,291
                      Quote:
                      Originally Posted by Archenoth View Post
                      Not really...
                      Spoiler:
                      erm, sorry. Anti-aliased.





                      Which is primarily used in old computers.

                      However that's not the only one with good aliasing, so…awks
                      Reply With Quote
                        #16    
                      Old April 28th, 2013 (7:04 PM).
                      KingCharizard's Avatar
                      KingCharizard KingCharizard is offline
                      C++ Developer Extraordinaire
                         
                        Join Date: Dec 2009
                        Location: Pennsylvania
                        Age: 29
                        Gender: Male
                        Nature: Bold
                        Posts: 1,250
                        how did this become a discussion about fonts?

                        But serious guys, im in serious need of a designer.. I just cant do this whole design crap, here is something I came up with today that to me looks good in theory just in reality it just plan sucks..

                        What do you guys think?

                        https://dl.dropboxusercontent.com/u/36346467/HippoZoned/index.html
                        Reply With Quote
                          #17    
                        Old April 28th, 2013 (7:12 PM).
                        droomph's Avatar
                        droomph droomph is offline
                        weeb
                        • Crystal Tier
                         
                        Join Date: Sep 2011
                        Location: nowhere spectacular
                        Age: 20
                        Gender: Male
                        Nature: Impish
                        Posts: 4,291
                        Quote:
                        Originally Posted by KingCharizard View Post
                        how did this become a discussion about fonts?
                        Fonts are actually a very big part of design. They convey your attitude towards the site better than the actual content that they're spelling out.

                        Quote:
                        Originally Posted by KingCharizard View Post
                        But serious guys, im in serious need of a designer.. I just cant do this whole design crap, here is something I came up with today that to me looks good in theory just in reality it just plan sucks..

                        What do you guys think?

                        https://dl.dropboxusercontent.com/u/36346467/HippoZoned/index.html
                        Start with a box filling your entire content area. Make it something you like.

                        Then, think of every individual box you need to carry out your intended tasks.

                        Then, keep on perfecting each of those boxes.

                        I don't know if this helps, but basically, just take it step by step.
                        Reply With Quote
                          #18    
                        Old April 28th, 2013 (7:17 PM).
                        KingCharizard's Avatar
                        KingCharizard KingCharizard is offline
                        C++ Developer Extraordinaire
                           
                          Join Date: Dec 2009
                          Location: Pennsylvania
                          Age: 29
                          Gender: Male
                          Nature: Bold
                          Posts: 1,250
                          Quote:
                          Originally Posted by droomph View Post
                          Fonts are actually a very big part of design. They convey your attitude towards the site better than the actual content that they're spelling out.



                          Start with a box filling your entire content area. Make it something you like.

                          Then, think of every individual box you need to carry out your intended tasks.

                          Then, keep on perfecting each of those boxes.

                          I don't know if this helps, but basically, just take it step by step.
                          TBH I dont even know what your talking about, did you look at my design? Is that what your talking about.. now im even more comfused.. This is why I hate designing stuff, give me a coding task any day and I'm happy
                          Reply With Quote
                            #19    
                          Old May 1st, 2013 (7:24 PM).
                          droomph's Avatar
                          droomph droomph is offline
                          weeb
                          • Crystal Tier
                           
                          Join Date: Sep 2011
                          Location: nowhere spectacular
                          Age: 20
                          Gender: Male
                          Nature: Impish
                          Posts: 4,291
                          Quote:
                          Originally Posted by KingCharizard View Post
                          TBH I dont even know what your talking about, did you look at my design? Is that what your talking about.. now im even more comfused.. This is why I hate designing stuff, give me a coding task any day and I'm happy
                          Yeah, I did. And to be honest, it wouldn't have mattered.

                          Design is basically a huge box, with many smaller boxes. If you focus on each of the pieces (boxes), it gets a lot less complicated.
                          Reply With Quote
                            #20    
                          Old May 2nd, 2013 (6:58 AM).
                          KingCharizard's Avatar
                          KingCharizard KingCharizard is offline
                          C++ Developer Extraordinaire
                             
                            Join Date: Dec 2009
                            Location: Pennsylvania
                            Age: 29
                            Gender: Male
                            Nature: Bold
                            Posts: 1,250
                            i get what ur saying but that doesnt really help if you dont know how to position those boxes, how to make them look their best together, your way to me me just confuses me more nd make it harder
                            Reply With Quote
                              #21    
                            Old May 2nd, 2013 (4:08 PM).
                            Archenoth's Avatar
                            Archenoth Archenoth is offline
                            The arch foe
                               
                              Join Date: Jan 2012
                              Gender: Male
                              Nature: Lonely
                              Posts: 467
                              Quote:
                              Originally Posted by KingCharizard View Post
                              how did this become a discussion about fonts?

                              But serious guys, im in serious need of a designer.. I just cant do this whole design crap, here is something I came up with today that to me looks good in theory just in reality it just plan sucks..

                              What do you guys think?

                              https://dl.dropboxusercontent.com/u/36346467/HippoZoned/index.html
                              You need to use less clashing colors, like that black on a grey gradient is difficult to see. Also black on grey or darker blue? Same deal.
                              Also using a backshadow onto a white background that happens to be part of a container looks bad.
                              Also moving elements that are unrelated on hover is usually a bad idea.
                              More defined margins would also be a good idea because the unaligned elements look messy.
                              The links bar is also indistinguishable from the body because they are one and the same... You should separate these.
                              And finally, if you look at this at high or low resolutions, the element placement becomes incredibly skewed. (I posted screenshots below)

                              Spoiler:
                              Zoomed in:

                              Zoomed out:


                              What I would recommend is to change the color scheme to have more contrast, to add more structure to the element placement, to have more defined borders between elements, and to rethink the scaling and spacing of your elements for larger and smaller screen resolutions.
                              Reply With Quote
                                #22    
                              Old May 2nd, 2013 (4:26 PM).
                              seeker's Avatar
                              seeker seeker is offline
                              Electric
                              • Platinum Tier
                               
                              Join Date: Apr 2009
                              Location: Ireland
                              Posts: 10,831
                              Okay, before you question my opinions, I do this for a living and have qualifications from W3Schools in 3 languages, on top of studying this as my major. But if you want to be a web developer, you need to actually be able to design. There's no two ways about it, a client is very, very rarely going to come to you with a design already at hand. Reason being, people don't want to pay two different designers to work on their site, they want to have one person to do it all. So what I'd recommend is studying the the most important parts of web design, you can't actually go into a design blind and say "yeah that looks good". There's at least 9 important principals you need to consider. Most of which are seen here. Don't bother learning to code full websites until you learn the elements of design required to do them.

                              Knowing the code is all well and good, but if you don't know how to use it, there's no point. Pretty much everything in the tutorial I linked above is to do with the design and not the code. Coding a website (overly complex ones aside) is only about 20% of the importance. The ability to use CSS/HTML is commonplace nowadays on the web, however the ability to design is much more sought after. Start with that page, look up some other tutorials on Google for design advice.
                              __________________
                              she's the greatest adventure I'll ever know
                              Reply With Quote
                                #23    
                              Old May 2nd, 2013 (5:06 PM). Edited May 2nd, 2013 by Archenoth.
                              Archenoth's Avatar
                              Archenoth Archenoth is offline
                              The arch foe
                                 
                                Join Date: Jan 2012
                                Gender: Male
                                Nature: Lonely
                                Posts: 467
                                Quote:
                                Originally Posted by Abnegation View Post
                                But if you want to be a web developer, you need to actually be able to design.
                                I doubt anyone has any objections to this... Because, well, this is what he is trying to do in the first place... *Points at thread title.* :^

                                I will say though, that seems like a good link..!
                                Reply With Quote
                                  #24    
                                Old May 3rd, 2013 (2:15 AM). Edited May 3rd, 2013 by KingCharizard.
                                KingCharizard's Avatar
                                KingCharizard KingCharizard is offline
                                C++ Developer Extraordinaire
                                   
                                  Join Date: Dec 2009
                                  Location: Pennsylvania
                                  Age: 29
                                  Gender: Male
                                  Nature: Bold
                                  Posts: 1,250
                                  Quote:
                                  Originally Posted by Abnegation View Post
                                  Okay, before you question my opinions, I do this for a living and have qualifications from W3Schools in 3 languages, on top of studying this as my major. But if you want to be a web developer, you need to actually be able to design. There's no two ways about it, a client is very, very rarely going to come to you with a design already at hand. Reason being, people don't want to pay two different designers to work on their site, they want to have one person to do it all. So what I'd recommend is studying the the most important parts of web design, you can't actually go into a design blind and say "yeah that looks good". There's at least 9 important principals you need to consider. Most of which are seen here. Don't bother learning to code full websites until you learn the elements of design required to do them.

                                  Knowing the code is all well and good, but if you don't know how to use it, there's no point. Pretty much everything in the tutorial I linked above is to do with the design and not the code. Coding a website (overly complex ones aside) is only about 20% of the importance. The ability to use CSS/HTML is commonplace nowadays on the web, however the ability to design is much more sought after. Start with that page, look up some other tutorials on Google for design advice.

                                  Thanks for the link, there is just so much crap that has to be taken into account when designing. If you ask me its more complicated than programming. Atleast in programming you have a goal, you know what you have to do and you have a few ways to get thre, or sometimes you just have the direct way. Either way picking up this design stuff is going to be harder than I thought. I wish I had the money to take a good design course..

                                  I really dont understand how people can expect you to do both. The programming on a site can get pretty complicated, then they want you to design their site too? SMH.. oh well I'll get this.


                                  EDIT: I am reading some articles that made me realize I'm going about the design process all wrong, my main problem is im trying to rush/force it..
                                  Reply With Quote
                                    #25    
                                  Old May 3rd, 2013 (2:36 PM).
                                  Archenoth's Avatar
                                  Archenoth Archenoth is offline
                                  The arch foe
                                     
                                    Join Date: Jan 2012
                                    Gender: Male
                                    Nature: Lonely
                                    Posts: 467
                                    Well there is value in simplicity, or perceived simplicity...

                                    One thing you are going about all wrong is how you are attempting to go about accenting elements...

                                    http://jsfiddle.net/aZn2a/2/

                                    I quickly hacked this up for someone a few days ago when I was attempting to explain the "Cascading" part of Cascading Style Sheets, but it also serves as a good example of accenting. Do you see how simple the elements in this page look? And how they change when you click on one or another? What about the visual cues? when mousing over elements or clicking?

                                    No matter how complex the interface or backend work, a good UI can make it look simple. (Which granted, this is...)

                                    For example, this is the layout of one of my previous projects: (Somewhat outdated shot with junk test information.)
                                    Spoiler:


                                    Notice how elements are laid out? Spaced? Separated? (Very different from spaced.) Accented? Contrasted?

                                    When you design something you need to draw attention away from the UI, because the best UIs are the ones that don't get in the way. You can't rush these things, it takes time to make a UI that both appears good and is usable.
                                    Reply With Quote
                                    Reply

                                    Quick Reply

                                    Join the conversation!

                                    Create an account to post a reply in this thread, participate in other discussions, and more!

                                    Create a PokéCommunity Account

                                    Sponsored Links
                                    Thread Tools

                                    Posting Rules
                                    You may not post new threads
                                    You may not post replies
                                    You may not post attachments
                                    You may not edit your posts

                                    BB code is On
                                    Smilies are On
                                    [IMG] code is On
                                    HTML code is Off

                                    Forum Jump


                                    All times are GMT -8. The time now is 2:40 AM.