SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 53
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginning Website design

    Hi! I'm new here and I've just started learning making websites. I've just finished reading Building Your Own Website The Right Way Using HTML and CSS by Ian Lloyd and I wanted to start implementing ideas for a sample website. My end goal here is to be able to create a website/website template that will pass the standards the likes of Themeforest.

    But my dilemma in starting doing a sample website/website template is, I get confused on what are the basic parts of the website that should be present? By parts I mean the pages present in the website like home/index page, contact page. etc and their respective features present. (Generally speaking regardless of what type of website is to be implemented.)

    GAAHH!! I'm sorry if I'm confusing, I'm confused too. I just don't know what to do. Is there a general flight plan in web design? I'm already reading the books suggested by Ian Lloyd and I see nothing at all. Is this the case of information overload?

    I'm really sorry again. But thank you for all you future help and suggestions.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi razzler. Welcome to SitePoint.

    Quote Originally Posted by razzler View Post
    I get confused on what are the basic parts of the website that should be present? By parts I mean the pages present in the website like home/index page, contact page. etc and their respective features present.
    Even though there appears to be a formula for websites, really it is the content that a site needs to present that should dictate the structure and features. That's the problem with themes: you end up forcing content where it doesn't really fit. I guess the best thing to do is to design something flexible enough that it can accommodate whatever is needed. Have a look at how others do templates and see what they do and don't include.

    To be honest, it seems a little ambitious to jump from a beginner book straight to creating templates for sale. The ideal would be to build a few sites first and get used to working with HTML and CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can visit this sites. its help me lot http://www.w3schools.com

  4. #4
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    To be honest, it seems a little ambitious to jump from a beginner book straight to creating templates for sale.
    No, I was thinking that if they were on such sites like themeforest the standards they adhere must be pretty high. I thought working on something to achieve the same level of those templates will help me in establishing a good foundation and practices on web design.

    By the way, thank you. I more or less understand now that a design of a website depends on the content to be presented.

    The ideal would be to build a few sites first and get used to working with HTML and CSS
    Are there types of website designs that I should try my hand on re-creating to help me harness my skills? And is creating the website on Photoshop then embedding the HTML/CSS the norm because in the book, it says it's best to harness the "full power" of CSS?

    Thanks again!

  5. #5
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey there, great that you're getting into web development, it's great fun!

    To answer your first question, as ralph said, the different pages depend on the scope of the project, meaning what is required. If it's a small business for example, or an individual (artist, painter etc.) they often only need a simple frontpage (your index page) and maybe a contact page (with contact information or a form to send them a message) and a gallery perhaps.

    As for themeforest, I don't personally know that site, but mostly premade themes come with one or two "sample" pages (possibly like the ones mentioned above) which can be (for example yet again!): A frontpage, a sample text page and a sample form page. The good thing about a sample text page and frontpage, is that developers can very easily transform the design into a dynamic content page (which you will quickly learn when you get more into webdev.) which can then hold any content that is fetched from a database.

    So if you create a sample text page design, a developer can purchase or use your template, change the text into a dynamic textbox and use the same template for mutliple pages! So if there's an about us and a contact information page for example, they can be using the exact same template while just "grabbing" different content from a database.

    Hope that's not too confusing

    As for CSS, it's absolutely true that using the "full power" of it is the way to go, basically you want to use CSS as much as possible instead of using direct images from Photoshop. Partly because of performance (text loads a lot faster because it's smaller in size than images) and for the usability, and in the future even SEO (Search Engine Optimization) of a website.

    My advice is, start building some simple pages with a few content containers to practice HTML and CSS. CSS is a "Cascading Style Sheet" meaning that the different elements "rely and inherit from eachother", it's a bit like building a house brick by brick and the only real way to learn it is to work with it to get the feel of how that works.

    Phew.. sorry for the long post! But as you can tell, and as ralph said, there's no "formula" to building websites! It's our jobs as developers to listen to the customer/plan the project in the best way (again just like an architect would plan a building site).

    Hope this hasn't scared you away from web design!

    /behati

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by razzler View Post
    is creating the website on Photoshop then embedding the HTML/CSS the norm
    Some people design a layout in Photoshop, then slice a lot of that up and use it on the web, but more and more people are (rightly) turning away from this workflow and designing in the browser itself. Photohop isn't a web design tool. It's handy for creating graphics, no doubt, but it really has nothing to do with web design, so is better kept out of the picture. Photoshop can only create fixed, static images, and the web is a fluid environment where page elements need to be able to stretch and expand. So as behati says, put your focus on HTML and CSS, as these are the real page layout tools for the web.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! I appreciate it! I'm rev up more than ever to start practicing my newly acquired HTML/CSS skills. I'll keep you updated on my "forays". This forum helps a lot in soothing the frazzled and the confused!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad to hear it, razzler. Do keep us up to date, and good luck! We enjoy the questions.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Glad to hear it, razzler. Do keep us up to date, and good luck! We enjoy the questions.
    They are strangely addicting, yes.... Good luck razzler

  10. #10
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your better off to start with a wordpress theme and then go in the back end and do minor html changes to it. Wordpress offers a lot out there now to fit any time of web site you need.

  11. #11
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Build a basic website in the raw a couple of times. At first it might take a couple days to do. Eventually you will grasp it after doing it a few times. There are hundreds of tutorials online that you no longer have to purchase a book. w3schools.com is a good place for reference. A quick Google search will fill the gaps.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    My suggestion would be to build a few practice sites for real people, even if there's no intention of putting those sites on-line. In other words, think of a real-life group - your granny's knitting group, your uncle's Scout company, your sister's ballet class, whatever - and imagine you're building a site for them. Once you have a real-life example in mind, it's easier to decide what kind of information will go on the site, and how that should be organised into pages.

    I would disagree with w3schools as a reference - try the SitePoint references instead, as they're generally more accurate.

  13. #13
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there any website from which i can get tips for making a website design?

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really don't think there is any substitute for simply getting your feet wet once you have the basic knowledge to get going. I've been doing HTML/CSS for years now and still refer back to books and w3cschool for syntax so don't feel like you're not "good enough". Generally, you should ask yourself why started getting into web development as a hobby to begin with. Obviously, you're reading the book on your own, perhaps you had a website idea in mind. Go ahead and get after it, start building your website. When you get stuck, ask!

  15. #15
    SitePoint Zealot coloradojaguar's Avatar
    Join Date
    Sep 2011
    Location
    Southwestern Mountains
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w3schools is perhaps one of the best first learning sources if you are a true beginner. You may also want to get a basic free web editor and go back and forth between the HTML view and the browser view. This method helped me to understand how what I was doing in the background would appear to a viewer as I performed it. Don't over look the videos that are also available on YouTube and of course it is more than helpful to find a good design forum and make a few friends. It never hurts to ask.
    Last edited by Paul O'B; Feb 25, 2012 at 15:20. Reason: delinked
    Hosted solutions provider since 1998 - UK, Atlanta, L.A.,
    JaguarPC.com - Managed Hybrid Servers |
    Managed VPS Hosting | Dedicated Servers

  16. #16
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    My suggestion would be to build a few practice sites for real people, even if there's no intention of putting those sites on-line. In other words, think of a real-life group - your granny's knitting group, your uncle's Scout company, your sister's ballet class, whatever - and imagine you're building a site for them. Once you have a real-life example in mind, it's easier to decide what kind of information will go on the site, and how that should be organised into pages.

    I would disagree with w3schools as a reference - try the SitePoint references instead, as they're generally more accurate.
    Yes...although w3schools was my first learning tool, they are somewhat incomplete (although inaccuracy was never a problem). They're a quick reference for me, but I wouldn't use them as a go-to.

    The website is dependent on the client, not on universal standards. The client defines the webpage.

    ~TehYoyo

    Note: Whenever I see an expert do something (or in your case, read about an expert doing something), I get really inspired and try to do what they do...and fail epically. Then I get discouraged. I pseudo-guarantee that this will happen to you. Just keep pluggin' away...or, if Sitepoint Forums can substitute for a psychologist, post here. I'm sure we can pull some help out of our back pockets.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by coloradojaguar View Post
    w3schools is perhaps one of the best first learning sources .
    This might be of interest.

  18. #18
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Themeforest has a guide.

    Hey dude. Glad you're doing the work. Check this resource out though:

    http://blog.themeforest.net/screenca...rockstar-book/
    http://blog.themeforest.net/author/drewdouglass/page/2/

    Themeforest made a screencast series that takes you through how to build your own custom themes. I'm working through it now and it's REALLY good . You'll need to know a bit of HTML/CSS/PHP. But just enough to not be overwhelmed.

    Good luck with everything.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice links, Hugo_. Welcome to the forums.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  20. #20
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    more and more people are (rightly) turning away from this workflow and designing in the browser itself.
    I'm not sure I totally agree. Yes, Photoshop does have the word 'photo' in it. It is primarily a image editing suite. However, I don't think it can be dismissed as a powerful tool for creating websites. Some people may not have the cognitive process to design and develop straight in the web browser i.e. straight to html and css. People can benefit from designing in Photoshop first and porting it into HTML CSS later. Photoshop (along with many other image editing suites and design applications) can also be used for creating static images that can add graphical diversity to your site.

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bo5ton View Post
    Some people may not have the cognitive process to design and develop straight in the web browser i.e. straight to html and css.
    Honestly, those people probably have no business designing Jack for the web.

    Quote Originally Posted by bo5ton View Post
    People can benefit from designing in Photoshop first and porting it into HTML CSS later.
    Or it leads them down the garden path on design concepts that have no business being on a website in the first place, and makes them think about just one specific target (desktop screen of a certain size) instead of the ENTIRE POINT OF THE INTERNET AND HTML -- targeting MULTIPLE devices, resolutions, and capabilities.... which is just part of how one ends up with px metric fonts 'neccessary' on everything in absurdly useless sizes, illegible color contrasts, and 1 megabyte page-loads of 30-40 separate files to deliver 2k of plaintext and 3 content images... you see it every day on "design firm" and "personal artsy" pages... when the big success stories of the Internet, well... let's just say it's unlikely Amazon, E-Bay or Craigslist used photoshop to make a mockup first.

  22. #22
    SitePoint Member Cythes's Avatar
    Join Date
    Jan 2012
    Location
    Drifting between time and space.
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I second this motion. I started on W3schools and ended up picking up everything (As limited as it might be since there is always room to learn.).
    @op:
    I usually set things up in a basic frame and built from there. Its quick, effective and it gets the job done that I need to have done
    (I am going to be building a portfolio here soon on the site I am working with)

  23. #23
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Honestly, those people probably have no business designing Jack for the web.
    If a person hasn't had experience designing for the web before and isn't sure the capabilities of HTML & CSS, or they need to see the initial design beforehand, they can freely design in Photoshop as they see fit, Especially for those starting out. They don't necessarily have to use any assets from that design. They need not 'slice' up what they want, but having the ability to visualize the design on screen can be of some help to them. It's prototyping, and it has it's place.

  24. #24
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Which again, I've been calling W3Schools webrot for almost a decade now. Possibly one of the worst places to try and learn ANYTHING about writing HTML/CSS.

  25. #25
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Honestly, those people probably have no business designing Jack for the web.


    Or it leads them down the garden path on design concepts that have no business being on a website in the first place, and makes them think about just one specific target (desktop screen of a certain size) instead of the ENTIRE POINT OF THE INTERNET AND HTML -- targeting MULTIPLE devices, resolutions, and capabilities.... which is just part of how one ends up with px metric fonts 'neccessary' on everything in absurdly useless sizes, illegible color contrasts, and 1 megabyte page-loads of 30-40 separate files to deliver 2k of plaintext and 3 content images... you see it every day on "design firm" and "personal artsy" pages... when the big success stories of the Internet, well... let's just say it's unlikely Amazon, E-Bay or Craigslist used photoshop to make a mockup first.
    I disagree. I think it's a powerful part of the design process to design and set out comps in Photoshop first...while that doesn't mean that one should slice it up and then use all images to make a website, it helps to give a better idea of what you want to make. Going in blind is never a good idea. In life, in anything, and especially in web design.

    Photoshop is absolutely necessary, in my opinion.

    The difference between using photoshop and using bad web practices is very different.

    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •