Goldene Schnitt, mit oder ohne Padding/Margin?

Question

Sagen wir, ich habe ein 1000 px breites 2-Spalten-Layout mit 100 px Abstand (Rand) und 50px links und rechts. Wie wende ich das Goldene Verhältnis auf dieses Layout an?

Methode eins

c1+c2=800px;
c1/c2=1.618;
=>c1= 495px und c2= 305px

50px, Spalte 1 (495px), 100px, Spalte 2 (305px), 50px

Methode zwei berechnet die Spaltenbreiten, ohne die Abstände zu berücksichtigen.

c1+c2=1000px
c1/c2=1.618

=>c1= 618px c2=392px

effektive Spaltenbreite nach Hinzufügen der Ränder/Abstände

c1=618px -100px = 518px
c2=392px -100px = 292px
50px, Spalte 1 (51), 100px, Spalte 2 (305px), 50px

% Unterschied in den beiden Methoden 518-495/518= 4%

Der Unterschied von 4% würde keinen Unterschied machen, aber der % Unterschied wird größer, wenn man mit schmalen Layouts arbeitet.

Wenn Sie diesen Artikel sehen möchten, http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

In dem ersten Beispiel haben sie die Polsterung aus dem goldenen Verhältnis herausgenommen, und im anderen haben sie die Polsterung Teil des GR gemacht.

Kann jemand bitte vorschlagen, welche Methode besser ist.

Ich entwickle dieses Layout für ein anpassbares Wordpress-Theme, ich biete eine Option für ein flüssiges Layout an. Ich kann die erste Methode mit dem goldenen Schnitt nicht verwenden (Kann ich?).

Kann ich Methode 2 verwenden, ohne die Harmonie zu verlieren, die der GR in das Design bringt.

Bitte fügen Sie die Links und Referenzen hinzu, die Ihre Antwort unterstützen.

PS: Ich habe diese Frage zuerst im Bereich Grafikdesign gepostet, mir wurde geraten, sie hier zu posten. Ich hoffe, ich verstoße gegen keine Regeln.

Answer 1

Ich kann Sie auf diesen wunderbaren Artikel über das goldene Verhältnis hinweisen:

http://www.alistapart.com/articles/more-meaningful-typography/

Es enthält auch einen Link zu einem nützlichen Tool zur Berechnung von Zahlen basierend auf dem goldenen Verhältnis und ein paar anderen Verhältnissen. Hier ist der Link zur Bequemlichkeit:

http://modularscale.com/

Answer 2

Verwenden Sie diese auf Ihren zweispaltigen Divs:

.golden-ratio-horizontal-primary {
    flex: 1.618;
    // oder width: 62%;
}
.golden-ratio-horizontal-secondary {
    flex: 1;
    // oder width: 38%;
}