1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Best approach to figuring out a website layout?

Discussion in 'HTML & Website Design' started by Venire, May 16, 2017.

  1. #1
    Often times when I have just started working on a website-related project, I try my best to limit the amount of features when just starting out. Fewer features means fewer components, and that's where my problem comes in. I really struggle with figuring out how to lay out certain components of my website because I have such a small amount of components. I feel like I have to add more features just to fill up the white space on my website design.
    SEMrush
    Do you guys have a good approach to figuring out a layout structure for your web design projects? Share your methods please, that would be great. :)
     
    Solved! View solution.
    Venire, May 16, 2017 IP
    SEMrush
  2. MarieCLark

    MarieCLark Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Hey there! Website design is not easy as it seems to be. It takes a lot of effort to create a website with a best a layout. To start from scratch, firstly, place all your thoughts of web design on a paper. Design is about solving problems, and those problems can't be resolved through gradients or shadows but rather through a good layout and a clear hierarchy. Secondly, Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – and if you don't, I can assure you, the design won't look as good. Thirdly, The simpler the structure of the site, the easier it is for users to navigate. Divide your website in layouts. These small but effective tips would help you out in creating a website with best layout.
     
    MarieCLark, May 18, 2017 IP
  3. #3
    When you start saying "components" I start to cringe, as to me that's thinking in terms of goofy features of some trash off the shelf CMS, and not focusing on what's REALLY important, your content.

    But this all comes down to what you consider to be "design' -- if you're talking about dicking around in a paint program and then turning that goofy PSD into a website, that's NOT design.

    Realistically, the layout side of things "should just happen" -- AFTER you've created your content or a reasonable facsimile of future content. This is because a PROPERLY developed website should start out in a flat text editor AS IF EVEN HTML, CSS, AND EVEN GRAPHICAL LAYOUT DIDN'T EXIST organized in an order that makes sense. That's it, just your text, maybe a reference like {place image of whatever here}, and that's all.

    THEN you mark it up semantically, saying what things ARE and NOT what you want them to look like. That's HTML's job identifying things not just for visual users, but for non-sighted users as well -- which plays well not just on accessibility to those of limited/no vision, but to search as well. Remember, search engines don't have eyeballs so they could really give a flying **** about your 'layout'. What order things are in and how you identify them (this is a heading, this is a list, this is a paragraph, this is my rifle this is my gun) is more important. BECAUSE that's the semantics stage you really shouldn't even HAVE <div> or <span> much less classes, since those are hooks for presentation WITHOUT saying what that presentation is. Also if you use numbered headings and horizontal rules properly, HTML 5's halfwit idiotic "structural" tags of header, footer, section, article, main, and aside are pointless redundancies or worse, PRESENTATIONAL markup, not semantic!.

    Only once you have that should you bend that markup to your will with CSS, adding DIV, SPAN, and classes where and only as needed to create your layoutS -- YES, PLURAL! Adjust the content to best fit the available screen space adjusting the window size to test for different screen sizes, creating media queries to adjust that layout where/as needed either adding or removing layout elements like columns and alignments.

    ONLY THEN once that is completed should one even be THINKING about dicking around with colours, presentational images, or other such "window dressing".

    ... and that's why MOST of the sleazeball scam artists out there calling themselves "web designers" are full of shit. They're graphic artists dicking around making PSD's, NOT actual designers.
     
    deathshadow, May 19, 2017 IP
  4. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    45
    #4
    You want to focus on the content and the action if there is any, rest are not needed.
     
    Rokis, May 20, 2017 IP
  5. Venire

    Venire Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thank you very much for your input. Yes, I definitely understand that website design is a hard thing to do!

    Hey, thanks for your long reply! When I refer to components, I'm actually referring to the HTML elements themselves. When I read my post just now, I found it very cringey, the way I used the word "component" several times in one sentence.

    I really resonate with this approach. I checked out the Minimalist Semantic Markup website, and I'm really liking what I see so far. I am aware that design is more than just the aesthetics.

    Thanks again!

    Thanks for your input, and I totally agree with you. :)
     
    Venire, May 24, 2017 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,408
    Likes Received:
    1,502
    Best Answers:
    220
    Trophy Points:
    515
    #6
    This article in particular may be of interest to you:
    http://www.cutcodedown.com/article/progressive_enhancement

    Since it actually walks you through doing what I outlined above with an example site.
     
    deathshadow, May 24, 2017 IP