Graphic + Web Design | OT | - content without intent is just noise

Great thread. I used to design and code websites back in the XHTML/CSS days. I just started to try and make my first HTML5 website yesterday, I'm using a template to learn the basics and such.

The branding links are very interesting.

I have been more and more fascinated with the idea of meta-design. Essentially...

So what is meta-design? In a traditional design practice, the designer works directly on a design product. Be it a logo, website, or a set of posters, the designer is the instrument to produce the final artifact. A meta-designer works to distill this instrumentation into a design system, often written in software, that can create the final artifact. Instead of drawing it manually, she is programming the system to draw it. These systems can then be used within different contexts to generate a range of design products without much effort.

As a simple example, take this logo for a concert hall in Portugal. Instead of designing a static logo, Sagmeister & Walsh delivered a logo system that can be used to generate endless variations of the logo, for use in posters, business cards, and on the web. Another example is Donald Knuth’s Metafont, a programming language for designing typefaces. Where normal fonts are defined by their vector outlines and require tedious manual work to create, Metafont algorithmically generates new fonts via strokes inspired by human handwriting.

http://runemadsen.com/blog/on-meta-design-and-algorithmic-design-systems/

Also, Microsoft released their Future Vision concepts:

http://www.microsoft.com/enterprise/productivityvision/default.aspx#fbid=qPaQnXkxOT4

Nice thread. I did the Graphic Design thread back on GAF. Some good links in the OP!

Anything for web dev? I'm currently learning html and css on my own then moving onto javascript and whatever else I'll need. Goal is to make this my eventual career.

By Nelo IceAnything for web dev? I'm currently learning html and css on my own then moving onto javascript and whatever else I'll need. Goal is to make this my eventual career.

http://codeacademy.com

By reilo

By Nelo IceAnything for web dev? I'm currently learning html and css on my own then moving onto javascript and whatever else I'll need. Goal is to make this my eventual career.

http://codeacademy.com

I'm currently taking classes here. https://teamtreehouse.com/home

Thanks for the link though I've heard of codeacademy and a bunch of the other sites like udacity, cs50 etc. Currently working on my first web page, have had some help with the CSS but for the most part I managed to make like half of it on my own from scratch. Only been at at it a month and some change. CSS has been an pita to learn especially with positioning and sizing things.

Treehouse is good stuff, too. Can't go wrong.

By reiloTreehouse is good stuff, too. Can't go wrong.

Yeah out of all the sites I've tried, it's the first one that's made coding click. And I'm actually excited to learn and figure out how everything works. Hoping I can prove em right and get a good job from learning everything on my own. Also helps I'm in their career program.

By Nelo Ice

By reiloTreehouse is good stuff, too. Can't go wrong.

Yeah out of all the sites I've tried, it's the first one that's made coding click. And I'm actually excited to learn and figure out how everything works. Hoping I can prove em right and get a good job from learning everything on my own. Also helps I'm in their career program.

One thing I like to do: I see something on a website I like, I inspect the code.

By db

By Nelo Ice

By reiloTreehouse is good stuff, too. Can't go wrong.

Yeah out of all the sites I've tried, it's the first one that's made coding click. And I'm actually excited to learn and figure out how everything works. Hoping I can prove em right and get a good job from learning everything on my own. Also helps I'm in their career program.

One thing I like to do: I see something on a website I like, I inspect the code.

O yeah, I look at sites way differently now lol. When I inspect the code it's like hey I kinda know what's going on here and how all the pieces fit.

Posted this on Gaf too but looking for some help.


After going through some of the CSS layout techniques course on Treehouse, I've decided to restart my web page. I got about halfway done with the first attempt but the css was an unorganized trainwreck.

Instead I'm following what you guys posted earlier to make my css readable. And now I'm focusing on making it mobile first so it'll be easier to make it responsive. I'm using normalize.css to reset the sheet unless I should try learning a framework or flexbox.

My thinking is I want to do my first project the hard way. Hoping keeping my code organized and learning everything properly now will force me into good habits. And if I can figure it out now, I'll save myself a headache later when I really start developing. Since before I was just making a desktop design and kinda throwing things at a wall css wise hoping things would show up where I wanted them to lol.

I'm looking through source codes of sites and seeing how they came together again. But this time around it's starting to make a little more sense as to how they did everything besides the javascript which I haven't learned yet.

So atm I'm tryin to recreate a simpler version of this site with my current skillset. Made a few modifications in my wire frame just so I could make some things different.
http://www.parkjourney.com/

Right now I have the logo up then moving my way down the page. So atm I'm working on making a nav bar and menu. Treehouse has a video on making a dropdown menu with just css and html so figure I'll try my hand at that after I get my nav bar to actually look like a nav bar.

I've made some slight progress since posting that about 2 days ago and managed to make my navbar look normal but now I'm having trouble figuring out how to center it and not fill up the whole width of the page. Also managed to center my logo but no clue how to make it sit above the nav bar without being centered like the site I linked.

For the most part I've been googling to find answers and have somehow had success lol. I know I'm probably making this harder on myself than it needs to be but dammit, I want to do things right from the get go. I'm already making mistakes but like I said earlier figure it's good to learn from them now doing it from a mobile first approach rather than going in clueless as to how to make it mobile first later.

Also css is hard and responsive design is hard. And making a web page from scratch is making me want to bang my head against the wall ;_;. I'm hoping once I get this page done I'll feel way more comfortable building other sites. Doesn't help that I'm a perfectionist and it to be good despite my lack of skills and experience.

edit: double post just tried to edit my old one

Here's my advice.

First read: http://cssguidelin.es/

Follow it. Live by it.

The most important part about knowing CSS is the C: Cascading.

Traditionally:

.header {
background: #000;
}

.header .logo {
color: #fff;
}

.header .wrapper .container .link {
font-weight: 700;
}

My preferred method:

.header {
background: #000;
}

.header__logo {
color: #fff;
}

.header__link {
font-weight: 700;
}

That CSS produces the exact same results, except there is one big important difference: Once you start designing for responsiveness, in order to change the style of header link, with the first guideline of writing, you have to go through the header:

@media (max-width: 767px) {
.header .wrapper .container .header__link {
font-size: 1.25em;
}
}

Whereas with the second approach, you can just do:

@media (max-width: 767px) {
.header__link {
font-size: 1.25em;
}
}

Notice the difference? If you were consistently grouping your CSS in a parent -> child -> child -> child style, in order to update the CSS in responsive situations, you will have to go through the parent -> child -> child -> child again even if all you want to do is change the font-size. Keeping it all on the same level saves you a lot of time and headaches.

Once you get yourself familiarized with that, I would start getting into these two frameworks:

• http://sass-lang.com/ – More control, options, and abilities
• http://compass-style.org/ – The above plus cross-browser and ready-made mixins to save you time and headaches

By reiloHere's my advice.

First read: http://cssguidelin.es/

Follow it. Live by it.

The most important part about knowing CSS is the C: Cascading.

Traditionally:

.header {
background: #000;
}

.header .logo {
color: #fff;
}

.header .wrapper .container .link {
font-weight: 700;
}

My preferred method:

.header {
background: #000;
}

.header__logo {
color: #fff;
}

.header__link {
font-weight: 700;
}

That CSS produces the exact same results, except there is one big important difference: Once you start designing for responsiveness, in order to change the style of header link, with the first guideline of writing, you have to go through the header:

@media (max-width: 767px) {
.header .wrapper .container .header__link {
font-size: 1.25em;
}
}

Whereas with the second approach, you can just do:

@media (max-width: 767px) {
.header__link {
font-size: 1.25em;
}
}

Notice the difference? If you were consistently grouping your CSS in a parent -> child -> child -> child style, in order to update the CSS in responsive situations, you will have to go through the parent -> child -> child -> child again even if all you want to do is change the font-size. Keeping it all on the same level saves you a lot of time and headaches.

Once you get yourself familiarized with that, I would start getting into these two frameworks:

• http://sass-lang.com/ – More control, options, and abilities
• http://compass-style.org/ – The above plus cross-browser and ready-made mixins to save you time and headaches

Thanks for the link just bookmarked it and I'll go through that. Yeah freaking CSS has been such a pita to to learn. It was simple enough to pick up the basics while learning on Treehouse, but using it in practice on an actual project is a completely different story.

Also I was told to check these out for organizing my CSS as well.
http://codeguide.co/#css-syntax
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

While it's more in the moment and has a lot of time relative context this is a pretty smart ad.

Stupid question probably, but I'm not good at this. I'm making a (very simple, static) website (school assignment, nothing serious), and one of the instructions is to have an image in the header. How do I do this? I mean I could get one off the internet but that could be a huge image, and I was told I should never resize it manually in my html/css. Do I need to photoshop it or anything? (I don't have photoshop lol)

Was bored.

yoo those are nice

should do some with the logo being two lines

Tiger you dummy.

Got bored again.

Bump.

Tea, might updating the thread and jazz it up a bit?

I should start doing some graphic design. Just for practice.

By reilo Go To PostTea, might updating the thread and jazz it up a bit?

K. Have time this weekend.

Great thread, I really need to start designing again some more. Will try posting here more often.

Been learning HTML & CSS to coincide with studying Graphic Design as I feel it will greatly benefit me (especially with it having an emphasis on UI/UX, Interactivity and Web Design).

Little website I've created following these tutorials - https://www.youtube.com/watch?v=_a2bl5oF-xc



Feel once I finish this website I'll have enough knowledge to do a basic, responsive website with no need for a tutorial or much help.

Well done Kika. I'll check those tutorials later :) thanks for sharing

By Elchele Go To PostWell done Kika. I'll check those tutorials later :) thanks for sharing

Cheers m8.

He's currently doing a Netflix redesign one too. He's not very consistent with his uploads though.

Homies, I want to get some photoshop/graphic design basics.

Any recommended resources?

Fuck I still gotta jazz this up. Honestly I'll go take a look at some books I got and recommend some. Far as GD goes, I'd start away from the computer and drawing.

Drawing? Like manual drawing? Cause I can't.

Scribbling. Moving shapes around a space. Layouts. Generally it's easier to establish the look of something before hitting the computer. The computer can limit your expression without you even realizing it because you're focused on looks way before process.

Ahh, ok I get you.

I have this site design in my head that I don't even have the beginning concept of how to implement.

Basically, a landing page with a sort of spinning pie chart that pauses on mouse over with the selected slice enlarging. On click, the piece expands to cover the screen. On top of that, the background of each slice would be fixed. I'm not explaining it well, but I think it would look cool as fuck.

I think I can start it based on http://wheelnavjs.softwaretailoring.net/examples.html

I guess I do has a beginning concept.

By Tea Go To PostWas bored.

Bottom right third from left.

So, a friend of mine is launching a weblog and asked my help to convert his design to wordpress.
I'm stuck. I have no idea how to do the 4 column new entries/post thing :( I'm desperate.


Any help will be really appreciated.

Maybe this can get you started: https://jsfiddle.net/0cgeLxcc/

By reilo Go To PostMaybe this can get you started: https://jsfiddle.net/0cgeLxcc/

You're the best, king reilo

edit: nvm. I did it!!

So I'm being trying to do this 3 icons menu during the afternoon and I've come to various issues to make it work in a responsive way. The menu only displays for tablets and mobile


and when there's one :active, it changes to another icon (in red).
and there's those lines in between, which I decided to put in the same bg as the box that contains them and it didn't work that well :p

pls help

Can you clarify your question? Not sure what you're asking.

If I'm reading right, the lines shouldn't have their own bg. Don't make redundant code like having a bg for everything.

Basically I don't know if I'm doing this right

https://jsfiddle.net/sikaffy/tv9eym05/

the bg with the separators ruined it, and I don't know how to code it instead of using them from the bg. and overall I don't know if the code is right.

You can make that border and those lines in css.

Yes, I understood that tea. But was hoping for a bit more of help. I know very little about coding, sadly.

The top and bottom border can just go around the div you made for that space. If it doesn't exist make one around the existing elements.

bigdiv {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}

Couple diff ways for the vert lines. Either way you gotta make a div, assign a height in css and either give it a left or right border or a background color and with background color you also gotta assign a width for sure, with the border you might need to as well for proper alignment.

linediv {
height: 75px;
border-right: 2px solid gray;
}

Haven't done css in a while, hope those are still relevant.

I tried this: https://jsfiddle.net/sikaffy/2ps7djhy/1/
but the separators are fucking everything for some reason :/

I'll try what you posted now tea.

The images want to float but can't it looks like? See if applying float left to .img helps. Or better yet make it the div they're in .img or assign a class to them so other images aren't affected.

Who wants to put together a one pager for me? I'm looking into starting a consulting company. Need a flashy one pager and nothing else, tbh. :p

Tea how would you feel about making a banner for a 2017 hip-hop thread?