Difference between revisions of "CNMCyber.com design"

From CNM Wiki
Jump to: navigation, search
 
(108 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.
+
===Fonts===
−
:#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.
+
: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===
 +
:{|class="wikitable" width=100% style="text-align:center;"
 +
| 
 +
!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;"
 +
| 
 +
!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;"
 +
| 
 +
!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
 +
|}
  
−
:The drafts that have been developed for [[FriendsOfCNM.org]] can also be helpful:
+
===Stories===
−
<gallery mode="packed-hover" widths=200px>
+
:The stories' screen features:
−
File:Focnm-org.png|Landing
+
:{|class="wikitable" width=100% style="text-align:center;"
−
File:Focnm-org-footer-start.png|Footer (start)
+
|&nbsp;
−
File:Focnm-org-footer-end.png|Footer (end)
+
!Mobile!!Tablet!!Desktop
−
File:Focnm-slider.png|Board
+
|-
−
</gallery>
+
!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.
 +
|}
  
−
===Designer-search ad===
+
===Choices===
−
[[File:Cnmcyber-com-desktop.jpg|200px|thumb|right|Latest design draft]]<blockquote><p>We are looking for a graphical, UX, and/or UI designer to develop designs for three responsive pages: landing, registration, and post-registration. The assignment is initially on a small scale and further may be extended to long-term collaboration or a permanent position in our growing company. We have secured about 40 domain names; each will host about a dozen websites. Requirements and skills:<ul><li>UI/UX interactivity design with [[Adobe Photoshop]] or other tools.</li><li>Frequent, clear and effective communication.</li><li>Dedication to meet project deadlines in a timely manner.</li></ul></p><p>To get a contract on any page, you shall be able to communicate how you envision that page be. Please note that any attempt to send any portfolio of works that you claim are yours or express your greatness as a designer will lower, if not disqualify, your candidacy's position.</blockquote>
+
: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.  
 +
|}
  
−
===Fonts===
+
===Leads===
−
:They shall be stylish, but simple. No more than 2 fonts including the logo.
+
: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]].
 +
|}
  
−
===Colors===
+
===Bottom===
−
: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/
+
: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"