Difference between revisions of "CNMCyber.com design"

From CNM Wiki
Jump to: navigation, search
(→‎Designer-search ad)
 
(107 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
[[File:Cnm-cyber-com.png|400px|thumb|right|Draft of [[CNMCyber.com]] desktop landing. The blocks indicate positioning, but various elements and colors are yet to be designed.]][[CNMC landing design]] is the design of the primary [[landing page]] of [[CNMCyber.com]].
+
[[CNMCyber.com design]] is the design of the primary [[landing page]] (hereinafter, the ''Page'') of [[CNMCyber.com]].
  
  
−
==Design==
+
==Trivia==
−
[[File:Wireframe-mobile.PNG|200px|thumb|right|Wireframe for [[CNMCyber.com]] mobile landing]]The draft of the desktop and wireframe for the mobile versions are published on the right of this page.
+
===Action areas===
 +
:There are three groups of action areas on the ''Page'':
 +
:#[[#Landing|Landing screen]],
 +
:#[[#Stories|Stories screen]],
 +
:#[[#Leads|Leads screen]],
 +
:The sizes of these areas shall be the same.
  
−
===Inspirations===
+
===Colors===
−
:Anything innovative is welcome, but the customer loves the design of the start screen of Windows 8 and its "tiles" ([[Wikipedia: Windows 8|click here]] if you forget). The other websites that may inspire include:
+
:They shall be stylish, but simple. No more than 3 colors including the logo, but excluding color pictures. Here is the previous design that the same customer purchased before -- https://worldopp.com/
−
:#https://www.roberthalf.com/ and https://generalassemb.ly/ -- both are similar; they have small pictures on the top, I would make ours movable, and then they add two blocks to separate employers and workers/learners -- great idea and we could do the same -- with our four blocks -- learn, network, partner, work, -- and below the tiles to our services.
 
−
:#https://www.hslu.ch/en/ -- another type, more simplistic, but really solid. They target only students; they don't need to separate the visitors, but I decided to add this website since it could be good for [[WorldOpp]] or something like that.
 
−
:#https://www.learningtree.com/ -- similar to the previous with regard that they don't separate the visitors. Plus, they focus on the search and our search is not good enough for now.
 
−
 
 
−
:The drafts that have been developed for [[FriendsOfCNM.org]] can also be helpful:
 
−
<gallery mode="packed-hover" widths=200px>
 
−
File:Focnm-org.png|Landing
 
−
File:Focnm-org-footer-start.png|Footer (start)
 
−
File:Focnm-org-footer-end.png|Footer (end)
 
−
File:Focnm-slider.png|Board
 
−
</gallery>
 
  
 
===Fonts===
 
===Fonts===
 
:They shall be stylish, but simple. No more than 2 fonts including the logo.
 
:They shall be stylish, but simple. No more than 2 fonts including the logo.
  
−
===Colors===
+
===Photos===
−
:They shall be stylish, but simple. No more than 3 colors including the logo, but excluding color pictures. Here is the previous design that the same customer purchased before -- https://worldopp.com/
+
:Stock images can be used as placeholders; the permanent images shall be taken from https://www.meetup.com/TechDC/photos/
 +
 
 +
===Wiferfames===
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Draft
 +
|colspan="2"|To be decided||[[File:Cnm-cyber-com.png|thumb]]The blocks indicate positioning, but various elements and colors are yet to be designed.
 +
|}
 +
 
 +
==Sections (screens)==
 +
 
 +
===Landing===
 +
:The landing screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|[[File:Focnm-org.png|thumb|Draft for inspiration]]||rowspan="3"|To be decided||[[File:Landing-screen.png|thumb]]
 +
|-
 +
!Header
 +
|Logo, main menu
 +
|Logo, search bar, main menu
 +
|-
 +
!Action area
 +
|No background; (a) invitation "Let's", (b) 4 action areas, (c) upper half of the next section title
 +
|Video background; (a) invitation "Welcome to Cyber. Let's", (b) 2 "more" buttons, (c) 4 action areas, (d) upper half of the border-less banner "Or allow our fellow to make some magic for you"
 +
|}
 +
 
 +
===Banner===
 +
:The no-charge banner features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|colspan="2"|To be decided||[[File:Banner-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="2"|This section may or may not be included depending on the designer's preference||Text on a picture; the picture is the background
 +
|}
 +
 
 +
===Stories===
 +
:The stories' screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|[[File:Focnm-slider.png|thumb|Draft for inspiration]]||To be decided||[[File:Stories-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="3"|To be decided; this could be a manual carousel or something else
 +
|}
 +
*https://premiumaddons.com/carousel-widget-for-elementor-page-builder/
 +
 
 +
===Tiles===
 +
:The tiles' screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|colspan="2"|To be decided||[[File:Tiles-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="3"|The customer loves tiles similar to Windows 8 start menu. If you forgot how they looked like, you are welcome to get to around 1:00/12:43 of this video -- https://www.youtube.com/watch?v=_E1UxI5I_jo -- the tiles could flip and slide both vertically and horizontally.
 +
|}
 +
 
 +
===Choices===
 +
:The choices' screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|colspan="2"|To be decided||[[File:Choice-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="3"|This section is the most questionable. There can be 8 buttons on the desktop version. However, the most logical thing would be to have four action areas and deeper choices on another page.
 +
|}
 +
 
 +
===Leads===
 +
:The leads' screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|colspan="2"|To be decided||[[File:Leads-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="3"|Whatever design would be, its action areas shall be similar to the ones on the [[#Landing|landing screen]].
 +
|}
 +
 
 +
===Bottom===
 +
:The bottom screen features:
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
|&nbsp;
 +
!Mobile!!Tablet!!Desktop
 +
|-
 +
!Fireframe draft
 +
|[[File:Focnm-org-footer-start.png|thumb|Draft for inspiration]]||To be decided||[[File:Bottom-screen.png|thumb]]
 +
|-
 +
!Body
 +
|colspan="3"|The standard footer is fine; the "stay in touch" action area shall include social media icons.
 +
|}
  
−
===Logo===
+
==Design drafts==
−
:[[File:Cyber logo.png|200px|thumb|right|[[CNM Cyber]]'s logo]]The draft of the logo is developed (its [[SVG]] is available per request); however, that can be modified and, especially, its color or colors can be changed.
 
  
−
===Pages===
+
===Early drafts===
−
:#[[CNMCyber.com landing]]
+
<gallery>
 +
File:Wireframe-mobile.PNG|Early wireframe for the mobile landing
 +
File:Cnmcyber-com-desktop.jpg|Early desktop design draft
 +
</gallery>
  
−
===Tiles screen===
+
===Latest drafts===
−
:We love tiles similar to Windows 8. If you forgot how they looked like, you are welcome to get to around 1:00/12:43 of this video -- https://www.youtube.com/watch?v=_E1UxI5I_jo -- the tiles could flip and slide both vertically and horizontally.
+
<gallery>
 +
File:Cnmc-mobile.jpg|Latest mobile design draft
 +
File:Cnmc-desktop.jpg|Latest desktop design draft
 +
</gallery>

Latest revision as of 01:13, 18 November 2023

CNMCyber.com design is the design of the primary landing page (hereinafter, the Page) of CNMCyber.com.


Trivia

Action areas

There are three groups of action areas on the Page:
  1. Landing screen,
  2. Stories screen,
  3. Leads screen,
The sizes of these areas shall be the same.

Colors

They shall be stylish, but simple. No more than 3 colors including the logo, but excluding color pictures. Here is the previous design that the same customer purchased before -- https://worldopp.com/

Fonts

They shall be stylish, but simple. No more than 2 fonts including the logo.

Photos

Stock images can be used as placeholders; the permanent images shall be taken from https://www.meetup.com/TechDC/photos/

Wiferfames

  Mobile Tablet Desktop
Draft To be decided
Cnm-cyber-com.png
The blocks indicate positioning, but various elements and colors are yet to be designed.

Sections (screens)

Landing

The landing screen features:
  Mobile Tablet Desktop
Fireframe draft
Draft for inspiration
 To be decided
Landing-screen.png
Header Logo, main menu Logo, search bar, main menu
Action area No background; (a) invitation "Let's", (b) 4 action areas, (c) upper half of the next section title Video background; (a) invitation "Welcome to Cyber. Let's", (b) 2 "more" buttons, (c) 4 action areas, (d) upper half of the border-less banner "Or allow our fellow to make some magic for you"

The no-charge banner features:
  Mobile Tablet Desktop
Fireframe draft To be decided
Banner-screen.png
Body This section may or may not be included depending on the designer's preference Text on a picture; the picture is the background

Stories

The stories' screen features:
  Mobile Tablet Desktop
Fireframe draft
Draft for inspiration
 To be decided
Stories-screen.png
Body To be decided; this could be a manual carousel or something else

Tiles

The tiles' screen features:
  Mobile Tablet Desktop
Fireframe draft To be decided
Tiles-screen.png
Body The customer loves tiles similar to Windows 8 start menu. If you forgot how they looked like, you are welcome to get to around 1:00/12:43 of this video -- https://www.youtube.com/watch?v=_E1UxI5I_jo -- the tiles could flip and slide both vertically and horizontally.

Choices

The choices' screen features:
  Mobile Tablet Desktop
Fireframe draft To be decided
Choice-screen.png
Body This section is the most questionable. There can be 8 buttons on the desktop version. However, the most logical thing would be to have four action areas and deeper choices on another page.

Leads

The leads' screen features:
  Mobile Tablet Desktop
Fireframe draft To be decided
Leads-screen.png
Body Whatever design would be, its action areas shall be similar to the ones on the landing screen.

Bottom

The bottom screen features:
  Mobile Tablet Desktop
Fireframe draft
Draft for inspiration
 To be decided
Bottom-screen.png
Body The standard footer is fine; the "stay in touch" action area shall include social media icons.

Design drafts

Early drafts

  • Early wireframe for the mobile landing

  • Early desktop design draft

Latest drafts

  • Latest mobile design draft

  • Latest desktop design draft

Retrieved from "https://pravka.bskol.com/w/index.php?title=CNMCyber.com_design&oldid=124858"